Android style development: detailed explanation of layer list examples

How to achieve the background effect of tab and the rounded rectangle with shadow in the above figure? Most people will ask artists to cut the picture and use the point nine picture as the background. However, what happens if only one picture is provided? For example, if the pixel height of the red bottom line of the middle tab background is 4PX, the display on the MDPI device will meet the expectation. It will be a little thinner when displayed on the hdpi device, a little thinner when displayed on the xhdpi device, a little thinner when displayed on the xxhdpi device, and even thinner when displayed on the xxhdpi device. Because 1DP = 4PX on the xxxhdpi, when the 4PX diagram is displayed on the xxxhdpi device, only 1DP is left. Therefore, in order to adapt to various resolutions, corresponding multiple sets of pictures must be provided. If you look at the res source code resources of Android, you will also find that the background point nine pictures of tabs like this also provide point nine pictures of different sizes according to different resolution sizes.

However, in this demo, no actual image resources are used. They are all completed with shape, selector and layer list to be explained in this article.

Using layer list, multiple drawables can be stacked together in order. Like tab in the above figure, it is the result of a red layer and a white layer stacked together. The rounded rectangle of shadow is a gray rounded rectangle superimposed on a white rounded rectangle. Let's look at the code first. The following is the code for the tab background:

The following is a rounded rectangle with shadows:

As can be seen from the above example code, layer list can be used as the root node or as the child node of item in the selector. Multiple item sub nodes can be added to the layer list. Each item sub node corresponds to a drawable resource, which is superimposed together in the order of items from top to bottom, and then the shadow and other effects can be seen by setting the offset of each item. The item of layer list can set the offset through the following four attributes:

These four offsets are similar to the margin setting of the control, which are the effect of outer spacing. If you do not set the offset, the front layer completely blocks the back layer, so you can't see the effect of the back layer. For example, in the above example, the white background in the tab background can only be seen after Android: bottom is set. So what happens if the offset is set to negative? After verification, the part beyond the offset will be cut off and can't be seen. If you don't believe it, you can try it yourself. Sometimes this is useful, such as when I want to display a semicircle.

In addition, the usage of item is summarized as follows:

1. When the root node is different, the settable attributes will be different. For example, under selector, some status attributes can be set, while under layer list, offset can be set;

2. Even if the parent node is also a selector, the available attributes in the drawable directory and the color directory will be different. For example, the available attribute in the drawable directory is Android: drawable, and the available attribute in the color directory is Android: color;

3. The child node of item can be any type of drawable class label. In addition to shape, color, layer list, or selector in the above example, there are other unparalleled bitmap, clip, scale, inset, transition, rotate, animated rotate, lever list, etc.

ending

That's all for the layer list. The sample code has been updated and put on GitHub. Address:

https://github.com/keeganlee/kstyle.git

The above is an example of Android layer list style. We will continue to supplement relevant materials in the future. Thank you for your support for this site!