CODEWITHSUNDEEP
androidfloating-action-button
andreasj93
andreasj93

Reputation: 33

No ripple on second floating action button in same layout

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?

Upvotes: 2

Views: 3534

Answers (2)

Bala Bhaskar
Bala Bhaskar

Reputation: 99

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

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

Upvotes: 5

J3D1
J3D1

Reputation: 759

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.

Upvotes: 1

Related Questions