Implementing Ripple effect outside ImageButton

Question

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 ?

Hildagarde

didnt get you, what do you wanna do actually ? – Alit

@MurtazaHussain I want similar effect like selectableItemBackground BorderLess but with differrnt color. – Hildagarde

create drawable with no border. – Alit

It will not do. selectableItemBackgroundBorderless is used for a ripple that extends beyond the view. Source: developer.android.com/training/material/animations.html – Hildagarde

You can create a borderless ripple by simply not adding child elements to your <ripple> element. There is an example in the RippleDrawable documentation. – Yawmeter

@ChaitanyaPimparkar using ripple effect on button changes the button hides the button and clicking on the button show the ripple effect and black button become white. can you please tell what is i am doing wrong? – Adolescent

Answer 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

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

Selwin

It seems it's not borderless. It appears as an eclipse shape for me. It's inside the view's border – Protestant

It may do that if you have margins set for the view – Selwin

Answer 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 within view
 ?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:

<item name="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.

Northumbrian

You mention 2 types of background ripples but you list 2 with the same name? – Saharan

How do those work? Is there a better way to customize them (size and colors) ? – Jaquez

@androiddeveloper we can only change the colours of these ripples. I couldn't find any size attribute that can be customised. – Northumbrian

@Northumbrian Any way to copy its code? Maybe there, there is the size of the drawable... – Jaquez

@androiddeveloper you can try a custom ripple guides.codepath.com/android/ripple-animation – Northumbrian

@Northumbrian I mean one that is the same as here, showing outside of the view somehow. – Jaquez

@androiddeveloper not able to visualise your issue – Northumbrian

@Northumbrian Why not? It's a part of your answer "//Ripple outside view" . The ripple goes to be shown outside of the view. This also occurs on the Dialer app of Android. I just want to customize its size and color. Seems a bit too large to me. – Jaquez

Answer 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" />

Piave

This works! You might also want to set android:radius on the ripple. – Restrained