Using Elevation and Ripple in ImageButton

Question

I'm trying to set elevation and ripple effect at the same time on a ImageButton. I'm running LOLLIPOP.

Here is the code:

    <android.support.v7.widget.AppCompatImageButton
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="5dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            app:srcCompat="@drawable/add" />

My theme is: Theme.AppCompat.Light.DarkActionBar

With this code i'm only getting the ripple. If i remove the background (ripple), i get elevation.

EDITED:

Note: All screenshots were taken with the image being clicked (a long press).

I've tested with the android:background="?attr/selectableItemBackground" and i got a ripple and the background is a square, but no elevation:

with the android:background="?attr/selectableItemBackgroundBorderless" i got a ripple with circular background, but no elevation:

without the background attribute i got the elevation, and the default ImageButton background:

What i need is a circular ripple background and elevation at the same time.

You're using a borderless background. A borderless element will not have a shadow. That's why. — Budius, May 06 '16 at 18:25

score 1 · Answer 1 · answered May 06 '16 at 18:22

1

Like shadows, borderless ripples are projected onto the nearest parent surface -- which means they cannot cast shadows. Consider using a bordered ripple instead:

android:background="?attr/selectableItemBackground"

answered May 06 '16 at 18:22

alanv

23,966
4
93
80

Thank for your answer, please, give a look at the edited question. – jzeferino May 07 '16 at 21:01

score 0 · Accepted Answer · answered Aug 02 '21 at 17:03

Its been five years now but I revisited this and a solution is to use foreground instead of background:

    <ImageButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:elevation="5dp"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:src="@mipmap/ic_launcher"/>

Using Elevation and Ripple in ImageButton

2 Answers2