Thing you want to do

Implement ripple representation on images on Android

Way of thinking

Enclose the ImageView to which you want to apply the ripple representation with FragmentLayout Specify the foreground attribute for FragmentLayout so that you can tap FragmentLayout when you tap it. Specify the range and color to which the ripple expression is applied with the foreground attribute Foreground attribute refers to xml created separately By specifying the foreground attribute, FrameLayout becomes the top layer, so the tap event will be picked up by FragmentLayout.

Implementation

XML of the main screen of the app

`activity_main.xml`


    <FrameLayout
        android:id="@+id/image_view"
        android:layout_width="150dp" //Point 1: Make the size of FragmentLayout and ImageView the same
        android:layout_height="50dp"
        android:padding="0dp" //Point 2: Padding is set to 0dp so that the ripple area and ImageView exactly overlap.
        android:foreground="@drawable/btn_ripple"> //Point 5: Foreground refers to the file name of another xml file that defines "ripple area" and "color at the time of ripple".

        <ImageView
            android:id="@+id/image_view2"
            android:scaleType="fitXY" //Point 3: The aspect ratio is variable so that the size of FragmentLayout and ImageView are the same.
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_margin="0dp" //Point 4: Margin is set to 0dp so that the ripple area and ImageView exactly overlap.
            android:src="@drawable/long_circle" />
    </FrameLayout>

`btn_ripple.xml`


//Point 1: Make the file name the one specified by the above foreground attribute.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple2"> //Point 2: Specify the color at the time of ripple
    <item
        android:id="@android:id/mask" //Point 3: This is always a "mask". Even if "id"/Even if there is a place where "mask" is specified.
        android:drawable="@drawable/long_circle" /> //Point 4: Specify the ripple area. (Just refer to the ImageView itself you want to ripple
</ripple>