FloatingActionButton con testo anziché immagine


86

Sto cercando di capire come può essere modificato FloatingActionButton dalla libreria di supporto Android. Può essere utilizzato con il testo anziché con l'immagine?

Qualcosa di simile a questo:

inserisci qui la descrizione dell'immagine

Vedo che estende ImageButton quindi penso di no. Ho ragione?

È corretto in termini di Material Design in generale?

Risposte:


26

Con l'API 28 puoi semplicemente aggiungere testo a Fabs utilizzando:

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

Ehi, finalmente l'hanno fatto. Probabilmente è il modo migliore per usarlo ora. Grazie per la condivisione.
compagno

java.lang.ClassNotFoundException: impossibile trovare la classe "com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton"
Nirel

2
Da github.com/material-components/material-components-android devi usare l'ultima implementation 'com.google.android.material:material:1.1.0-alpha06'
Job M

1
diventa un angolo tondo rettangolo, come renderlo un bottone tondo?
dx3906

1
@JobM Mi hai salvato i decenni. Grazie
Moinkhan

101

Grazie a tutti.

Ecco una semplice soluzione alternativa che ho trovato per questa domanda. Funziona correttamente per Android 4+, per Android 5+ viene aggiunto il parametro specifico android: elevazione per disegnare TextView su 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>

3
TextView che mostra l'ombra a causa delle proprietà di elevazione,
Lavekush Agrawal

Prova ad aggiungere gli attributi android:layout_margin="20dp"in FloatingActionButton per risolvere i problemi di ombreggiatura. Aspettando una soluzione migliore per questo
Long Ranger

aggiungi android:includeFontPadding="false"al TextViewtag per prestazioni migliori

android :lift = "16dp" è compatibile solo con API 21 e versioni successive.
Red M

57

converti un testo in bitmap e usalo. è 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;
}

2
Perfetto ma la dimensione del testo non cambia.
Ankur_009

1
@ Ankur_009 sta cambiando. Prova ad aumentare il valore di una certa dimensione poiché è in virgola mobile.
pratz9999

dolce, con poche modifiche ho fatto funzionare per convertire i caratteri delle icone in disegnabili
SolidSnake

1
@ Ankur_009: Lo spazio per i pulsanti è limitato, ecco perché non vedi un cambiamento nella dimensione del testo. Quindi, se il tuo testo occupa già tutto lo spazio sul pulsante, ingrandirlo non avrà alcun effetto.
j3App

2
@ pratz9999 l'ho persino impostato su 1000 ma non cambia ancora
Shivam Pokhriyal

30

I FAB vengono solitamente utilizzati in CoordinatorLayouts. Puoi usare questo:

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

Questo è ciò che fa il lavoro

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

Risultato:

Il risultato

Se ne stai usando alcuni layout_behaviorper il tuo FAB, dovrai crearne uno simile layout_behaviorper ilTextView


1
Ottenere l'errore android.support.design.widget.FloatingActionButton non può essere trasmesso ad android.view.ViewGroup
Ankur_009

1
Sei sicuro che il tuo FloatingActionButton sia all'interno di CoordinatorLayout?
lokeshrmitra

1
@ Ankur_009 questo errore android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupè probabilmente dovuto al fatto che hai inserito TextViewFAB. Si prega di verificare con OP dove si chiude il tag.
Dumbfingers

L'elevazione del TextView deve anche essere maggiore di quella di FAB, altrimenti si nasconderà dietro la FAB
Ali Nem

Risposta superba !!
Sjd

18

Non puoi impostare il testo FloatingActionButtondalla libreria di supporto, ma quello che puoi fare è creare un'immagine di testo direttamente da Android Studio: File -> New -> Image Assete quindi usarla per il tuo pulsante.

In termini di Material Design ; non hanno menzionato l'uso del testo con FloatingActionButton, e non vedo alcun motivo per farlo dal momento che non hai molto spazio per un testo.


5
Testo come "OK", "YES", "NO", "GO" si adatta perfettamente a FAB's ..........
MarsAndBack

Per le parole nei FAB, vedere le schede estese: material.io/design/components/…
Mike Margulies

8

Avevo bisogno di testo in un FAB ma invece sono andato con un TextView con uno sfondo disegnabile circolare:

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

Ecco il disegnabile (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>

inserisci qui la descrizione dell'immagine


2
Non c'è animazione a catena con tale soluzione
Vlad

2

La risposta di @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 funziona ma ho apportato alcune modifiche con fab nel codice (non xml perché verranno sovrascritte nei metodi di classe)

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

Dov'è setTextBitmapun'estensione per la ImageViewclasse con funzionalità simili ma supporta il testo multilinea

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

1

Ho usato un CardView per ottenere lo stesso risultato

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

0

Basta aggiungere una piccola modifica alla risposta del compagno per supportarlo per l'API Android inferiore a 21app:elevation="0dp" al fileFloatingActionButton

Questo potrebbe aiutare gli altri!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.