On the use of shape in Android development

Introduction

In Android development, we use images to show the effect, and today I'll go through the development of a simple UI using shape under Android. On the one hand these are the basis of Android development, on the other hand, this knowledge can reduce the use of images to a certain extent, reduce the volume of the app. Let me show you the details of shape.

Note: In general, 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.

Shape-Supported type shapes

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

I'll start here

1, Rectangle

This type should be the most type we use, and the background of some controls and the background of the layout can be used to accomplish this.

Let's look at the detailed introduction:

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 gradient type
    • linear linear gradient, default gradient type
    • radial radial gradient, when set, Android:gradientradius must also set
    • sweep Scan gradient
  • android:startcolor gradient start color
  • android:endcolor gradient End color
  • android:centercolor color in the middle of the gradient
  • Android:angle The angle of the gradient, the linear gradient is valid, must be a multiple of 45, 0 means left to right, and 90 is from bottom to top
  The relative x-coordinate of the
  • android:centerx Gradient Center, which is only valid when the gradient is emitted, is between 0.0 and 1.0, and defaults to 0.5, indicating that it is in the middle of the room
  The relative x-coordinate of the
  • android:centery Gradient Center, which is only valid when the gradient is emitted, is between 0.0 and 1.0, and defaults to 0.5, indicating that it is in the middle of the room
  • 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

Let's look at an example:

1 <!--android:shape Specifies the shape type, which defaults to rectangle -2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:shape= "Rectangle">4     <!--solid Specifies the fill color of the shape, only android:color one property -5     <SolidAndroid:color= "#4097e6" />6     <!--padding to set the spacing of content areas from boundaries -7     <padding8         Android:bottom= "15DP"9 Android:left= "15DP"Ten Android:right= "15DP" One Android:top= "15DP" /> A  -     <!--Gradient Settings - -     <Gradient the         Android:endcolor= "#4097e6" - Android:startcolor= "#FFFFFF" - Android:angle= "+" - Android:type= "Linear" /> +  -     <!--Corners setting rounded corners, only for rectangle + when the value is large, it becomes an arc edge shape such as >=200 A       - at     <CornersAndroid:radius= "15DP" /> -     <!--Stroke Set Stroke - -     <Stroke -         Android:width= "2DP" - Android:color= "#ff8900" - Android:dashgap= "4DP" in Android:dashwidth= "4DP" /> - </Shape>

As follows:

　　

2. 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:

　　Size: Set the shape's default sizes to set width and height

• android:width Width
• android:height Height

If you use a set ellipse such as TextView, size defaults to the width and height of the view.

Let's look at an example:

1 <!--Ellipse -2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:shape= "Oval">4 5     <!--to set the dimensions of a graphic6 However, the default is to get the width and height of the view -7     <sizeAndroid:width= "60DP"8 Android:height= "60DP" />9 Ten     <SolidAndroid:color= "#4097e6" /> One  A     <!--Gradient Effect - Note that the Gradientradius property value is used here. - only valid when type= "radial" the      - -     <Gradient -         Android:endcolor= "#4097e6" - Android:startcolor= "#FFFFFF" + Android:gradientradius= "50DP" - Android:type= "Radial"/> +  A </Shape>

As follows:

　　

3. Line

With shape we can also set the split line. But generally I use the line is direct view. By setting the stroke we can set the line style (color, dashed line, solid lines, etc.). Examples are as follows:

1 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"2 Android:shape= "line">3     <!--the actual displayed line -4     <Stroke5         Android:width= "1DP"6 Android:color= "#2F90BD"7 Android:dashgap= "2DP"8 Android:dashwidth= "4DP" />9     <!--the height of the shape -Ten     <sizeAndroid:height= "4DP" /> One </Shape>

Note: When drawing a line, there are a few things 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.

4. 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

Let's look at an example:

1 <!--Ring -2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:shape= "Ring"4 Android:innerradius= "100DP"5 android:thickness= "20DP"6 Android:uselevel= "false">7 8     <!--Fill Color -9     <SolidAndroid:color= "#4097e6" />Ten  One     <!--Fade Color - A     <Gradient -         Android:endcolor= "#4097e6" - Android:startcolor= "#FFFFFF" the Android:type= "Sweep" /> -  -     <!--The stroke gives the inner and outer circles a border - -     <Stroke +         Android:width= "1DP" - Android:color= "#ff8900" /> +  A </Shape>

As follows:

　　

Reference documents

http://keeganlee.me/post/android/20150830

http://blog.csdn.net/harvic880925/article/details/41850723

On the use of shape in Android development