Graph description Andorid defines GradientDrawable with Shape

Graph description Andorid defines GradientDrawable with Shape

Android provides various types of Drawable. You can also define various Drawable types using XML. This article focuses on how to use the shape node in XML to define GradientDrawable.

Put the drawable file defined in XML in the res/drawable directory.

The syntax for defining GradientDrawable with an XML file is as follows:

This file uses Is the root node, itsshapeFour values can be used for a property: rectangle, oval, line, or ring. Although many attributes are listed in the preceding syntax format, these attributes are not supported for all types of shapes. The following describes the four shapes.

Rectangle

Under res/drawable, an XML file is used to define a GradientDrawable named rectangle. Its corresponding shape value is rectangle, indicating that the shape of the drawable we define is a rectangle. A TextView is defined in the layout file, which uses the above drawable, as shown below:

Solid

Rectangle. xml is defined as follows:

In the preceding XML file, we set the shape attributerectangle, We will Set the color attribute of the node to green, The attribute is used to set the fill color of the surface. The effect is as follows:

Corners
vcm5lcnM+PC9jb2RlPr3atePTw9PayejWw2RyYXdhYmxly8S49rnVvce1xLDrvrajrLbU06a1xFhNTM7EvP7I58/Cy/nKvqO6PC9wPg0KPHByZSBjbGFzcz0="brush:java;">

The effect is as follows:


Only whenshapeThe property value isrectangle, Nodes. NoderadiusThe attribute defines the radius of the four corners at the same time. To make the radius of the four corners different, you can set the attributes topLeftRadius, topRightRadius, bottomLeftRadius, and bottomRightRadius respectively, however, before setting these four attributes, you must first setradiusAttribute is the default value and the default value must be greater than 1. The other four attributes cannot be used normally.

Padding
Nodes are used to set the padding of drawable. You can set the left, right, top, and bottom attributes respectively. They are equivalent to the four paddingLeft, paddingRight, paddingTop, and paddingBottom attributes set for TextView.

The XML file is as follows:

The effect is as follows:


Size
Available Set the drawable size for the width and height attributes of the node. By default The defined drawable is automatically scaled to the View size range containing the drawable. For example, we have set the src of the following ImageView. Defined drawable, when we set itsscaleTypeWhen the value is center, The size defined in will limit the drawable scaling.

The defined ImageView is as follows:

The corresponding drawable is defined as follows:

The effect is as follows:


Stroke
Available Node sets the outline of drawable, throughwidthSet the width of the contour line throughcolorSet the contour line color. By default, Defines the solid line. In addition, you can also setdashWidthAnddashGapProperty. If these two attributes are set, the dotted line is used. Where,dashWidthDefines the length of each dotted line segment,dashGapDefines the distance between two dotted lines.

The corresponding XML file is as follows:

The effect is as follows:


Gradient
As mentioned above You can set the drawable color, but it is only a solid color. To make drawable produce gradient effect, you can use Create a gradient effect for the node. Nodes have the following attributes: type, startColor, centerColor, endColor, angle, centerX, centerY, and gradientRadius. There are three types: linear, radial, and sweep. The default value is linear. When the type value is different, Not all attributes are supported. The following is a detailed description.

Linear
When When the value of type is linear, it indicates that the color is linear gradient. In this case, the four attributes startColor, centerColor, endColor, and angle are supported. Other attributes are not supported. You can specify the start color and end color of the gradient by setting startColor and endColor. XML is as follows:

Set startColor to red and endColor to blue. The effect is as follows:


You can also set the centerColor attribute to specify the middle color. XML is as follows:

We set the middle color to green, and the effect is as follows:


By default, the gradient is performed from left to right. You can set it if you want to adjust the gradient direction.angleAttribute. The default value of angle is 0, which corresponds to the gradient from left to right. The angle unit is angle, and the angle value must be a multiple of 45. Otherwise, no gradient effect is available. We can change the angle value. XML is as follows:

When angle is set to 90 degrees, the gradient direction is changed from bottom to bottom. The effect is as follows:


Radial
When When the value of type is radial, it indicates that the color emits a gradient from a point to the surrounding area. In this case, all attributes except angle are supported. We must specify the radiant radius of the gradient by setting the gradientRadius attribute, and specify the starting color through startColor, as shown in XML:

Set startColor to Red. The effect is as follows:


We can find that startColor gradually fades from the center along the radius of the circle.

After startColor is set, we can also set centerColor. XML is as follows:

Shows the effect:


It can be seen that startColor (red) Gradually gradually fades from the center along the circle radius to centerColor (green ).

In addition to startColor and centerColor, you can also set endColor. XML is as follows:

We set centerColor to green, and the effect is as follows:

As you can see, startColor (red) gradually fades from the center along the radius of the circle to centerColor (green), and colors outside the specified radius are filled with endColor (blue.

In fact, startColor, centerColor, and endColor attributes can be combined at any time. You can try the effects of different combinations by yourself.

By default, the center of the center is in the center of drawable. We can use the centerX and centerY attributes to change the position of the center of the gradient. The values of centerX and centerY are from 0 to 1, the default values of these two attributes are 0.5. The values of centerX and centerY in the upper left corner of drawable are both 0, and the values of centerX and centerY in the lower right corner are both 1. We change the values of centerX and centerY. XML is as follows:

The effect is as follows:


Sweep
When When the type value is sweep, it indicates that the color rotates clockwise around the center point of 360 degrees. The starting point is three o'clock.
You can set only startColor. The XML file is as follows:

Set startColor to Red. The effect is as follows:


You can also set only endColor. The XML file is as follows:

Set endColor to blue, as shown in the following figure:


We can also set only the value of centerColor. The XML file is as follows:

Set centerColor to green, as shown in the following figure:


You can also set startColor, centerColor, and endColor values. The XML file is as follows:

Set startColor, centerColor, and endColor to red, green, and blue respectively. The effect is as follows:


The default values of centerX and centerY are both 0.5, indicating that the central point is the center of drawable. You can also change the values of centerX and centerY to update the central point. The XML file is as follows:

Set centerX to 0.25, as shown in the following figure:


Oval

Under res/drawable, an XML file is used to define a GradientDrawable named oval. The corresponding shape value is oval, indicating that the shape of drawable is an elliptic and the drawable is used as the background of TextView. The main difference between oval and rectangle is that drawable has different shapes, and most node attributes have the same effect.

Solid
Like rectangle, we can use solid to specify the drawable color. XML is as follows:

The effect is as follows:

Corners
It is not supported when shape is oval. Node.

Padding
Also supported by oval Node, set the four padding values to 20 DP, the effect is as follows:

Size
Oval is not supported. Node.

Stroke
Like rectangle, we can also set it for oval. , The effect is as follows:

Gradient
Also supported by oval The node implements the gradient effect. The type attribute also supports three attributes: linear, radial, and sweep. The gradient effect bucket rectangle implemented by the node has the same gradient effect.

Linear
When the type is linear, the linear gradient effect is achieved. We set startColor, centerColor, and endColor to red, green, and blue respectively, and set angle to 45 degrees. The effect is as follows:

Radial
When the type is radial, the gradient effect is achieved. We set startColor, centerColor, and endColor to red, green, and blue respectively. The effect is as follows:

Sweep
When the type is sweep, it indicates that the color rotates clockwise around the center point of 360 degrees. The starting point is three o'clock. Set startColor, centerColor, and endColor to red, green, and blue respectively. The effect is as follows:

For the effect of Multiple Parameter Combinations in the node, see the preceding rectangle description.

Line

In res/drawable, an XML file is used to define a GradientDrawable named line. The corresponding shape value is line and the drawable is used as the background of TextView. When the shape is line, it indicates that the shape of drawable is line, which separates drawable. Line only And Two nodes. Other nodes are not supported.

The XML file is as follows:

The effect is as follows:

Ring

Under res/drawable, an XML file is used to define a GradientDrawable named ring. Its corresponding shape value is ring, which indicates that the shape of drawable is a ring and the drawable is used as the background of TextView. The so-called circle is the big circle set small circle. When shape is ring, shape has four additional attributes: innerRadius, thickness, innerRadiusRatio, and thicknessRatio.

Note that when drawable with the shape ring is used on a real machine with the API <= 19, Android has a bug that does not display drawable, the solution is to set the useLevel attribute of shape to true.

We use innerRadius to specify the radius of a small circle and thickness to specify the width between a large circle and a small circle. XML is as follows:

The effect is as follows:

We can also use innerRadiusRatio to specify the radius of a small circle. The innerRadiusRatio value is of the float type. If the value is 9, the radius of the small circle is equal to 1/9 of the TextView width. Similarly, you can use thicknessRatio to specify the width between a large circle and a small circle. The value type is float. If the value is 8, the width between the large and small circles is equal to 1/8 of TextView. The XML file is as follows:

The effect is as follows:

If the ring is set , The Size circle will use the contour line set, the effect is as follows:

Ring is also supported Implement gradient effect. The default type is linear and only startColor is set to Red. The effect is as follows:

When the type is linear, only centerColor is set to green. The effect is as follows:

When the type is linear, only the endColor is set to blue. The effect is as follows:

When the type is linear, The angle parameter is also supported. You can try the combination of multiple colors on your own.

When When the type value of is set to gradial, you must specify the gradientRadius attribute. Otherwise, an error is returned. Gradial does not achieve the radiation gradient effect as above. The gradial ring only uses startColor to fill the ring color. The color attribute in the node is the same.

When the type is sweep, it indicates that the color rotates clockwise around the center point of 360 degrees. The starting point is three o'clock. Set startColor, centerColor, and endColor to red, green, and blue respectively. The effect is as follows:

I hope this article will help you define GradientDrawable for Shape!