如何让FAB的涟漪效果显示在Src图片上方

你遇到的问题本质是FAB默认的涟漪效果绘制层级在src资源下方，当你把maxImageSize设置为覆盖整个FAB的尺寸后，上层的src图片完全遮挡住了下层的涟漪，导致点击交互效果不可见。

解决方案 #

• 方案一：添加前景点击效果（改造成本最低）
  直接在你的FAB布局中添加两个属性即可，前景选择器的绘制层级高于src资源，点击效果会直接显示在图片上方：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:maxImageSize="@dimen/_130sdp"
    android:layout_gravity="center|bottom"
    android:contentDescription="@string/app_name"
    app:srcCompat="@drawable/ic_radial_gradient"
    app:backgroundTint="@color/white"
    app:elevation="0dp"
    app:layout_anchor="@id/bottomAppBar"
    app:tint="@null"
    <!-- 新增的两个属性 -->
    android:foreground="?attr/selectableItemBackgroundBorderless"
    app:rippleColor="#33000000" />

注：rippleColor可以根据你的图片颜色自定义透明度和色值，保证效果明显的同时不会遮挡图片本身

• 方案二：调整资源放置位置
  把你当前的渐变图从srcCompat移动到background属性，同时取消背景着色，这样涟漪效果会默认显示在背景之上：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center|bottom"
    android:contentDescription="@string/app_name"
    android:background="@drawable/ic_radial_gradient"
    app:backgroundTint="@null"
    app:elevation="0dp"
    app:layout_anchor="@id/bottomAppBar" />

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