Go Android-style development: Shape article

Reprinted from Keegan Small Steel
Original link:http://keeganlee.me/post/android/20150830

Android-style development: Shape article
Android-style development: Selector
Android-style development: Layer-list
Android-style development: drawable Summary
Android-style development: View animation
Development of Android Style: property animation
Development of Android style: Style article

An app that should maintain a uniform set of styles, including buttons, EditText, ProgressBar, toasts, checkboxes, and other controls, including control intervals, text size and color, shadows, and so on. The style of the web is defined by CSS, while the Android style is mainly achieved through a combination of shape, selector, layer-list, level-list, style, theme, and so on. I'm going to use a series of articles to explain how each aspect of the style is implemented in a gradual manner. The first thing to talk about is shape, the most basic form definition tool.

Typically, the XML file defined by shape is stored in the drawable directory, and if the project does not have that directory, create a new one instead of placing it in a directory such as DRAWABLE-HDPI.

You can use shape to customize the shape, and you can define the following four types of shapes, specified by the Android:shape property:

• Rectangle: Rectangle, default shape, can draw right-angle rectangle, rounded rectangle, arc, etc.
• Oval: Ellipse, used more is to draw a circle
• Line: Linear, can draw solid lines and dashed lines
• Ring: Annular, can draw loop progress bar

Rectangle

Rectangle is the default shape, is also the most used shape, some text background, button background, control or layout background, etc., here are some simple examples:

The following features are used to achieve the above effects:

• Solid: Sets the color of the shape fill, only android:color one property

  • Android:color The color of the fill

• padding: Sets the inner space between the content and shape boundaries, setting the distance between the left and right

  • Android:left left inner spacing
  • android:right Right inner spacing
  • android:top spacing between the upper and inner
  • Android:bottom under inner space

• Gradient : Sets the gradient color of a shape, which can be a linear gradient, a radiation gradient, a sweep gradient

  • android:type   The type of gradient
    • linear   linear gradient, default gradient type
    • radial   radial gradient, Android:gradientradius must also be set when setting this item
    • sweep   scanning gradients
  • android:startcolor   gradient start color
  • android:endcolor   gradient end color
  • android:centercolor   Colors in the middle of the gradient
  • android:angle   Gradient angle, linear gradient only valid, must be a multiple of 45, 0 means left to right, 90 means bottom to top
  • Android:centerx   Gradient Center relative x coordinate, only valid for radial gradient, between 0.0 and 1.0, default is 0.5, mean between the middle
  • android:centery   Gradient Center relative x coordinate, only valid for radial gradient, between 0.0 and 1.0, default is 0.5, mean between the middle
  • Android:gradientradius The radius of the   gradient, only used when the gradient type is radial
  • android:uselevel   If true, you can use it in levellistdrawable

• Corners: Set the fillet, only for the rectangle type, can be set four angles of different radii of the fillet, when the radius is large, such as 200DP, can be turned into a curved edge

  • Android:radius fillet radius, which is overridden by each of the following specific fillet properties
  • Android:topleftradius radius of the upper left corner
  • The radius of the upper right corner of the Android:toprightradius
  • Android:bottomleftradius radius of the lower left corner
  • Android:bottomrightradius radius of the lower right corner

• Stroke: Sets the stroke to stroke narimi or dashed lines.

  • android:color Color of strokes
  • android:width width of stroke
  • android:dashwidth The horizontal line length when the dash is set
  • Android:dashgap to set the distance between dashes when dashed

The next step is actually how to use. The following is the code for a rectangle with a dashed line, named Bg_rectangle_with_stroke_dash.xml, and placed in the drawable directory:

<?xml version= "1.0" encoding= "Utf-8"?><!--android:shape specified shape type, default rectangle-<shapeXmlns:android="Http://schemas.android.com/apk/res/android"Android:shape="Rectangle"><!--solid Specifies the fill color of the shape, only android:color one property--<solidAndroid:color="#2F90BD"/><!--padding set the content area distance from the boundary--<padding android:bottom= "12DP" android: Left= "12DP" android:right= "12DP" android:top=< Span class= "s" > "12DP" /> <!--corners Set rounded corners, only for rectangle-- <corners android:radius= "200DP" /> <!--stroke Set Stroke--<stroke android:width= " 2DP "android:color=" @android: Color/darker_gray "android: Dashgap= "4DP" android:dashwidth= "4DP" />< Span class= "NT" ></SHAPE>            

You can then refer to the view you want to use, for example, the background for TextView in this example:

<textview    android:layout_width="wrap_content"    android:layout_height="Wrap_content"    android:layout_margin=android:text=android:textsize=android:textcolor=android: background=/>         

Oval

Oval is used to draw ellipses, and in practical applications, it is more of a circle, such as a message hint, a circular button, and so on, which are some examples:

The above applies the solid, padding, stroke, gradient, size several features. The size is used to set the shape, as follows:

• Size: Set the shape's default sizes to set width and height
  • android:width Width
  • android:height Height

The number 0 is the default ellipse, only the solid fill color, the number 1 is added up and down around 4DP padding, the following numbers are positive circles, is by setting the size of the same width of the height of the implementation, you can also set the width of the control of the uniform size to achieve. The number 3 adds a stroke, the number 4 is a skeleton stroke, the number 5 is a virtual line-drawing edge, the number 6 with the radial gradient. Note that when you use the radial gradient, you must specify the radius of the gradient, which is the Android:gradientradius property.

Here is the code implementation of the gradient, the file is bg_oval_with_gradient.xml:

<?xml version= "1.0" encoding= "Utf-8"?><!--android:shape specified shape type, default rectangle-<shapeXmlns:android="Http://schemas.android.com/apk/res/android"Android:shape="Oval"><!--padding set the inner spacing--<paddingandroid:bottom= "4DP" android:left= "4DP" android:right= "4DP" android:top= "4DP" /> <!--size set shape and <size  Android:width= "40DP" android:height= "40DP" / > <!--gradient set gradient--<gradient android:endcolor=< Span class= "s" > "#000000" android:gradientradius= "40DP" android: Startcolor= "#FFFFFF" android:type= "radial" / ></SHAPE>            

Referenced code:

<textview    android:layout_width="wrap_content"    android:layout_height="Wrap_content"    android:gravity=android:layout_margin=android:text=android:textsize=android: textcolor=android:background=/>          

Line

Line is mainly used to draw dividing lines, is achieved by the combination of stroke and size features, first look at the code of the dashed line:

<?xml version= "1.0" encoding= "Utf-8"?> xmlns:android="http://schemas.android.com/apk/res/ Android "    android:shape=" line "android:width=android:color=android:dashgap=  android:dashwidth=android:height=/></shape>       

When drawing a line, there are a few features that you must know:

1. Only draw horizontal line, can not draw vertical line;
2. The height of the line is set by the Android:width property of the stroke;
3. The Android:height property of size defines the height of the entire shape area;
4. The height of size must be greater than the width of the stroke, otherwise the line cannot be displayed;
5. The line is centered in the entire shape area;
6. The left and right side of the line will leave blank spacing, the thicker the line, the larger the blank;
7. The view that references the dashed line needs to add the attribute Android:layertype, the value is set to "software", otherwise the dashed line is not displayed.

Ring

First, some properties of the shape root element apply only to the ring type, so let's take a look at these properties:

• Radius of inner ring of Android:innerradius
• android:innerradiusratio floating Point, which represents the radius of the inner ring at the width ratio of the ring, the default is 3, which means that the inner ring radius is the width of the ring divided by 3, and the value is overwritten by Android:innerradius
• Thickness of android:thickness ring
• android:thicknessratio floating point, the width ratio of the ring to represent the thickness of the ring, the default is 9, indicating that the ring thickness is the width of the ring divided by 9, the value will be android:thickness overwritten
• Android:uselevel is generally false, otherwise the ring cannot be displayed and is set to true only when used as levellistdrawable

The first figure only adds solid; the second figure adds only gradient, the type is sweep, the third figure adds only the stroke, and the fourth figure adds the gradient and stroke two features.
The following is the code for the fourth figure:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android= "http://schemas.android.com/apk/res/ Android "android:innerradiusratio=" 3 "android:shape=  "ring" android:thicknessratio= "9" android: Uselevel= "false" > <gradient android: Endcolor= "#2F90BD" android:startcolor= "#FFFFFF" android:type= "sweep" /> <stroke android:width= "1DP" android:color= "@android: color/ Black "/></SHAPE>         

If you want this ring to spin up and become a usable progress bar, just wrap one more rotate element in the shape's outer layer.

<?xml version= "1.0" encoding= "Utf-8"?><rotateXmlns:android="Http://schemas.android.com/apk/res/android"android:fromdegrees= "0" android:pivotx= "50%" android:pivoty= "50%" android:todegrees= "1080.0" > <shape android:innerradiusratio= "3"  Android:shape= "ring" android:thicknessratio= "8" android:uselevel= "false" > <gradient Span class= "NA" >android:endcolor= "#2F90BD" android:startcolor= " #FFFFFF "android:type=" sweep "/> </shape ></ROTATE>            

End

Shape is here, and the code is already on GitHub, address:
Https://github.com/keeganlee/kstyle.git

Go Android-style development: Shape article