Implementing Ripple Effect Outside Imagebutton

I am trying to implement ripple effect for ImageButton.I have set ripple in background and drawable image in the src for it. android:background='@drawable/myripplexml' android:src

Solution 1:

I ran into this and my issue is that 'selectableItemBackgroundBorderless' creates a rectangle, while my button was circular. I'm not sure if this answers the original question but here is what I found: set the background to this in drawable-v21

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

and @null in lower api levels (assuming you're using a selector for the actual image button src). The ripple most visible in the padding of the button. If there's no masking layer at all The ripple is unbound and kind of takes over the whole screen. You can use whatever shape you want if not a circle.

Solution 2:

If you are lazy like me, make use of the default ripple and forget about backward compatibility. Basically there are two types of background ripple u can add to ur views:

 ?android:selectableItemBackground // Ripple withinview
 ?android:selectableItemBackgroundBorderless //Ripple outside view

Unfortunately,these ripples are always grey in color. To tweak these based on your theme, go to ur parent theme and change the colorControlHighlight.

In your app's main theme:

<itemname="colorControlHighlight">#1bff3a</item>

This value will change the colour of the default ripple.

Note: On devices below 21, the ripple will turn into notmal selectors with the same color you have set.

Solution 3:

Just like @alan mentioned in his comment. If you create a ripple item with no mask and child items and add it as a views background, the ripple will be drawn on top of the first available parent and may extend the views bounds. This is mentioned in the doc

<!-- An unbounded red ripple. --/>
<ripple android:color="#ffff0000" />