Android Add click Ripple Effect to controls

Android has added a ripple effect to the button by default in version 5.0, and it can be easily implemented on other controls. Ripple effects can be divided into two types, one with the boundary ripples, the other with no boundary ripples. The so-called boundary, that is, the effect of ripples will not exceed the size of the control, another borderless effect, the ripples will continue to spread after crossing the bounds of the control, and then gradually disappear.

To achieve the ripple effect, we only need to set it on the Android:backgroud property of the control. The two effects are set as follows:

Ripple effect with border:

android:background="? Android:attr/selectableitembackground"

No boundary ripple Effect:

android:background="? android:attr/selectableitembackgroundborderless"

In addition to the above settings, remember to set the control as clickable

android:clickable="true"

If the control already uses the Android:background property to set the background color or background image, there is a ripple effect when you want to have a click. Then we can consider setting the ripple effect in the Android:foreground attribute so that it can also ripple when clicked, and does not affect our settings for the background of the control. However, for controls that cannot be clicked by default, also remember to set android:clickable to true. Also note that if the Android version is too low, the borderless ripple effect may not be very well presented.

In addition to using the above method to set the ripple effect, we can also consider customizing the ripple effect, such as customizing the color of the ripples, customizing the boundaries of the ripples and so on, making the UI more informative.

To customize the ripple effect, use the ripple. We can use the ripple tag in XML to set the effect of ripples:

1) Customize the color of the ripples:

Create an XML file Custom_bg.xml with the following content:

<ripple xmlns:android= "http://schemas.android.com/apk/res/android" android:color= "#000000" >
</ripple>

This specifies that the color of the ripples is #000000, that is, black. When you use the XML file as a background, the color of the ripples changes to black when you click the control.

That is, the color we specify in the colour of the ripple tag is the color of the ripples.

2) Customize the boundaries of the ripples:

Suppose we want the boundary of the ripples to be an ellipse, to modify the Custom_bg.xml file above, we just need to add an item tag in the ripple tag, and then set the shape size of the boundary in the Item tab. The settings in item are similar to the actions we normally set for the shape size of drawable:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color= " #000000 ">    <item >        <shape android:shape="Oval">            < Solid android:color="#ffffff"/>        </shape>    </item></ Ripple>

An oval (ellipse) is specified in the item label, and its color is white and the size does not exceed the control (and the control is tangent to the edges). When we set the XML as the control background, a white ellipse appears on top of the control, and when we click it creates a gradually diffused black ripple on the ellipse, which slowly spreads away, but does not extend beyond the bounds of the ellipse.

Although the ripples have boundaries, this is not the effect we want, we just want to specify the bounds of an ellipse for the ripples, but don't want the white ellipse to appear on the control. So if we get rid of the inside,

<solid android:color= "#ffffff"/>

Is this the right line for you? The answer is no. When we do not fill the ellipse with color, there is no ripple effect. The reason is that if you do not set a color for the ellipse, the ellipse will default to no size, so the ripple will be displayed in zero. To set the boundary of a ripple only, without affecting the display of the control, you can set the ID for the item tag to @android:id/mask. As follows:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color= " #000000 ">    <item android:id="@android: Id/mask">        <shape android: Shape="Oval">            <solid android:color="#ffffff "/>        </shape>    </item></ripple>

After this setting, it is equivalent to setting an ellipse mask, after clicking on the control, the boundary of the ripple diffusion is an ellipse.

3) Set more complex boundaries for ripples

We use shape to set the boundary shape for ripples, only a few basic shapes such as rectangle,oval. To make the effect of ripples more cool, you can use the picture as the boundary of the ripples, when displayed, the opaque part of the picture is the diffused area of the ripples. When we click on the control, we can clearly display the outline of the picture, can get a better visual effect.

Modify the Custom_bg.xml file as follows:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color= " #000000 ">    <item android:id="@android: Id/mask" android:drawable="  @drawable/ic_launcher">    </item></ripple>

We set the color of the ripples to #000000 (black), and in the item tag, the android:drawable specifies the boundary of the ripples as the ic_launcher, that is, the ripples are bounded by the outline of the image and only spread in the opaque part of the image. The Android:id/mask is also set to indicate that the image is only masked and not displayed. When we click on the control, we can see the ripple effect of a cool Android.

Android Add click Ripple Effect to controls