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!

Duvall

Try this one: android:background="?attr/selectableItemBackgroundBorderless" – Millar

No. that crashes the app. compiling for SDK 23 (got v25 already - tried both...) – Duvall

Answer 1

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

Feminize

android:foreground="?attr/selectableItemBackgroundBorderless" works just as well, should you already have a different background. – Jazminejazz

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

Answer 2

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:

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

3. 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" />
   

Duvall

Answer 3

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.

Deodand

No. Tried that one it looks like a little dot that does not grow. – Duvall

Answer 4

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

Haemophilic

Answer 5

Try using

android:background="?selectableItemBackground"

Candidate

No, that looks kind of bad with gray background. – Duvall

Answer 6

Try using

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

Jolt