Android中如何将FAB（悬浮操作按钮）改为矩形并添加文字？

Alright, let's get your selector drawable applied to a Floating Action Button (FAB) that displays both an icon and text. I'll break this down into two straightforward approaches:

1. Use Material Design's Extended Floating Action Button (Recommended) #

The Extended FAB from the Material Components library natively supports both icons and text, so this is the simplest path.

Step 1: Ensure Material Dependency #

First, make sure you have the Material Components library added to your module-level build.gradle (or build.gradle.kts):

implementation 'com.google.android.material:material:1.9.0' // Use the latest version available

Step 2: Complete Your Selector Drawable #

First, let's finish your truncated selector (save this as res/drawable/fab_background.xml):

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <item>
        <ripple android:color="@color/white" tools:ignore="NewApi">
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="?android:colorAccent" />
                    <corners android:radius="20dp" /> <!-- Uniform rounded corners -->
                </shape>
            </item>
        </ripple>
    </item>
    <!-- Optional: Add a pressed state for pre-API 21 compatibility -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/darker_accent" /> <!-- A darker shade of your accent -->
            <corners android:radius="20dp" />
        </shape>
    </item>
</selector>

Step 3: Add Extended FAB to Your Layout #

Now apply the selector as the background, and set your icon and text:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/my_extended_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/fab_background" <!-- Apply your selector here -->
    android:text="Add Item"
    android:textColor="@color/white"
    app:icon="@drawable/ic_add" <!-- Your icon resource -->
    app:iconPadding="8dp"
    app:layout_anchor="@id/your_parent_layout"
    app:layout_anchorGravity="bottom|end"
    android:layout_margin="16dp" />

2. Custom FAB Layout (For Full Control) #

If you don't want to use the Extended FAB, you can create a custom layout that mimics a FAB with both icon and text.

Step 1: Create Custom FAB Layout #

Save this as res/layout/custom_fab.xml:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/fab_background" <!-- Apply your selector -->
    android:clickable="true"
    android:focusable="true">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingHorizontal="16dp"
        android:paddingVertical="12dp"
        android:gravity="center">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_add"
            android:tint="@color/white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Add"
            android:textColor="@color/white"
            android:layout_marginStart="8dp"
            android:textSize="16sp" />
    </LinearLayout>
</FrameLayout>

Step 2: Include Custom FAB in Your Main Layout #

Add it to your activity/fragment layout (using ConstraintLayout as an example):

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your other UI elements here -->

    <include
        layout="@layout/custom_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Quick Notes #

• The ripple effect works on API 21+. For older versions, the pressed state we added will handle the visual feedback.
• Adjust the corner radius, padding, and colors to match your app's design system.

内容的提问来源于stack exchange，提问作者Deepak Sharma