Material 设计扩展的浮动操作按钮没有波纹效果

Question

我正在创建一个 Android 应用程序，我想使用扩展的浮动操作按钮，所以我将这段代码添加到我的 activity:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/new_game_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_gravity="bottom|center"
        android:text="@string/main_new_game"
        android:backgroundTint="@color/colorAccent"
        app:icon="@drawable/ic_play_arrow_24px"/>

除了点击时没有连锁反应外，该按钮看起来完全符合预期。

如何添加涟漪效果？我直接从 https://material.io/develop/android/components/floating-action-button/#extended-fabs and it looks like the ripple should be there by default, but it does not work in my app. I have tried to create new project where I only set up the Material Components (https://material.io/develop/android/docs/getting-started/) 获取代码，但按钮仍然没有连锁反应。所以我的项目设置似乎没有问题。

我也试过设置app:rippleColor属性，设置android:clickable="true" android:focusable="true"都没有用。唯一可行的是设置 android:foreground="?attr/selectableItemBackground"，但涟漪效应被屏蔽为矩形而不是扩展 FAB 的形状。设置前景也不是很好的方法，因为它仅在 API 23 及更高版本上受支持，我的目标是 API 21.

Answer 1

你应该使用这个属性app:rippleColor

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/new_game_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_gravity="bottom|center"
        android:text="@string/main_new_game"
        android:backgroundTint="@color/colorAccent"
        app:icon="@drawable/ic_play_arrow_24px"
        app:rippleColor="@color/colorPrimary" />

Answer 2

ExtendedFloatingActionButton 的默认样式有一个 default rippleColor 选择器基于 colorOnSecondary. 签入您的应用主题这个颜色。

在任何情况下，您都可以使用以下方法覆盖颜色：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        app:rippleColor="@color/my_selector" />

或者您可以使用以下方法覆盖 ExtendedFloatingActionButton 中的 colorOnSecondary：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:theme="style/ExFabOverlay" />

与：

<style name="ExFabOverlay">
  <item name="colorOnSecondary">@color/my_color</item>
</style>

最后说明：使用 app:backgroundTint 而不是 android:backgroundTint。

Material 设计扩展的浮动操作按钮没有波纹效果

Material Design Extended Floating Action Button has no ripple effect

android

material-design

floating-action-button

material-components-android

ripple-effect