No ripple on second floating action button in same layout

Question

I have two floating action buttons in one layout file, but only the last one gets the ripple effect applied. If I place them opposite, then it's also the last one getting the ripple. So no matter how they are placed in the layout file, the last one gets a ripple effect on touch and the other does not. How can this be? Are there any solution to getting the ripple effect on both FABs?

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_report"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_fab_run"
    android:elevation="8dp"
    app:backgroundTint="@color/primary"
    app:rippleColor="@color/blue" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_run"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_fab_run"
    android:elevation="8dp"
    app:backgroundTint="@color/primary"
    app:rippleColor="@color/blue" />

TL;DR: Only the last one FAB in the layout gets the ripple effect, how to solve this?

This could be helpful http://stackoverflow.com/questions/24863430/android-ls-ripple-effect-touch-feedback-for-buttons-using-xml — alx.r89, Jul 18 '15 at 12:13
It seems like the first FAB is not even clickable. Nothing happens on touch. — andreasj93, Jul 20 '15 at 12:07

score 5 · Answer 1 · edited Jun 26 '16 at 20:06

5

I don't know the reason, but adding this attribute solved the problem:

app:theme="@style/Base.Widget.AppCompat.ImageButton"

edited Jun 26 '16 at 20:06

Undo

25,519
37
106
129

answered Apr 26 '16 at 11:25

Bala Bhaskar

99
1
5

score 1 · Answer 2 · answered Jun 26 '16 at 16:47

1

I had a similar issue - turns out I was implementing a TouchListener for one FAB, and consuming the touch event by returning true from the listener callback. Once I changed this to return false, the FAB ripple effect started working again.

answered Jun 26 '16 at 16:47

J3D1

759
6
10

No ripple on second floating action button in same layout

2 Answers2