Android imagebutton ripple effect

Question

Okay, so I understood ripple effect is only available LOLLIPOP and up. But, still, when setting up my ImageButton, I fail to get a nice ripple effect that would work like a "regular" Button, just show an image instead (and transparent bg)...

I added AppCompat v7 and put the second layout in my drawable/layout-v21 folder, which has the following button in it:

<ImageButton
    android:id="@+id/forward"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:width="15dp"
    android:scaleType="fitCenter"
    android:height="15dp"
    android:padding="25dp"
    style="@style/Widget.AppCompat.ImageButton"
    android:src="@drawable/forwardplay" />

But the background is grey and the ripple (grey too) cannot be customised.

So, if I would only have a nice ripple drawable to put in my drawable-v21 that would be great, and I could reference it from the background property of the ImageButton. The thing is I cannot find the original android Ripple effect (I have a Samsung S6 phone, is it Samsung's theme ?)

Would love if anyone could share their working drawable.

Thanks!

Try this one: `android:background="?attr/selectableItemBackgroundBorderless"` — Satan Pandeya, Dec 15 '16 at 14:03
No. that crashes the app. compiling for SDK 23 (got v25 already - tried both...) — rubmz, Dec 15 '16 at 14:05

score 16 · Answer 1 · edited Dec 16 '16 at 07:23

16

Try this, definitely it should work:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/YOUR_BUTTON_SOURCE"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

edited Dec 16 '16 at 07:23

Satan Pandeya

3,747
4
27
53

answered Dec 16 '16 at 05:48

EED

208
2
9

1

`android:foreground="?attr/selectableItemBackgroundBorderless"` works just as well, should you already ***have a different background***. – Panos Gr Aug 23 '19 at 08:28
3

`android:foreground=` works only API 23+. If you are using background as transparent just use `android:background="?attr/selectableItemBackgroundBorderless"` it will make background transparent and gives nice ripple effect. – Husnain Qasim Feb 02 '20 at 20:50

score 2 · Answer 2 · answered Dec 15 '16 at 14:02

You can make drawable and set background to your Button.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

change the color of your specification.

No. Tried that one it looks like a little dot that does not grow. — rubmz, Dec 15 '16 at 14:04

score 2 · Answer 3 · edited May 23 '17 at 12:26

After trying the following answer:

<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#ffffff"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/mask"
          android:drawable="@android:color/white" />
</ripple>

I have found a piece of mind :) Works like a charm!

To summarize:

put your layout in layout-v21 to support newer device (and keep a copy for older devices in the regular drawable/layout folder.
create a drawable-v21 folder and put the text above in a file named ripple.xml

set it as background like so:

<ImageButton
    android:id="@+id/forward"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:width="15dp"
    android:scaleType="fitCenter"
    android:height="15dp"
    android:padding="25dp"
    android:background="@drawable/ripple_bg"
    android:src="@drawable/forwardplay" />

score 2 · Answer 4 · answered Dec 15 '16 at 14:06

…is it Samsung's theme?

It very well could be, but in any case I have used the following methods to achieve this effect.

It depends on the look that you are going for. If you are using an icon similar to something you would see in the Action Bar, you might want to use the actionButtonStyle:

style="?attr/actionButtonStyle"

There are also a few other button style attribtes you can choose from that may or may not include a ripple effect.

Otherwise, if you are using an actual image as a button, you could use the selectableItemBackground or selectableItemBackgroundBorderless attribute as a foreground:

android:foreground="?attr/selectableItemBackground"

score 0 · Answer 5 · answered Dec 15 '16 at 13:59

0

Try using

android:background="?selectableItemBackground"

answered Dec 15 '16 at 13:59

Vishwajit Palankar

3,033
3
28
48

No, that looks kind of bad with gray background. – rubmz Dec 15 '16 at 13:59

score 0 · Answer 6 · answered Sep 11 '20 at 11:16

0

Try using

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

answered Sep 11 '20 at 11:16

Alexey

9
1

Android imagebutton ripple effect

6 Answers6