A summary of shape usage in Android

In the development of Android programs, we often use shape to define a variety of shapes, first of all we understand what the shape of the label below, it means:

Solid: Fill
Android:color Specify the color of the fill

gradient: Gradient
android: StartColor and Android:endcolor are start and end colors respectively,

android:angle is the gradient angle, must be an integer multiple of 45
Another gradient default mode for Android : type= "Linear", or linear gradient,

You can specify a gradient as a radial gradient, android:type= "radial", and a radial gradient that requires a radius of android:gradientradius= "50".

Angle value corresponding to the location

Stroke : Stroke
android:width= The width of the "2DP" stroke, android:color the color of the stroke.
we can also make the stroke into a dashed form, set in the following way:
android:dashwidth= "5DP"
android:dashgap= "3DP"
where android:dashwidth represents the width of a horizontal line such as '-', android:dashgap represents the distance separated by

Corners: Rounded Corners
The Android:radius is the radian of the angle, and the larger the value the greater the rounded.
We can also set the four corners to different angles,

The RADIUS attribute is not valid if you set five properties at the same time

android:radius= "20DP" sets the radius of Four Corners

android:topleftradius= "20DP" sets the radius of the upper-left corner
Android:toprightradius= "20DP" set the radius of the upper-right corner
android:bottomleftradius= "20DP" setting the radius of the lower right corner
Android:bottomrightradius= "20DP" set the radius of the lower left corner

padding: Interval
You can set the interval between the top and left four directions

Here we look at a simple small example, Shapdemo, define two XML files under the Drawable folder first:

The contents of Button_bg.xml are as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android" >    <!--    <solid android:color= "#ff9d77"/> <!--define the color value of the fill--    <!--stroke--    <stroke        android:width= "2DP"        android:color= "#fad3cf"/> <!--defines the width of the stroke and the color value of the stroke--><!--rounded corners-- >    <corners        android:bottomleftradius= "5DP"        android:bottomrightradius= "5DP"        android: topleftradius= "5DP"        android:toprightradius= "5DP"/> <!--set radius of Four Corners-  <!--interval--    < padding        android:bottom= "10DP"        android:left= "10DP"        android:right= "10DP"        android:top= "10DP"/ > <!--set the interval in each direction--></shape>

The contents of Button_pressed_bg.xml are as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android" >    <!--gradients--    <gradient        android:endcolor= "#FFFFFF"        android:gradientradius=        " Android:startcolor= "#ff8c00"        android:type= "radial"/>        <!--strokes--    <stroke        android: dashgap= "3DP"        android:dashwidth= "5DP"        android:width= "2DP"        android:color= "#dcdcdc"/>        < !--rounded Corners-    <corners android:radius= "5DP"/>    <!--interval--    <padding        Android : bottom= "10DP"        android:left= "10DP"        android:right= "10DP"        android:top= "10DP"/></shape>

Here is a point where the dash parameter is set in the stroke, making the edges of the graphic a dashed line

Under the Drawable folder, add a Button.xml file that reads as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/button_pressed_bg "android:state_pressed=" true "></ item>    <item android:drawable= "@drawable/button_bg" ></item></selector>

The meaning of this file has been mentioned before, normal (normal) case shows BUTTON_BG, by press (pressed) the case is displayed BUTTON_PRESSED_BG.

Let's take a look at the contents of the Activity_main.xml in the layout directory:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent " >    <button        android:layout_width= "wrap_content"        android:layout_height= "Wrap_content        " android:background= "@drawable/button"        android:text= "Testshapebutton"/></relativelayout>

Specify background directly as Button.xml under the Drawable folder.

The program runs as follows:

Attached example Project source code:

Use shape to customize shapes in Android