FloatingActionButton mit Text anstelle von Bild

Ich versuche herauszufinden, wie FloatingActionButton aus der Android-Support-Bibliothek geändert werden kann. Kann es mit dem Text anstelle des Bildes verwendet werden?

So etwas wie dieses:

Ich sehe, dass es ImageButton erweitert, also denke ich nicht. Habe ich recht?

Ist dies in Bezug auf das Materialdesign im Allgemeinen richtig?

Mit API 28 können Sie Fabs einfach Text hinzufügen, indem Sie:

Besuchen Sie: https://material.io/develop/android/components/extended-floating-action-button/

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"
      app:icon="@drawable/ic_plus_24px"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|right|end"/>

Dank an alle.

Hier ist eine einfache Problemumgehung, die ich für diese Frage gefunden habe. Funktioniert korrekt für Android 4+, für Android 5+ wurde ein spezifischer Parameter für Android hinzugefügt: Elevation, um TextView über FloatingActionButton zu zeichnen.

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:color/transparent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@android:string/ok"
        android:elevation="16dp"
        android:textColor="@android:color/white"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>

Konvertieren Sie einen Text in eine Bitmap und verwenden Sie ihn. es ist super einfach.

fab.setImageBitmap(textAsBitmap("OK", 40, Color.WHITE));

//method to convert your text to image
public static Bitmap textAsBitmap(String text, float textSize, int textColor) {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setTextSize(textSize);
    paint.setColor(textColor);
    paint.setTextAlign(Paint.Align.LEFT);
    float baseline = -paint.ascent(); // ascent() is negative
    int width = (int) (paint.measureText(text) + 0.0f); // round
    int height = (int) (baseline + paint.descent() + 0.0f);
    Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(image);
    canvas.drawText(text, 0, baseline, paint);
    return image;
}

FABs werden normalerweise in CoordinatorLayouts verwendet. Sie können dies verwenden:

<android.support.design.widget.CoordinatorLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"               
            app:backgroundTint="@color/colorPrimary" />

      <TextView android:layout_height="wrap_content"
              android:layout_width="wrap_content"
              android:text="OK"
              android:elevation="6dp"
              android:textSize="18dp"
              android:textColor="#fff"
              app:layout_anchor="@id/fab"
              app:layout_anchorGravity="center"/>

</android.support.design.widget.CoordinatorLayout>

Das macht die Arbeit

app:layout_anchor="@id/fab"
app:layout_anchorGravity="center"

Ergebnis:

Wenn Sie einige layout_behaviorfür Ihr FAB verwenden, müssen Sie ein ähnliches layout_behaviorfür das erstellenTextView

Sie können keinen Text FloatingActionButtonaus der Support-Bibliothek festlegen. Sie können jedoch ein Textbild direkt aus Android Studio: erstellen File -> New -> Image Assetund es dann für Ihre Schaltfläche verwenden.

In Bezug auf Materialdesign ; Sie haben nicht erwähnt, dass Text mit verwendet wird FloatingActionButton, und ich sehe keinen Grund dafür, da Sie nicht wirklich viel Platz für einen Text haben.

Ich brauchte Text in einem FAB, aber stattdessen habe ich mich für eine Textansicht mit einem kreisförmigen, zeichnbaren Hintergrund entschieden:

  <TextView
        android:layout_margin="10dp"
        android:layout_gravity="right"
        android:gravity="center"
        android:background="@drawable/circle_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:fontFamily="sans-serif"
        android:text="AuthId"
        android:textSize="15dp"
        android:elevation="10dp"/>

Hier ist das Drawable (circle_backgroung.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

<solid
    android:color="#666666"/>

<size
    android:width="60dp"
    android:height="60dp"/>
</shape>

Die Antwort von @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 funktioniert, aber ich habe einige Änderungen mit fab im Code vorgenommen (nicht xml, da sie in Klassenmethoden überschrieben werden).

fab.setTextBitmap("ANDROID", 100f, Color.WHITE)
fab.scaleType = ImageView.ScaleType.CENTER
fab.adjustViewBounds = false

Wo setTextBitmapist eine Erweiterung für eine ImageViewKlasse mit ähnlichen Funktionen, die jedoch mehrzeiligen Text unterstützt ?

fun ImageView.setTextBitmap(text: String, textSize: Float, textColor: Int) {
    val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    paint.textSize = textSize
    paint.color = textColor
    paint.textAlign = Paint.Align.LEFT
    val lines = text.split("\n")
    var maxWidth = 0
    for (line in lines) {
        val width = paint.measureText(line).toInt()
        if (width > maxWidth) {
            maxWidth = width
        }
    }
    val height = paint.descent() - paint.ascent()
    val bitmap = Bitmap.createBitmap(maxWidth, height.toInt() * lines.size, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    var y = - paint.ascent()
    for (line in lines) {
        canvas.drawText(line, 0f, y, paint)
        y += height
    }
    setImageBitmap(bitmap)
}

Eine sehr kleine Änderung an der Antwort des Kameraden , um sie für die Android-API unter 21 app:elevation="0dp"zu unterstützenFloatingActionButton

Dies könnte anderen helfen!

Ich habe ein CardView verwendet, um das gleiche Ergebnis zu erzielen

  <androidx.cardview.widget.CardView
            android:layout_width="@dimen/dp80"
            android:layout_height="@dimen/dp80"
            android:layout_gravity="center_horizontal"
            app:cardElevation="@dimen/dp8"
            android:layout_marginBottom="@dimen/dp16"
            android:layout_marginTop="@dimen/dp8"
            app:cardBackgroundColor="@color/colorWhite100"
            app:cardCornerRadius="@dimen/dp40">

            <TextView
                style="@style/TextAppearance.MaterialComponents.Headline4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/shape_go_bg"
                android:text="GO"
                android:gravity="center"
                android:textColor="@color/colorWhite100" />
        </androidx.cardview.widget.CardView>