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