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:
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?
implementation 'com.google.android.material:material:1.1.0-alpha06'
30dp
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>
fuente
android:layout_margin="20dp"
en FloatingActionButton para resolver los problemas de sombra. Esperando una mejor solución para elloandroid:includeFontPadding="false"
a laTextView
etiqueta para un mejor rendimientoconvertir 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; }
fuente
Los FAB se utilizan generalmente 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á usando algunos
layout_behavior
para su FAB, tendrá que hacer uno similarlayout_behavior
para elTextView
fuente
android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroup
probablemente se deba a que lo ha puestoTextView
dentro de FAB. Consulte con OP dónde se cierra la etiqueta.No puede configurar texto
FloatingActionButton
desde la biblioteca de soporte, pero lo que puede hacer es crear una imagen de texto directamente desde Android Studio:File -> New -> Image Asset
y 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.fuente
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>
fuente
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
setTextBitmap
hay una extensión para laImageView
clase 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) }
fuente
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!
fuente
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>
fuente