Android开发：实现带图标和文字的圆形ExtendedFloatingActionButton

你遇到的问题本质是ExtendedFloatingActionButton的设计定位就是扩展式矩形按钮，强行修改背景为圆形会导致内部布局逻辑冲突，下面提供两种符合Android开发最佳实践的解决方案：

方案一：自定义内容的普通FloatingActionButton（推荐，灵活度高） #

利用FloatingActionButton的customContentView属性，直接嵌套自定义布局实现图标+文字的垂直排列，天然支持圆形样式。

步骤1：创建自定义内容布局（layout/fab_icon_text.xml） #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="8dp">

    <!-- 图标 -->
    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_back"
        android:tint="@android:color/white"/>

    <!-- 文字 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:layout_marginTop="4dp"/>
</LinearLayout>

步骤2：布局中使用自定义FAB #

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:backgroundTint="@color/your_fab_background_color"
    app:customContentView="@layout/fab_icon_text"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

方案二：修改ExtendedFloatingActionButton样式实现圆形 #

通过设置形状外观强制将ExtendedFAB改为圆形，同时调整内部布局参数适配内容：

步骤1：定义圆形形状样式（values/styles.xml） #

<style name="CircleFabShape" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

步骤2：布局中使用配置后的ExtendedFAB #

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:text="Test"
    android:textSize="12sp"
    app:icon="@drawable/ic_back"
    app:iconGravity="top"
    app:iconPadding="2dp"
    app:shapeAppearance="@style/CircleFabShape"
    app:backgroundTint="@color/your_fab_background_color"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

最佳实践提示 #

• 保持文字简洁，避免过长导致内容溢出圆形边界
• 确保图标、文字与FAB背景色有足够对比度（遵循Material Design对比度规范）
• 如需调整FAB大小，可通过app:fabSize（普通FAB）或直接设置固定宽高（两种方案通用）
• 两种方案均自带Material Design的涟漪点击效果，无需额外配置

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