Search code examples
androidmaterial-designfloating-action-buttonmaterial-components-androidripple-effect

Material Design Extended Floating Action Button has no ripple effect


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.


Solution

  • 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" />