如何创建带含图标与图片的FAB的底部导航视图？

一、核心布局搭建 #

使用CoordinatorLayout实现FAB悬浮在底部导航上方的效果，主布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <!-- 主内容容器，用于承载Fragment或其他页面内容 -->
    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"/>

    <!-- 底部导航栏 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu"/>

    <!-- 自定义FAB，通过anchor绑定到底部导航栏实现居中悬浮 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/custom_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        app:layout_anchor="@id/bottom_nav"
        app:layout_anchorGravity="center|top"
        app:fabSize="normal"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、创建FAB的复合内容布局 #

要实现“图片+图标”的叠加效果，需自定义布局作为FAB内容。创建res/layout/fab_custom_content.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- FAB背景图片，可按需调整尺寸和scaleType -->
    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/fab_background_img"
        android:scaleType="centerCrop"/>

    <!-- 叠加在图片上的图标，居中显示，可调整tint颜色适配图片 -->
    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_add_icon"
        android:tint="@android:color/white"/>

</RelativeLayout>

三、绑定自定义布局到FAB #

在Activity或Fragment中，通过代码将自定义布局设置为FAB的内容：

Kotlin代码 #

val customFab = findViewById<FloatingActionButton>(R.id.custom_fab)
val fabContentView = LayoutInflater.from(this).inflate(R.layout.fab_custom_content, null)
customFab.customView = fabContentView

// 添加点击事件
customFab.setOnClickListener {
    // 此处处理FAB点击逻辑
}

Java代码 #

FloatingActionButton customFab = findViewById(R.id.custom_fab);
View fabContentView = LayoutInflater.from(this).inflate(R.layout.fab_custom_content, null);
customFab.setCustomView(fabContentView);

// 添加点击事件
customFab.setOnClickListener(v -> {
    // 此处处理FAB点击逻辑
});

四、配置底部导航菜单 #

为让FAB刚好悬浮在底部导航中间，需在菜单中添加禁用的占位项。创建res/menu/bottom_nav_menu.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="首页"/>
    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"/>
    <!-- 中间占位项，禁用以避免交互冲突 -->
    <item
        android:id="@+id/nav_placeholder"
        android:title=""
        android:enabled="false"/>
    <item
        android:id="@+id/nav_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="通知"/>
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_profile"
        android:title="我的"/>
</menu>

五、样式微调（可选） #

如需调整FAB阴影、圆角等样式，可在布局中添加以下属性：

• app:elevation="8dp"：调整阴影高度
• app:shapeAppearanceOverlay="@style/FabShape"：自定义圆角，需在styles.xml中定义对应样式

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