FloatingActionButton mit Text anstelle von Bild

84

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:

Geben Sie hier die Bildbeschreibung ein

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

Ist dies in Bezug auf das Materialdesign im Allgemeinen richtig?

Genosse
quelle

Antworten:

20

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"/>
Job M.
quelle
Hey, sie haben es endlich geschafft. Wahrscheinlich ist das jetzt der beste Weg, es zu benutzen. Danke für das Teilen.
Genosse
java.lang.ClassNotFoundException: Klasse "com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton"
Nirel
1
Von github.com/material-components/material-components-android müssen Sie die neueste verwenden implementation 'com.google.android.material:material:1.1.0-alpha06'
Job M
1
es wird eine runde Ecke richtig, wie macht man es zu einem runden Knopf?
dx3906
machen alle Ecken Radius30dp
Job M
100

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>
Genosse
quelle
2
TextView zeigt Schatten aufgrund von
Höheneigenschaften
Versuchen Sie, die Attribute android:layout_margin="20dp"in FloatingActionButton hinzuzufügen, um die Schattenprobleme zu beheben. Warten auf eine bessere Lösung dafür
Long Ranger
android:includeFontPadding="false"zum TextViewTag hinzufügen für bessere Leistung
android: height = "16dp" ist nur mit API 21 und höher kompatibel.
Red M
57

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;
}
Nandan Kumar Singh
quelle
2
Perfekt, aber die Textgröße ändert sich nicht.
Ankur_009
1
@ Ankur_009 seine Änderung. Versuchen Sie, den Wert um eine ganze Größe zu erhöhen, da er in float ist.
pratz9999
süß, mit wenigen Änderungen habe ich es zu konvertieren Symbol Schriften Drawables arbeiten
Solid Snake
1
@ Ankur_009: Der Schaltflächenbereich ist begrenzt, daher wird keine Änderung der Textgröße angezeigt. Wenn Ihr Text also bereits den gesamten Platz auf der Schaltfläche einnimmt, hat eine Vergrößerung des Texts keine Auswirkung.
J3App
2
@ pratz9999 Ich habe es sogar auf 1000 gesetzt, aber es ändert sich immer noch nicht
Shivam Pokhriyal
30

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:

Das Ergebnis

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

lokeshrmitra
quelle
1
Fehler erhalten android.support.design.widget.FloatingActionButton kann nicht in android.view.ViewGroup
Ankur_009
1
Sind Sie sicher, dass sich Ihr FloatingActionButton im CoordinatorLayout befindet?
Lokeshrmitra
1
@ Ankur_009 Dieser Fehler android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupist wahrscheinlich, weil Sie TextViewin FAB gesetzt haben. Bitte erkundigen Sie sich bei OP, wo das Tag geschlossen wurde.
Dummköpfe
Die Höhe der Textansicht muss auch größer sein als die der FAB, sonst versteckt sie sich hinter der FAB
Ali Nem
Hervorragende Antwort !!
Sjd
16

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.

Mulham Raee
quelle
5
Text wie "OK", "JA", "NEIN", "GO" passt perfekt in FABs ..........
MarsAndBack
Wörter in FABs finden Sie unter Erweiterte Registerkarten: material.io/design/components/…
Mike Margulies
8

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>

Geben Sie hier die Bildbeschreibung ein

Derwrecked
quelle
1
Es gibt keine Wellenanimation mit einer solchen Lösung
Vlad
2

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)
}
Vlad
quelle
0

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!

Balram Kukreja
quelle
0

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>
Aryeetey Solomon Aryeetey
quelle