Implementing Ripple effect outside ImageButton

Chaitanya Pimparkar picture Chaitanya Pimparkar · Dec 10, 2014 · Viewed 20.8k times · Source

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="@drawable/myimagepath"

Its giving nice ripple effect inside button Layout. But I want Ripple effect to extend outside the Button Layout also.Another way to do it is using :

 android:background="?android:attr/selectableItemBackgroundBorderless"

But it uses default color and style. How can I customize it regarding color, shape and it's size ?

Answer

Travis Castillo picture Travis Castillo · May 4, 2015

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

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

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.