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

Answer 1

add following 2 properties to your floating action button xml code

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

making FAB clickable adds ripple color

Answer 2

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:

• https://github.com/traex/RippleEffect
• https://github.com/balysv/material-ripple
• https://github.com/siriscac/RippleView
• https://github.com/ozodrukh/RippleDrawable

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...

Answer 3

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.

Answer 4

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

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