Example of click ripple effect by setting theme for Android

At the beginning, let's talk about the material design we all know.

Material Design：

Material design is a new design language launched by Google, which is characterized by the flattening of objects.

Material design contains many contents. I roughly divide it into four parts:

Material Theme

Use material theme:

Material theme can only be applied to Android l version.

Applying the material theme is simple. You only need to modify the RES / values / styles.xml file to inherit Android: theme.material. As follows:

Or set the theme directly in androidmanifest.xml:

In the latest 5.0, Google doesn't seem to recommend using the material design theme, but appcompat instead.

Customize the status bar and navigation bar:

Material also allows you to easily customize the colors of the status bar and navigation bar.

You can use the following attributes (refer to the picture below):

android:statusBarColor，Window.setStatusBarColor

compatibility:

Because material theme can only be used in Android l developer preview.

Therefore, if it is used in the lower version, it is necessary to set another set of topics:

The old version uses a set of themes RES / values / styles.xml, and the new version uses the material theme RES / values-v21 / styles.xml

The controls with click events in the system generally have the default ripple effect, which can be used directly:

How to add click ripple effect to the view? Let's learn the following first.

Touch feedback:

Touch feedback animation has been added to Android l5.0.

One of the most obvious and representative is ripple animation. For example, when you click a button, it will produce a diffusion effect similar to ripple from the clicked position.

Ripple effect:

When you use the material theme, the ripple animation will be automatically applied to all controls. Of course, we can set its properties to adjust the effect we need.

The background of the ripple can be set by the following code:

The use effect is as follows:

B1 is a button without any background

B2 set? android:attr/selectableItemBackground

B3 set? android:attr/selectableItemBackgroundBorderless

Set color

We can also adjust the animation color by setting the XML attribute, so that we can adapt to different themes:

Android: colorcontrolhighlight: set ripple color

Android: coloraccent: settings check@R_ 901_ 2419 @ and other controls

For example, the following pink and tender theme needs to modify the animation color to match (as described above):

Add a ripple effect to the view:

Add a ripple effect to textview:

In this way, the ripple effect can be realized!

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.