86
Com a API 28, você pode simplesmente adicionar texto ao Fabs usando:
Visite: 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"/>
implementation 'com.google.android.material:material:1.1.0-alpha06'
Obrigado a todos.
Aqui está uma solução fácil que encontrei para esta questão. Funciona corretamente para Android 4+, para Android 5+ foi adicionado o parâmetro específico android: elevação para desenhar 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>
fonte
android:layout_margin="20dp"
em FloatingActionButton para resolver os problemas de sombra. Esperando por uma solução melhor para issoandroid:includeFontPadding="false"
àTextView
tag para melhor desempenhoconverter um texto em bitmap e usá-lo. é 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; }
fonte
FABs são geralmente usados em
CoordinatorLayout
s. Você pode usar isto:<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>
Isso é o que faz o trabalho
app:layout_anchor="@id/fab" app:layout_anchorGravity="center"
Resultado:
Se você estiver usando algum
layout_behavior
para o seu FAB, você terá que fazer um semelhantelayout_behavior
para oTextView
fonte
android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroup
é provavelmente porque você colocouTextView
dentro do FAB. Verifique com OP onde a tag é fechada.Você não pode definir o texto para a
FloatingActionButton
partir da biblioteca de suporte, mas o que você pode fazer é criar uma imagem de texto diretamente do android studio:File -> New -> Image Asset
e, em seguida, usá-la para o seu botão.Em termos de Material Design ; eles não mencionaram o uso de texto com
FloatingActionButton
, e não vejo nenhuma razão para fazer isso, já que você realmente não tem muito espaço para um texto.fonte
Eu estava precisando de texto em um FAB, mas, em vez disso, optei por um TextView com um plano de fundo drawable circular:
<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"/>
Aqui está o drawable (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>
fonte
Resposta de @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 funciona, mas fiz algumas alterações com fab no código (não xml porque eles serão substituídos nos métodos de classe)
fab.setTextBitmap("ANDROID", 100f, Color.WHITE) fab.scaleType = ImageView.ScaleType.CENTER fab.adjustViewBounds = false
Onde
setTextBitmap
está uma extensão paraImageView
classe com funcionalidade semelhante, mas suporta texto multilnefun 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) }
fonte
Usei um CardView para obter o mesmo 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>
fonte
Uma modificação muito pequena na resposta do camarada para suportá-la para API Android abaixo de 21, basta adicionar
app:elevation="0dp"
aoFloatingActionButton
Isso pode ajudar outras pessoas!
fonte