Let’s start with the renderings

Use of Ripple (V21 + required)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/dark_blue">
    <item android:drawable="@color/blue"/>
</ripple>
Copy the code

The color of item is the background color of the normal state of the control, and the color of Ripple is the color that appears when clicked (which is shown in translucent form). The ripple color change effect is softer than the selector effect, appearing as a gradient.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/dark_blue">
    <item android:id="@android:id/mask" android:drawable="@drawable/ic_launcher_foreground"/>
</ripple>
Copy the code

Mask’s role: only in the specified range of water wave animation, the boundary of the range is specified by the mask object (you can change some image resources smaller than the original background, you can see the effect).

Simply set the Ripple file to the background color of the control. For controls that do not set click events, there is no change effect. Need to set android: Clickable =”true” for the control

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_item_tv"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:clickable="true"
    android:background="@drawable/item_blue_selector"
    android:gravity="center"
    android:textSize="17sp" />
Copy the code

For younger versions, I’m going to choose selector as the adaptation. As of now, version 21 and above is available on 90% of devices.

Foreground set

The current water ripple effect can only be seen when the finger is raised, which doesn’t meet the needs of some projects.

In addition to setting background, you can also set foreground in the control.

android:foreground="? attr/selectableItemBackgroundBorderless"
Copy the code

Add this sentence to the control to see what you want. SelectableItemBackgroundBorderless is system provided a translucent gray water wave effect, while holding down the control, can display. (If you don’t want a pre-blue effect, set a solid blue background.)

I have a pot of wine to soothe the dust. Pour into the river and sea, give drink people all over the world.

  • GitHub