Detailed usage of Android XML shape Tags

What type of Drawable does the shape tag define?

Gradient Drawable Type Corresponds to Drawable Type Defined by_shape Tag

I think Shape Drawable is also defined by the shape tag in the official documents, but when I look at Gradient Drawable, it's the same explanation. After the actual code test, the Drawable defined by the shape tag can be directly coerced into Gradient Drawable. Wable, but not ShapeDrawable, at this time can only be considered as ShapeDrawable's document interpretation is a bit wrong, perhaps the document is wrong.

Shape Drawable and Gradient Drawall do have a lot of similarities, the specific situation of subsequent separate articles to illustrate that this article does not cover other Shape Drawable content.

What are the benefits of using Drawable?

• Easy to get a rectangle, circle, ellipse, ring, easy to maintain and modify.
• It is very convenient to realize circular corner, gradient (linear gradient, radial gradient, scanning gradient)
• Instead of using pictures as the background of View, reduce the size of the apk (the most obvious and effective step to reduce the size of the apk is to remove the pictures)
• Large pictures consume memory and use Drawable to save memory. Android itself optimizes Drawable (memory optimization needs to be considered)

When do you choose to use Drawable instead of a graph, and vice versa?

• Where Drawable is theoretically available, Drawable is used.
• If the geometry that can be defined by the shape tag meets the requirement, it does not need to be represented by pictures.
• Gradient backgrounds are also implemented using shape s as much as possible.
• Irregular, complex graphics can only use pictures, such as a mobile phone icon, a person's head.
• Some special pull-up effects require the use of. 9.png pictures (as small as possible, the smaller the memory saved)

How many types of Drawable can shape tags define?

_shape can define four types of geometry, specified by the android:shape attribute

_line - > line

_rectangle - > rectangle (rounded rectangle)

_oval - > ellipse, circle

_ring - > ring

_shape defines border attributes

_has borders, no borders, dotted borders, solid borders

_shape can achieve the effect of rectangular rounded corners

_Can specify one or more corners to set the rounded effect

_Specify the radius of the fillet and set the size of the fillet.

_shape can realize three kinds of gradient, which is realized by subtag gradient.

_linear - > linear gradient (horizontal, vertical, diagonal three gradients)

Swep - > Scanning Gradient (only clockwise, in fact, the color is the same as counterclockwise)

_radial - > radial gradient (from the designated central point to the outward gradient, designated radius)

_xml implementations support only three colors, startColor, CenterColor, endColor

For more details about shape s, please move on. Android Gradient Drawable (shape tag definition) Static and dynamic usage (rounded corner, gradient implementation)

_Many Drawable s can be defined from the above combination. The following is an introduction in turn:

Line (solid + dotted)

Solid line: line_solid.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Solid line --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> </shape>

Dashed line: line_dashed.xml

<?xml version="1.0" encoding="utf-8"?> <! - dotted line Setting the type will line Hardware acceleration dotted lines need to be turned off to be drawn. android:layerType="software" needs to be set when used in layout files. android:width line width, the height of the View in the layout file needs to be greater than this value before it can be drawn. Android: The length of dashWidth broken line per segment android:dashGap="5dp" interval between broken lines <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" android:useLevel="true"> <stroke android:width="2dp" android:dashGap="5dp" android:dashWidth="10dp" android:color="#ffff0000" /> </shape>

Rectangle (Border + Fill)

No filling inside rectangular solid border: rect_solid_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- solid border --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> </shape>

No filling inside rectangular dashed border: rect_dashed_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- dashed --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" android:dashGap="5dp" android:dashWidth="10dp" /> </shape>

Rectangular Solid Border - Internal Fill: rect_solid_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- solid border+Internal filling --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#ff00ffff" /> </shape>

Rectangular dashed border - internal filling: rect_dashed_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- dashed+Internal filling --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" android:dashGap="5dp" android:dashWidth="10dp" /> <solid android:color="#ff00ffff" /> </shape>

Fillet rectangle

Rounded Rectangle - Only Border: rect_rounded_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular border rounded corner --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <stroke android:width="2dp" android:color="#ffff0000" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" /> </shape>

Rounded Rectangle - Only Internal Fill: rect_rounded_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Fillet rectangle --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <solid android:color="#8000ff00" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" /> </shape>

Rounded Rectangle - Bordered Filled: rect_rounded_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangle border+Filling fillets --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#8000ff00" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" /> </shape>

Rounded Rectangle - The left corner is a semi-circular arc: rect_rounded_left_arc.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular fillet+There is an arc on the left and right sides. --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <solid android:color="#8000ff00" /> <!-- The radius of a rounded corner is usually an arc of height. --> <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" /> </shape>

Rounded Rectangle - Both sides are semicircular arcs: rect_rounded_left_right_arc.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular fillet+There is an arc on the left and right sides. --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <solid android:color="#8000ff00" /> <!-- The radius of a rounded corner is usually an arc of height. --> <corners android:radius="20dp" /> </shape>

Rounded rectangle - Semi-circular arc on both sides - with border: rect_rounded_left_right_arc_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular fillet+There is an arc on the left and right sides. --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <stroke android:color="#ffff0000" android:width="2dp"/> <solid android:color="#8000ff00" /> <!-- The radius of a rounded corner is usually an arc of height. --> <corners android:radius="20dp" /> </shape>

Rounded rectangle-circle: rect_rounded_arc.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular fillet+Circle out an arc --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="10dp" android:width="10dp"/> <solid android:color="#8000ff00" /> <corners android:radius="20dp" /> </shape>

Rounded Rectangle - Upper and Lower Semi-circular Arcs: rect_rounded_top_bottom_arc.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular fillet+There is an arc on the left and right sides. --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="10dp" android:height="60dp" /> <solid android:color="#8000ff00" /> <!-- The radius of a rounded corner is usually an arc of height. --> <corners android:radius="10dp" /> </shape>

Gradient effect (take rectangle for example)

Vertical linear gradient: rect_gradient_linear_vertical.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular interior filling-Linear vertical gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <!-- adjustment angle Achieve horizontal, vertical or diagonal gradients --> <gradient android:angle="-45" android:centerX="0.5" android:centerY="0.4" android:centerColor="#8000ff00" android:endColor="#1000ff00" android:startColor="#ff00ff00" android:type="linear" /> </shape>

Horizontal linear gradient: rect_gradient_linear_horizon.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular interior filling-Linear horizontal gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <!-- adjustment angle Achieve horizontal, vertical or diagonal gradients --> <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:centerColor="#8000ff00" android:endColor="#ff00ff00" android:startColor="#1000ff00" android:type="linear" /> </shape>

Diagonal Linear Gradient: rect_gradient_linear_diagonal.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular interior filling-Linear diagonal gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <!-- adjustment angle Achieve horizontal, vertical or diagonal gradients --> <gradient android:angle="45" android:centerX="0.5" android:centerY="0.5" android:centerColor="#8000ff00" android:endColor="#1000ff00" android:startColor="#ff00ff00" android:type="linear" /> </shape>

Radial Gradient: rect_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular interior filling-Radial Gradient,Usually not used in rect For circles or ellipses --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <!-- Radial Gradient angle invalid --> <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:startColor="#0000ff00" android:endColor="#ff00ff00" android:gradientRadius="40dp" android:type="radial" /> </shape>

Scanning Gradient: rect_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Rectangular interior filling-Scan gradation --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <!--If no settings are set in the layout View Size, will size Set the size to default--> <size android:width="20dp" android:height="20dp" /> <stroke android:width="1px" android:color="#ffff00ff" /> <!--adjustment angle Can't achieve angle change centerX,centerY It's the location of the central point, where the percentage value (0) is used.-1) //gradientRadius is invalid in rect - > <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:startColor="#ff00ff00" android:gradientRadius="20dp" android:type="sweep" /> </shape>

Circle (Border + Fill + Gradient)

Circle-border: circle_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Round border --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff0000" /> </shape>

Circle-fill: circle_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Round border + Fill --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <solid android:color="#800000ff" /> </shape>

Circle-Border Filling: circle_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Round border + Fill --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#800000ff" /> </shape>

Linear Gradient: circle_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Circular interior filling-linear-gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <!-- angle Adjusting the gradient angle can only be a multiple of 45. centerX, centerY It's 100%(0)-1) --> <gradient android:angle="-90" android:centerX="0.5" android:centerY="0.8" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" /> </shape>

Radial Gradient: circle_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Circular interior filling-Radial Gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="40dp" android:height="40dp" /> <!-- centerX, centerY It's 100%(0)-1) --> <gradient android:centerX="0.5" android:centerY="0.5" android:startColor="#ffff0000" android:centerColor="#80ff0000" android:endColor="#10ff0000" android:gradientRadius="30dp" android:type="radial" /> </shape>

Scan Gradient: circle_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Circular interior filling-Scan gradation --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <!-- sweep type angle,gradientRadius Invalid. centerX, centerY It's 100%(0)-1) --> <gradient android:centerX="0.5" android:centerY="0.6" android:startColor="#ffff0000" android:centerColor="#80ff0000" android:endColor="#20ff0000" android:gradientRadius="20dp" android:type="sweep" /> </shape>

Ellipse (Border + Fill + Gradient)

Border: oval_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Elliptical border --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> </shape>

Fill: oval_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Ellipse filling--> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <solid android:color="#800000ff" /> </shape>

Border + Fill: oval_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Elliptical border + Fill--> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#800000ff" /> </shape>

Linear Gradient: oval_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Internal filling of ellipse-linear-gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:angle="45" android:centerX="0.5" android:centerY="0.7" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" /> </shape>

Radial Gradient: oval_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Internal filling of ellipse-Radial Gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#00ff0000" android:startColor="#ffff0000" android:gradientRadius="40dp" android:type="radial" /> </shape>

Scanning Gradient: oval_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?> <!-- Internal filling of ellipse-Scan gradation --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="sweep" /> </shape>

Ring (Border + Fill + Gradient)

ring_fill.xml

<?xml version="1.0" encoding="utf-8"?><!-- ring --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadiusRatio="4" android:shape="ring" android:thicknessRatio="4" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <solid android:color="#80ff0000" /> </shape>

Ring Border: ring_border.xml

<?xml version="1.0" encoding="utf-8"?> <!-- ring-Border only --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="20dp" android:shape="ring" android:thickness="16dp" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff00ff" /> </shape>

Border + Fill: ring_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?> <!-- ring --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="20dp" android:shape="ring" android:thickness="16dp" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <solid android:color="#80ff0000" /> <stroke android:width="2dp" android:color="#ffff00ff" /> </shape>

Linear Gradient: ring_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?> <!-- ring-linear-gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <gradient android:angle="45" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" /> </shape>

Radial Gradient: ring_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?> <!-- ring-Radial Gradient Gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <!--Set the radius of the radial gradient, and the gradient begins at the center of the circle.--> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#00ff0000" android:startColor="#ffff0000" android:gradientRadius="40dp" android:type="radial" /> </shape>

Scanning Gradient: ring_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?> <!-- ring-linear-gradient --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <!--android:useLevel="false"Must be false--> <size android:width="80dp" android:height="80dp" /> <!--Scan gradation shape Can't set angle--> <gradient android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="sweep" /> </shape>

summary

_Proficient in the use of shape tags, can build a variety of Drawables, these Drawables can be set directly as a background to View, the code is used by R.drawable, xml file is used by @drawable/name. Like the use of pictures, the key is to use Drawable system to reduce the size of the apk, reduce memory footprint and other benefits, so don't think that simple is not systematic learning, the simpler things the more skilled. Later, there will be some Drawable articles, such as what other xml tags can be defined besides Drawable defined by shape tags. Drawable? How can Drawable be created and used in code?

Links to the original text: http://www.cnblogs.com/popfisher/p/6238119.html

Add new comment

For adding a comment, please log in

Login or create account

0 comments