CODEWITHSUNDEEP
androidandroid-5.0-lollipoprippledrawable
rubmz
rubmz

Reputation: 2029

Android imagebutton ripple effect

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!

Upvotes: 5

Views: 11048

Answers (6)

Alexey
Alexey

Reputation: 9

Try using

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

Upvotes: 0

EED
EED

Reputation: 218

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

Upvotes: 17

rubmz
rubmz

Reputation: 2029

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

Upvotes: 2

Bryan
Bryan

Reputation: 15135

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

Upvotes: 2

Harshad Pansuriya
Harshad Pansuriya

Reputation: 20910

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.

Upvotes: 2

Vishwajit Palankar
Vishwajit Palankar

Reputation: 3083

Try using

android:background="?selectableItemBackground"

Upvotes: 0

Related Questions