FloatingActionButton com texto em vez de imagem


86

Estou tentando descobrir como pode ser modificado FloatingActionButton da biblioteca de suporte do Android. Pode ser usado com o texto em vez da imagem?

Algo como este:

insira a descrição da imagem aqui

Vejo que estende ImageButton, então acho que não. Estou certo?

Isso é correto em termos de design de materiais em geral?

Respostas:


26

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

Ei, eles finalmente conseguiram. Provavelmente é a melhor maneira de usá-lo agora. Obrigado por compartilhar.
camarada

java.lang.ClassNotFoundException: não encontrou a classe "com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton"
Nirel

2
De github.com/material-components/material-components-android você tem que usar o mais recente implementation 'com.google.android.material:material:1.1.0-alpha06'
Trabalho M

1
torna-se um retângulo de canto arredondado, como torná-lo um botão redondo?
dx3906

1
@JobM Você salvou minhas décadas. Obrigado
Moinkhan

101

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>

3
TextView mostrando sombra devido às propriedades de elevação,
Lavekush Agrawal

Tente adicionar os atributos android:layout_margin="20dp"em FloatingActionButton para resolver os problemas de sombra. Esperando por uma solução melhor para isso
Long Ranger

adicione android:includeFontPadding="false"à TextViewtag para melhor desempenho

android: elevation = "16dp" só é compatível com API 21 e superior.
Red M

57

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

2
Perfeito, mas o tamanho do texto não muda.
Ankur_009

1
@ Ankur_009 sua mudança. Tente aumentar o valor em um tamanho razoável, pois está em float.
pratz9999

legal, com poucas mudanças eu fiz funcionar para converter fontes de ícones em drawables
SolidSnake

1
@ Ankur_009: O espaço do botão é limitado, é por isso que você não vê uma mudança no tamanho do texto. Portanto, se o seu texto já estiver ocupando todo o espaço do botão, aumentar o texto não terá efeito.
j3App

2
@ pratz9999 eu até configurei para 1000, mas ainda não mudou
Shivam Pokhriyal

30

FABs são geralmente usados ​​em CoordinatorLayouts. 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:

O resultado

Se você estiver usando algum layout_behaviorpara o seu FAB, você terá que fazer um semelhante layout_behaviorpara oTextView


1
Erro ao receber android.support.design.widget.FloatingActionButton não pode ser transmitido para android.view.ViewGroup
Ankur_009

1
Tem certeza de que seu FloatingActionButton está dentro do CoordinatorLayout?
lokeshrmitra

1
@ Ankur_009 esse erro android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupé provavelmente porque você colocou TextViewdentro do FAB. Verifique com OP onde a tag é fechada.
dumbfingers

A elevação do TextView também deve ser maior do que a do FAB, caso contrário, ele se esconderá atrás do FAB
Ali Nem

Excelente resposta !!
Sjd

18

Você não pode definir o texto para a FloatingActionButtonpartir da biblioteca de suporte, mas o que você pode fazer é criar uma imagem de texto diretamente do android studio: File -> New -> Image Assete, 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.


5
Texto como "OK", "SIM", "NÃO", "GO" se encaixa perfeitamente dentro do FAB ..........
MarsAndBack

Para palavras em FABs, consulte Extended Tabs: material.io/design/components/…
Mike Margulies

8

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>

insira a descrição da imagem aqui


2
Não há animação ondulada com essa solução
Vlad,

2

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 setTextBitmapestá uma extensão para ImageViewclasse com funcionalidade semelhante, mas suporta texto multilne

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

1

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>

0

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!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.