如何在Floating Action Button上方添加信息提示框 附现有布局代码

1. 调整布局结构 #

首先确认你的根布局是CoordinatorLayout，这是使用layout_anchor锚定属性的前提。我们新增一个自定义的提示框布局，直接锚定在FAB的顶部即可，修改后的完整布局代码如下：

<!-- 根布局必须为CoordinatorLayout -->
<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">

    <!-- 你的原有页面内容布局放在这里 -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.Fab_Bottom_app_bar"
        app:hideOnScroll="true"
        android:layout_gravity="bottom"
        app:fabCradleMargin="15dp"
        app:fabCradleRoundedCornerRadius="60dp"
        app:layout_scrollFlags="scroll|enterAlways"
        app:fabCradleVerticalOffset="10dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:theme="@style/Theme.Fab_Bottom_app_bar"
            android:background="@drawable/dropbutton"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        app:backgroundTint="#2770DC"
        app:tint="#fff"
        android:src="@drawable/icon_add"
        app:layout_anchor="@id/bottomAppBar" />

    <!-- 新增FAB上方提示框 -->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/fabHintCard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp"
        app:cardElevation="4dp"
        app:layout_anchor="@id/fab"
        app:layout_anchorGravity="top|center_horizontal">

        <TextView
            android:id="@+id/fabHintText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingHorizontal="12dp"
            android:paddingVertical="8dp"
            android:text="点击添加内容"
            android:textColor="@android:color/black"
            android:textSize="14sp" />

    </com.google.android.material.card.MaterialCardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 增加显示/隐藏逻辑 #

你可以根据需要在合适的时机触发提示框显示，比如首次进入页面时展示，3秒后自动隐藏，也可以点击提示框或者FAB时关闭：

// 显示提示框
fabHintCard.apply {
    visibility = View.VISIBLE
    // 可选：添加弹出动画
    alpha = 0f
    translationY = 20f
    animate().alpha(1f).translationY(0f).setDuration(300).start()
}

// 3秒后自动隐藏
Handler(Looper.getMainLooper()).postDelayed({
    fabHintCard.animate().alpha(0f).translationY(20f).setDuration(300).withEndAction {
        fabHintCard.visibility = View.GONE
    }.start()
}, 3000)

// 点击FAB时隐藏提示框
fab.setOnClickListener {
    if (fabHintCard.visibility == View.VISIBLE) {
        fabHintCard.animate().alpha(0f).translationY(20f).setDuration(300).withEndAction {
            fabHintCard.visibility = View.GONE
        }.start()
    }
    // 原有FAB点击逻辑
}

可选简化方案 #

如果不需要高度自定义的提示框样式，可以直接使用Material Components提供的Snackbar，指定锚点为FAB即可自动定位在FAB上方，无需额外添加布局：

Snackbar.make(fab, "点击添加内容", Snackbar.LENGTH_LONG)
    .setAnchorView(fab) 
    .show()

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