Setting the FloatingActionButton ripple

Question

Im trying to set the FloatingActionButton ripple to something similar to this

From Material design.

The problem is that I only get a "Flat style" where there is no ripple, it just changes the button from, in my case, white to orange without the animation shown in the link above.

I have followed the answer here:

FloatingActionButton example with Support Library

but my FAB still is boring!

EDIT: My current code is: XML:

  <android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_width="64dp"
     android:layout_height="64dp"
     android:layout_marginRight="16dp"
     android:src="@drawable/watch"
     app:borderWidth="0dp"
     app:elevation="6dp"
     app:fabSize="normal"
     app:layout_anchor="@id/item_activity_title_background"
     app:layout_anchorGravity="top|right|end"
     app:pressedTranslationZ="12dp"
     app:rippleColor="@android:color/transparent"/>

Java:

    mAddToWatchListFAB.setRippleColor(ContextCompat.getColor(this, R.color.orange_6));

I tried that method on the FAB but it didn't seem to work. I also tried the steps in the link I provided

I think this has to do with it being a pre lollipop device im testing it on. I loaded Genymotion and ran marshmellow and the ripple works there. I see something about it not being fully implemented — x10sion, Apr 14 '16 at 10:07
ok. I assumed you were using at least marshmallow as you were attempting to use a Ripple which was introduced in that version. — Kuffs, Apr 14 '16 at 10:09
is there no way by using AppCompat or something to introduce the ripple from greater than 16 — x10sion, Apr 14 '16 at 10:10
try Search. I found this http://stackoverflow.com/questions/30760822/how-to-create-ripple-effect-for-pre-lollipop — Kuffs, Apr 14 '16 at 10:16

score 47 · Answer 1 · answered Jul 20 '17 at 10:55

47

add following 2 properties to your floating action button xml code

 app:rippleColor="@color/textcolor"
 android:clickable="true"

making FAB clickable adds ripple color

answered Jul 20 '17 at 10:55

Muhammad Usman

628
6
18

Thanks man you saved my hours, that's what i was looking for. – Sanjeev Kumar Nov 07 '17 at 10:20
6

You should also set the `android:focusable="true"` attribute – Simon Nov 20 '17 at 14:32
2

Who would have thought that the button's default clickable attribute would be false? – user1608385 Aug 06 '20 at 18:22
@user1608385 typical android stuff... – DIRTY DAVE May 20 '21 at 15:24

score 4 · Answer 2 · edited May 23 '17 at 12:32

You can implement it as in the way said my Gabriele Mariotti

You can do something like this:

<Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/ripple"

    />

Where the ripple.xml is:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                      android:color="?android:colorControlHighlight">
        <item android:id="@android:id/mask">
            <shape android:shape="oval">
                <solid android:color="?android:colorAccent" />
            </shape>
        </item>
 </ripple>

as said in here which can apply for all ripple needs.

UPDATE

<android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_width="64dp"
     android:layout_height="64dp"
     android:layout_marginRight="16dp"
     android:src="@drawable/watch"
     android:background="@drawable/ripple"
     app:borderWidth="0dp"
     app:elevation="6dp"
     app:fabSize="normal"
     app:layout_anchor="@id/item_activity_title_background"
     app:layout_anchorGravity="top|right|end"
     app:pressedTranslationZ="12dp"/>

And use the above ripple.xml. So simple! All you need to do is to mask :)

UPDATE 2

For API 20 and less, There are options to implement ripple effect. Check out the following tips said by Marcin Orlowski

Luckily there are few custom implementations already available:

including Materlial themed widget sets compatible with older versions of Android:

https://github.com/keithellis/MaterialWidget

so you can try one of these or google for other "material widgets" or so...

My current min is 16, this doesnt work as the answer u posted is for 21 min. EG requires 21 — x10sion, Apr 14 '16 at 10:08
The last one is for API 7 or less.. You should try first one — Sibidharan, Apr 14 '16 at 13:21

score 2 · Answer 3 · answered Mar 18 '17 at 00:14

Instead of using transparent, try using:

app:rippleColor="@color/colorAccentLight"

where colorAccentLight is a brighter accent of your current accent color. In my case, I used:

<color name="colorAccent">#E040FB</color>
<color name="colorAccentLight">#E1BEE7</color>

in the colors.xml file... Or, you could always set it to some other random color (other than your current accent color) for testing purposes.

score 1 · Answer 4 · answered Nov 12 '17 at 18:37

1

    <!--change this to any color-->
    app:rippleColor="@android:color/transparent"

    <!-- try this line instead above -->
    app:rippleColor="@color/colorPrimary"
    android:clickable="true"

answered Nov 12 '17 at 18:37

user3607151

19
1
2

score 0 · Answer 5 · edited May 23 '17 at 12:17

0

Your ripple colour is transparent. I expect your ripple is showing normally but as it is invisible, you cannot see it.

See this answer for a solution.

Android: can you have a ripple effect whose default state color is transparent?

edited May 23 '17 at 12:17

Community

1
1

answered Apr 14 '16 at 10:03

Kuffs

34,562
10
74
91

Setting the FloatingActionButton ripple

5 Answers5