Android-Xml plotting

Android-Xml plotting
Android XML plotting

In Android, XMl is not just a layout file or a configuration list. It can even become a painting or a graph.

Bitmap

Statement:
Res/drawable/bitmap. xml

Reference

Shape

Android styles are mainly implemented through combination of shape, selector, layer-list, level-list, style, and theme.

Generally, the xml file defined by shape is stored in the drawable directory. If the project does not have this directory, create a new one instead of putting it in the drawable-hdpi directory.

You can use shape to customize the following four types of shapes. You can use the android: shape attribute to specify:

Rectangle: rectangle, the default shape. oval: oval, such as a rectangle with a right angle, a rectangle with a rounded corner, and an arc shape. It is used to draw a circle line: linear, you can draw solid line and dotted line ring: ring, you can draw a ring progress bar

You can use shape to draw any Shape in XML. The following shows the parameters supported by shape.

Rectangle

Solid: Set the shape fill color. Only android: color has one attribute.

Android: color filled color

Padding: Set the inner spacing between the content and the shape boundary. You can set the distance between the left and right sides.

Android: left inner margin android: right inner margin android: top inner margin android: bottom inner margin

Gradient: Set the gradient color of the shape. It can be a linear gradient, a radiation gradient, or a scanning gradient.

Android: linear gradient of type gradient, default gradient type radial radiation gradient, when this item is set, android: gradientRadius must also set the sweep scan gradient android: the color of the start of the startColor gradient android: endColor the color of the end of the gradient android: centerColor the color of the middle of the gradient android: angle gradient angle, linear gradient is valid, must be a multiple of 45, 0 indicates from left to right, 90 indicates the relative X coordinate of the android: centerX gradient center from bottom to top, which is valid only when the gradient is emitted. The default value is 0.0 between 1.0 and 0.5, it indicates the relative X coordinate of the android: centerY gradient center in the middle, which is valid only when the gradient is emitted. The default value is 0.0 between 1.0 and 0.5, indicating android in the middle: gradientRadius gradient radius. android: useLevel can be used in LevelListDrawable only when the gradient type is radial.

Corners: Set the rounded corner. It is only applicable to the rectangle type. You can set four rounded corners with different radius. When the radius of the rounded corner is large, for example, DP, it can be changed to an arc edge.

Android: radius rounded corner radius, which will be overwritten by each of the following specific rounded corner attributes android: topLeftRadius upper left corner radius android: topRightRadius upper right corner radius android: bottomLeftRadius lower left corner radius android: bottomRightRadius lower right corner radius

Stroke: Set stroke, which can be a solid line or dotted line.

Android: color stroke color android: width stroke width android: dashWidth set the horizontal line length when the dotted line android: dashGap set the distance between the horizontal lines when the dotted line

Then you can reference it in the view to be used, for example, the background of TextView in this example:

:

ALL:

Oval

Oval is used to draw an elliptical image. In practice, it is used to draw a positive circle, such as a message prompt or a circular button.

The preceding features include solid, padding, stroke, gradient, and size. Size is used to set the shape and size, as follows:

Size: Set the default size of the shape. You can set the width and height.
Android: width
Android: height

The number 0 is the default elliptic, with only the solid filled color,
When the number is 1, the padding of 4 DP is added,
The following digits are all positive circles, which are achieved by setting the width and height of the same size, or by setting the width and height consistent size of the control.
Number 3 adds stroke,
Number 4 is a hollow stroke,
Number 5 is a virtual line stroke,
The number 6 uses the radial gradient. Note: When using a radial gradient, you must specify the radius of the gradient, that is, the android: gradientRadius attribute.

The following is the gradient code implementation. The file is bg_oval_with_gradient.xml:

Reference code:

Line

Line is mainly used to draw split lines. It is implemented by combining the stroke and size features. First, let's look at the dotted line code:

When you draw a line, you must know the following features:

You can only draw a horizontal line, but cannot draw a vertical line. The line height is set through the android: width attribute of stroke. The android: height attribute of size defines the height of the entire shape area; the height of the size must be greater than the width of the stroke; otherwise, the line cannot be displayed; the line is displayed in the center of the entire shape area; the left and right sides of the line will have blank spacing, the thicker the line, the larger the blank, the property android: layerType needs to be added for the view that references the dotted line, and the value is set to "software". Otherwise, the dotted line cannot be displayed.

Reference:

Ring

First, some attributes of the shape root element only apply to the ring type. See the following attributes first:

Android: innerRadius inner radius android: innerRadiusRatio float type, uses the ring width ratio to indicate the inner ring radius. The default value is 3, indicating that the inner ring radius is the ring width divided by 3, this value will be overwritten by android: innerRadius. The android: thickness ring thickness android: thicknessRatio float type indicates the ring thickness by the ring width ratio. The default value is 9, it indicates that the ring thickness is the ring width divided by 9. This value will be overwritten by-android: thickness. android: useLevel is generally false. Otherwise, the ring may not be displayed, set to true only when used as LevelListDrawable

Only solid is added to the first graph;
In the second figure, only gradient is added, and the type is sweep;
Only stroke is added to the third graph;
The fourth figure adds the gradient and stroke features.

The code for the fourth figure is as follows:

If you want to rotate the ring to an available progress bar, you only need to have one more rotate element in the outer bag of the shape.

Reference
Android: indeterminateDrawable

Layer

In this case, refer to gangge's blog layer-list.
Learn from your predecessors ~

Result Analysis:
TAB background effect + rounded rectangle with shadow

We have not used any image here, but it relies entirely on shape + selector + layer-list.

You can use layer-list to display multiple drawable items in sequence. The Tab in the image is displayed by a red layer and a white one, the rounded rectangle of the shadow is a white rounded rectangle superimposed on a gray rounded rectangle.

Tab background code:

The first implementation method:
Bg_tab_selector.xml

Bg_tab_selected.xml

Bg_tab_unselected.xml

The second implementation method (just write the first implementation method to a file)

Bg_tab_selected.xml

Text section:
Res/color/text_tab_selector.xml

Rounded rectangle with shadow:

Bg_shadow_corners_rectangle.xml

Reference:

Summary:

As shown in the sample code above, layer-list can be used as the root node or as the sub-node of item in selector. Layer-list allows you to add multiple item subnodes. Each item subnode corresponds to a drawable resource and is superimposed in the order of items from top to bottom, by setting the offset of each item, you can see the shadow and other effects. For layer-list items, you can set the offset using the following four attributes:

Android: top offset
Android: the offset at the bottom of bottom
Android: left offset
Android: right offset on the right

The four offsets are similar to the margin settings of the control, and both are the effect of outer spacing. If you do not set the offset, the layer above completely blocks the layers behind it, so that you cannot see the effect of the layers behind it. For example, in the preceding example, the white background in the Tab background is set to android: bottom before you can see a red background. What if the offset is set to a negative value? After verification, the offset exceeding part will be truncated and cannot be seen. If you do not believe it, try it on your own. Sometimes this is useful, for example, when I want to display a semi-circle.

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

If the root node is different, the configurable attributes are different. For example, some State attributes can be set under selector, And the offset can be set under layer-list; even if the parent node is also selector, the available attributes in the drawable directory and the color directory are different. For example, the available attributes in the drawable directory are android: drawable, the available attribute in the color directory is android: color; The child node of item can be a drawable class label of any type, except for the shape, color, layer-list, it can also be selector, or bitmap, clip, scale, inset, transition, rotate, animated-rotate, lever-list, and so on. Selector

The selector style is used at the bottom of the navigation bar of the previous blog.

Let's take a look at the final implementation results:

The following is the question:

Although shape can customize the rectangle, circle, line shape and ring, and what need attention. However, a shape can only define a single shape. in practical applications, buttons, tabs, and ListItem have different display shapes in different States. For example, the background of a button is a shape by default. It is a shape when pressed, and another shape when not operated. Sometimes, different States change not only the background, images, but also the text color. To solve the problems displayed in different states, we need to use selector.

Selector label. One or more item sub-labels can be added, and the corresponding status is defined in the item label.

The defined xml file can be used as two types of resources: drawable and color.

When used as a drawable resource, it is usually stored in the drawable directory like a shape,The android: drawable attribute must be specified for item.;
When used as a color resource, it is stored in the color directory. The android: color Attribute must be specified for item.

Configurable status:

If you do not want to write it manually, you can use the Android-selector-chapek plug-in android Studio. However, the image naming rules must follow the specifications before they can be automatically generated.

Note:

When selector is used as a drawable resource, item specifies the android: drawable attribute and stores it in the drawable directory. When selector is used as a color resource, item specifies the android: color Attribute and stores it in the color directory; color resources can also be stored in the drawable directory. @ drawable is used for reference. However, it is not recommended that drawable resources and color resources be separated;
Android: The drawable attribute can reference the @ drawable resource or the @ color value. However, android: color can only reference @ color. items are matched from top to bottom, if an item is matched, it will use this item instead of the best matching rule. Therefore, to set the default state, it must be written at the end, all the subsequent items will not work.

In addition, the selector label has two useful attributes. After the following two attributes are addedFade in and out when the status changesBut must be at API Level 11 or above:

Android: enterFadeDurationThe Fade-in time when the status changes and the new status is displayed, in milliseconds
Android: exitFadeDurationFade-out time when the old status disappears when the status changes, in milliseconds

Finally, there are two ways to set the ListItem style of ListView. One is to set the android: listSelector attribute in the ListView label, and the other is to set android in layout of the ListItem layout: background.

However, the results of these two settings are different. At the same time, there are some other notes when using ListView, which are summarized as follows:

Android: the Default background of the ListItem set by listSelector is transparent. No matter how you set it in the selector, the background cannot be changed. Therefore, if you want to change the default background of ListItem, you can set android: background in layout of ListItem In the second way. When you click ListItem, state_pressed, state_focused, and state_window_focused are triggered when they are set to true. In the second setting mode, only state_pressed is triggered.

When a control such as a Button or CheckBox exists in a ListItem, the focus of the ListItem itself will be preemptible, And the touch Click Event of the ListItem itself will be invalid. There are three solutions to solve this problem:

Change a Button or CheckBox to a control such as TextView or ImageView.

Set the focusable attribute to false for controls such as Button or CheckBox.
Set the root layout attribute of ListItem-android: descendantFocusability = "blocksDescendants"

The third method is the most convenient and recommended method. It sets all the child controls in the ListItem root layout to inaccessible focus. Android: descendantFocusability has three values. ViewGroup indicates the View for which the attribute is set. In this example, the root layout of ListItem is as follows:

BeforeDescendants: ViewGroup takes precedence over its subclass control and obtains focus afterDescendants: ViewGroup obtains focus only when its subclass control does not need focus. blocksDescendants: ViewGroup overwrites the subclass control and directly obtains focus.