androidandroid-5.0-lollipopandroid-elevation

Using Elevation and Ripple in ImageButton


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.


Solution

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

    enter image description here