ImageView selectableItemBackgroundBorderless does not render outside of view bounds

Question

I am using selectableItemBackgroundBorderless to add a ripple to an ImageView. My expected behaviour would be to have a circular ripple, extending the

Answer 1

You can use library https://github.com/hdodenhof/CircleImageView for this issue.

Create the circular Imageview with the above library and it will be having the ripple effect as you expected.

Answer 2

If you have a clickable ImageView, then most possibly it should be an ImageButton instead.

Having defined following ImageButton:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    app:srcCompat="@drawable/ic_navigation_black_24dp" />

Then you'll get following output:

If you want bigger ripple effect, you have to change view's size: instead of wrap_content make it, let's say, 100dp:

Answer 3

do layerlist drawable xml make the first item shape circle then add item selectableItemBackgroundBorderless and it will work fine

Answer 4

One thing is your limiting the height of the ImageView by 46dp add padding to ImageView instead of Parent layout

Answer 5

Define ripple_effect_circle.xml in drawable

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#BDBDBD"
    >

    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <size
                android:width="60dp"
                android:height="60dp"/>
            <solid android:color="#BDBDBD" />
        </shape>
    </item>

</ripple>

Define ImageView in layout

    <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_margin="60dp"
            android:src="@drawable/ripple_effect_circle"
            android:background="@drawable/your_round_image"
            />

Answer 6

Just change from using ImageView's foreground to background: android:background="?selectableItemBackgroundBorderless". Then you should see the ripple render outside of the view bounds.