wake-up-neo.com

FloatingActionButton mit Text statt 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:

 enter image description here

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

Ist dies in Bezug auf Material Design im Allgemeinen richtig?

64
comrade

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+ wird der spezifische Parameter Android hinzugefügt: Erhöhung, 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>
89
comrade

wandeln Sie einen Text in Bitmap um 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;
}
45

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:

The Result

Wenn Sie einen layout_behavior für Ihre FAB verwenden, müssen Sie einen ähnlichen layout_behavior für die TextView machen

20
lokeshrmitra

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

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

13
Mulham Raee

Ich brauchte Text in einer FAB, aber stattdessen habe ich mich für eine Textansicht mit einem kreisförmigen 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 Zeichen (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>

 enter image description here

5
Derwrecked

Mit API 28 können Sie Fabs einfach mit folgendem Befehl Text hinzufügen:

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"/>
3
Job M

Eine sehr kleine Änderung an der Antwort von Kamerad , um sie für die Android API unter 21 zu unterstützen. Fügen Sie app:elevation="0dp" zum FloatingActionButton hinzu.

Dies könnte anderen helfen!

0
Balram Kukreja

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

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

Dabei ist setTextBitmap eine Erweiterung für die ImageView-Klasse mit ähnlicher Funktionalität, unterstützt jedoch Mehrfachtext

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(newLine())
    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)
}
0
V. Kalyuzhnyu