FloatingActionButton với văn bản thay vì hình ảnh

Tôi đang cố gắng tìm cách sửa đổi FloatingActionButton từ thư viện hỗ trợ android. Nó có thể được sử dụng với văn bản thay vì hình ảnh?

Một cái gì đó như thế này:

Tôi thấy nó mở rộng ImageButton nên tôi nghĩ là không. Tôi nói đúng chứ?

Điều này có đúng về thiết kế Material Design nói chung không?

Với API 28, bạn có thể chỉ cần thêm văn bản vào Fabs bằng cách sử dụng:

Truy cập: 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"/>

Cảm ơn tất cả.

Đây là cách giải quyết dễ dàng mà tôi tìm thấy cho câu hỏi này. Hoạt động chính xác cho Android 4+, cho Android 5+ được thêm thông số cụ thể android: elevation để vẽ TextView trên 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>

chuyển đổi một văn bản thành bitmap và sử dụng nó. nó siêu dễ dàng.

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

FAB thường được sử dụng trong CoordinatorLayouts. Bạn có thể sử dụng cái này:

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

Đây là những gì hoạt động

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

Kết quả:

Nếu bạn đang sử dụng một số layout_behaviorcho FAB của mình, bạn sẽ phải tạo một cái tương tự layout_behaviorchoTextView

Bạn không thể đặt văn bản FloatingActionButtontừ thư viện hỗ trợ, nhưng những gì bạn có thể làm là tạo một hình ảnh văn bản trực tiếp từ android studio: File -> New -> Image Assetvà sau đó sử dụng nó cho nút của bạn.

Về thiết kế vật liệu ; họ đã không đề cập đến việc sử dụng văn bản với FloatingActionButtonvà tôi không thấy lý do gì để làm điều đó vì bạn thực sự không có nhiều không gian cho văn bản.

Tôi đang cần văn bản trong FAB nhưng thay vào đó tôi chỉ sử dụng TextView với nền hình tròn có thể vẽ:

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

Đây là phần có thể vẽ (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>

Câu trả lời của @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 hoạt động nhưng tôi đã thực hiện một số thay đổi với fab trong mã (không phải xml vì chúng sẽ bị ghi đè trong các phương thức lớp)

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

Đâu setTextBitmaplà phần mở rộng cho ImageViewlớp có chức năng tương tự nhưng nó hỗ trợ nhiều văn bản

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

Một chút sửa đổi đối với câu trả lời của đồng chí để hỗ trợ nó cho Android API bên dưới 21 chỉ cần thêm app:elevation="0dp"vàoFloatingActionButton

Điều này có thể giúp những người khác!

Tôi đã sử dụng CardView để đạt được kết quả tương tự

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