library - floating action menu android studio

FloatingActionButton con texto en lugar de imagen

Question

Estoy tratando de descubrir 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:

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?

Answer 1

Con API 28 puedes simplemente 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"/>

Answer 2

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>

Answer 3

Los FAB generalmente se usan en CoordinatorLayout s. 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:

Si está utilizando algún layout_behavior de layout_behavior para su FAB, tendrá que hacer un layout_behavior de layout_behavior similar para TextView

Answer 4

Necesitaba texto en una FAB, pero en lugar de eso, elegí 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>

Answer 5

No puede establecer texto para FloatingActionButton desde la biblioteca de soporte, pero lo que puede hacer es crear una imagen de texto directamente desde el estudio de Android: File -> New -> Image Asset , y luego usarlo para su botón.

En los 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 tiene mucho espacio para un texto.

Answer 6

Respuesta de @NandanKumarSingh https://.com/a/39965170/5279156 funciona pero he realizado 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

Donde setTextBitmap es una extensión para la clase ImageView con una funcionalidad similar pero admite texto multilínea

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

Answer 7

Una modificación muy pequeña a la respuesta del para que sea compatible con la API de Android debajo de 21 simplemente agregue la app:elevation="0dp" al FloatingActionButton

¡Esto podría ayudar a otros!

Answer 8

convierte un texto en mapa de bits y úsalo. Es super fácil.

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