FloatingActionButton with text instead of image

Question

I'm trying to figure out how you can modify a FloatingActionButton from the Android support library. Can it be used with text instead of an image?

Something like that:

I see that it extends ImageButton, so I don't think so. I'm right?

Is this right in terms of material design?

Answer 1

With API 28, you can simply add text to Fabs using:

Visit: 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

Thanks to everyone.

Here is a simple way that I found for this question. It works correctly for Android 4+; for Android 5+, a special android parameter has been added: elevation for drawing a TextView over a 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

convert text to bitmap and use it. It is super easy.

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

Answer 4

FABs are commonly used in CoordinatorLayout s. You can use this:

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

That's what the job does

 app:layout_anchor="@id/fab" app:layout_anchorGravity="center" 

Result:

If you use some kind of layout_behavior for your FAB, you need to do a similar layout_behavior for TextView

Answer 5

You cannot set the text for the FloatingActionButton from the support library, but what you can do is create a text image directly from android studio: File -> New -> Image Asset , and then use it for your button.

In terms of materials construction ; they don’t mention using text with a FloatingActionButton , and I don’t see a reason for this, since you really have no place for text.

Answer 6

I needed text in FAB, but instead I just selected a TextView with a round painted background:

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

Here is the picture (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 7

@ NandanKumarSingh's answer https://stackoverflow.com/a/16626832/116278 works, but I made some changes in the fab code (not in xml, because they will be overwritten in class methods)

 fab.setTextBitmap("ANDROID", 100f, Color.WHITE) fab.scaleType = ImageView.ScaleType.CENTER fab.adjustViewBounds = false 

Where setTextBitmap is an extension for the ImageView class with similar functionality, but it supports multi-channel text

 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 8

A very small modification for a friend to say that they support the Android API below 21, just add app:elevation="0dp" in the FloatingActionButton

It can help others!