Android effect ripple circle imageView

Question

I'm trying to create an effect similar to what you see in the gif where there is play.

I do not know if you understand well but it seems a kind of ripple but done in a circular, such as the one on the videos of the app of youtube.

So I tried like this:

<LinearLayout
        android:id="@+id/play_pause_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@id/exo_play"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/background_item_selected"
            android:clickable="true"
            android:contentDescription="@string/play"
            android:focusable="true"
            android:src="@drawable/ic_play_36dp" />

        <ImageView
            android:id="@id/exo_pause"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/background_item_selected"
            android:clickable="true"
            android:contentDescription="@string/pause"
            android:focusable="true"
            android:src="@drawable/ic_pause_36dp" />

    </LinearLayout>

background_item_selected:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

But I can not get the desired effect.

Possible duplicate of [How to achieve ripple animation using support library?](https://stackoverflow.com/questions/26604134/how-to-achieve-ripple-animation-using-support-library) — Keivan Esbati, Sep 05 '18 at 23:56
that is feature on the android Lollipop, reference link of @Keivan Esbati — Chanh, Sep 06 '18 at 05:02
I've covered the effect, but I'm not sure the effect is a ripple on the image. — Paul, Sep 06 '18 at 14:53

score 1 · Answer 1 · answered Sep 06 '18 at 05:05

I think whats wrong here is the implementation, what your doing is giving the imageview the ripple effect, it should be the container linear layout. Your almost done. I guess what you have there will work. Use drawable if you want to change the color of the ripple. Also note that ripple will only work with version 21 and up so create a drawable-v21 and put a ripple version there.

<LinearLayout
    android:id="@+id/containerDone"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:padding="16dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_done_white_24dp"
        android:tint="@color/black" />

</LinearLayout>

I've covered the effect, but I'm not sure the effect is a ripple on the image. Then what should it contain: selectableItemBackground? — Paul, Sep 06 '18 at 14:52

Android effect ripple circle imageView

1 Answers1