FloatingActionButton con texto en lugar de imagen


85

Estoy tratando de averiguar cómo se puede modificar FloatingActionButton desde la biblioteca de soporte de Android. ¿Se puede usar con el texto en lugar de la imagen?

Algo como este:

ingrese la descripción de la imagen aquí

Veo que extiende ImageButton, así que creo que no. Estoy en lo cierto?

¿Es esto correcto en términos de diseño de materiales en general?

Respuestas:


24

Con API 28, simplemente puede agregar texto a Fabs usando:

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

Oye, finalmente lo hicieron. Probablemente esa sea la mejor manera de usarlo ahora. Gracias por compartir.
camarada

java.lang.ClassNotFoundException: no se encontró la clase "com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton"
Nirel

2
De github.com/material-components/material-components-android debe usar la última versiónimplementation 'com.google.android.material:material:1.1.0-alpha06'
Job M

1
se convierte en un rectángulo de esquina redondeada, ¿cómo convertirlo en un botón redondo?
dx3906

hacer todo el radio de la esquina30dp
Trabajo M

100

Gracias a todos.

Aquí hay una solución fácil que encontré para esta pregunta. Funciona correctamente para Android 4+, para Android 5+ se agrega el parámetro específico android: elevación para dibujar TextView sobre 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>

2
TextView que muestra la sombra debido a las propiedades de elevación,
Lavekush Agrawal

Intente agregar los atributos android:layout_margin="20dp"en FloatingActionButton para resolver los problemas de sombra. Esperando una mejor solución para ello
Long Ranger

agregar android:includeFontPadding="false"a la TextViewetiqueta para un mejor rendimiento

android: height = "16dp" solo es compatible con API 21 y superior.
Red M

57

convertir un texto en mapa de bits y utilizarlo. es super facil.

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
Perfecto, pero el tamaño del texto no cambia.
Ankur_009

1
@ Ankur_009 está cambiando. Intente aumentar el valor en un tamaño considerable, ya que está en flotación.
pratz9999

dulce, con pocos cambios que hizo trabajar a fuentes icono de conversión a dibujables
SolidSnake

1
@ Ankur_009: El espacio del botón es limitado, por eso no ve un cambio en el tamaño del texto. Entonces, si su texto ya ocupa todo el espacio en el botón, agrandar el texto no tendrá ningún efecto.
j3App

2
@ pratz9999 incluso lo puse en 1000, pero aún así no cambia
Shivam Pokhriyal

30

Los FAB se utilizan generalmente en CoordinatorLayouts. Puedes usar esto:

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

Esto es lo que hace el trabajo

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

Resultado:

El resultado

Si está usando algunos layout_behaviorpara su FAB, tendrá que hacer uno similar layout_behaviorpara elTextView


1
Obteniendo el error android.support.design.widget.FloatingActionButton no se puede
transmitir

1
¿Estás seguro de que FloatingActionButton está dentro de CoordinatorLayout?
lokeshrmitra

1
@ Ankur_009 este error android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupprobablemente se deba a que lo ha puesto TextViewdentro de FAB. Consulte con OP dónde se cierra la etiqueta.
dumbfingers

La elevación de TextView también debe ser mayor que la de FAB; de lo contrario, se ocultará detrás de FAB
Ali Nem

Excelente respuesta !!
Sjd

17

No puede configurar texto FloatingActionButtondesde la biblioteca de soporte, pero lo que puede hacer es crear una imagen de texto directamente desde Android Studio: File -> New -> Image Assety luego usarla para su botón.

En términos de Diseño de Materiales ; no mencionaron el uso de texto con FloatingActionButton, y no veo ninguna razón para hacerlo ya que realmente no tienes mucho espacio para un texto.


5
Texto como "OK", "YES", "NO", "GO" encaja perfectamente dentro de FAB's ..........
MarsAndBack

Para obtener palabras en FAB, consulte las pestañas extendidas: material.io/design/components/…
Mike Margulies

8

Necesitaba texto en un FAB, pero en su lugar elegí un TextView con un fondo circular dibujable:

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

Aquí está el dibujable (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>

ingrese la descripción de la imagen aquí


2
No hay animación ondulada con tal solución
Vlad

2

La respuesta de @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 funciona pero hice algunos cambios con fab en el código (no xml porque se sobrescribirán en los métodos de clase)

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

¿Dónde setTextBitmaphay una extensión para la ImageViewclase con una funcionalidad similar pero que admite texto de varias líneas?

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

0

Una pequeña modificación a la respuesta del camarada para admitirla para la API de Android por debajo de 21, solo agregue app:elevation="0dp"a laFloatingActionButton

¡Esto podría ayudar a otros!


0

Usé un CardView para lograr el mismo resultado

  <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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.