Material Design Extended Floating Action Button has no ripple effect

Question

I am creating an Android app and I wanted to use extended floating action button so I added this code to my 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"/>

The button looks exactly how it is supposed to, except that it does not have ripple effect on click.

How can I add the ripple effect? I took the code straight from 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/) and the button still does not have ripple effect. So it does not seem to be a problem with my project setup.

I have also tried setting the app:rippleColor attribute, setting android:clickable="true" android:focusable="true" to no avail. Only thing that sort of worked was setting android:foreground="?attr/selectableItemBackground", but the ripple effect was masked to rectangle instead of the shape of the extended FAB. Also setting the foreground is not very good approach since it is only supported on API 23 and higher and I am targeting API 21.

@Ridcully my AppTheme extends Theme.MaterialComponents.Light.DarkActionBar — Martin Omacht, Jun 12 '20 at 14:32

score 1 · Accepted Answer · answered Jun 12 '20 at 14:33

1

You are supposed to use this attribute 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" />

answered Jun 12 '20 at 14:33

AgentP

6,261
2
31
52

1

I could swear I have tried this before and it did not work and now when I tried it it worked... oh well, thank you. – Martin Omacht Jun 12 '20 at 14:42
does not work when using custom background for it – Saman Sattari Nov 27 '20 at 22:33

score 1 · Answer 2 · answered Jun 12 '20 at 21:29

1

The default style of the ExtendedFloatingActionButton has a default rippleColor selector based on the colorOnSecondary. Check in your app theme this color.

In any case you can override the color using:

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

Or you can override the colorOnSecondary in your ExtendedFloatingActionButton using:

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

with:

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

Final note: use app:backgroundTint instead of android:backgroundTint.

answered Jun 12 '20 at 21:29

Gabriele Mariotti

320,139
94
887
841

Thanks for your insight. What is the difference between `app:backgroundTint` and `android:backgroundTint`? – Martin Omacht Jun 13 '20 at 22:05
Check https://stackoverflow.com/questions/29890654/appcompatbutton-backgroundtint-api-21/38355518#38355518 – Gabriele Mariotti Jun 14 '20 at 08:46
@MartinOmacht backward compatibility – Saman Sattari Nov 27 '20 at 21:41

Material Design Extended Floating Action Button has no ripple effect

2 Answers2