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.

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