web-dev-qa-db-fra.com

FloatingActionButton avec du texte au lieu de l'image

J'essaie de comprendre comment modifier FloatingActionButton à partir de la bibliothèque de support Android. Peut-il être utilisé avec le texte au lieu d’image?

Quelque chose comme celui-ci:

 enter image description here

Je vois que cela étend ImageButton donc je ne pense pas. Ai-je raison?

Est-ce correct en termes de conception matérielle en général?

androidmaterial-designandroid-support-libraryfloating-action-button
64
comrade

Merci à tous.

Voici une solution de contournement facile que j'ai trouvée pour cette question. Fonctionne correctement pour Android 4+, pour Android 5+ est ajouté le paramètre spécifique Android: élévation pour dessiner TextView sur FloatingActionButton.

<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

convertir un texte en bitmap et l'utiliser. c'est super facile.

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
Nandan Kumar Singh

Les FAB sont généralement utilisés dans CoordinatorLayouts. Vous pouvez utiliser ceci:

<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>

C'est ce que fait le travail 

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

Résultat:

The Result

Si vous utilisez un layout_behavior pour votre FAB, vous devrez créer un layout_behavior similaire pour le TextView

20
lokeshrmitra

Vous ne pouvez pas définir de texte pour FloatingActionButton à partir de la bibliothèque de support, mais vous pouvez créer une image texte directement à partir d'Android Studio: File -> New -> Image Asset, puis l'utiliser pour votre bouton.

Dans les termes de Material Design ; ils n'ont pas mentionné l'utilisation de texte avec FloatingActionButton, et je ne vois aucune raison de le faire car vous n'avez pas vraiment beaucoup d'espace pour un texte.

13
Mulham Raee

J'avais besoin de texte dans un FAB, mais au lieu de cela, je suis allé avec un TextView avec un arrière-plan circulaire dessinable:

  <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"/>

Voici le dessinable (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

Avec API 28, vous pouvez simplement ajouter du texte aux Fabs en utilisant:

Visitez: 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

Une très petite modification à la réponse de camarade pour la prendre en charge pour Android API ci-dessous 21 ajoute simplement app:elevation="0dp" à la FloatingActionButton

Cela pourrait aider les autres!

0
Balram Kukreja

Réponse de @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 fonctionne mais j'ai apporté des modifications à fab in code (pas xml car elles seront écrasées dans les méthodes de classe)

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

Où setTextBitmap est une extension de la classe ImageView avec une fonctionnalité similaire mais prenant en charge texte multiple

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