Use shape to make gradients, borders, rounded corners, and more in Android

Before the shape of the time, do round corners, gradients and other effects are dependent on the picture effect; If you are unfamiliar with PS, it will take a lot of time to do the pictures alone.

Nonsense not to say, the summary of the contents of the record, we are not blogging, is to make a cloud note it.

Shape usage is similar to selector:

1. Create a new. xml file in the Res-drawable folder; (e.g. Btn_style.xml)

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Oval" >    <gradient        android:startcolor= "#1E90FF"        android:endcolor= "#EE82EE"        android:angle= "/>        <stroke         android:width=" 2DP "        android:color=" #FF8C00 "          android: Dashwidth= "5DP"         android:dashgap= "3DP"        />     </shape>

：

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"        Android:shape= "Rectangle" > <gradient android:startcolor= "#1E90FF" android:endcolor= "#EE82EE"        Android:angle= "android:centercolor=" #ffffff "/> <stroke android:width=" 2DP " Android:color= "#FF8C00" android:dashwidth= "5DP" android:dashgap= "0DP"/> <corne RS android:radius= "5DP" android:topleftradius= "5DP" android:toprightradius= "5DP" Android:bot        tomleftradius= "5DP" android:bottomrightradius= "5DP"/> <!--<padding android:left= "7DP" android:top= "7DP" android:right= "7DP" android:bottom= "7DP"/> <corners android:radius= "8DP"/&        Gt <solid android:color= "#80065e8d"/> <stroke android:dashgap= "0DP" android:width= "4DP" android:color= "@a Ndroid:color/white " />--></shape> 

：

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Ring"    android:innerradius= "40DP"     android:thickness= "1DP"    >    <gradient        android:startcolor= "#1E90FF"        android:endcolor= "#EE82EE"        android:angle= "135"         Android: Centercolor= "#ffffff"         android:type= "linear"        />        <stroke         android:width= "1DP"        Android:color= "#FF8C00"          />       <!--   <padding android:left= "7DP"        android:top= "7DP"        android:right= "7DP"        android:bottom= "7DP"/>    <corners android:radius= "8DP"/>        < Solid android:color= "#80065e8d"/>  <stroke    android:dashgap= "0DP"    android:width= "4DP"    Android:color= "@android: Color/white"/>--></shape>

：

Shape is used in combination with selector:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= "http://schemas.android.com/apk/res/ Android "> <item android:state_pressed=" true "> <shape> <!--gradients--&lt ; gradient android:startcolor= "#1E90FF" android:endcolor= "#EE82EE" android:angle= "Android:c" Entercolor= "#ffffff"/> <!--stroke--<stroke android:width= "2DP" Andro    Id:color= "#FF8C00" android:dashwidth= "5DP" android:dashgap= "0DP"/> <!--rounded corners--        <corners android:radius= "5DP" android:topleftradius= "5DP" android:toprightradius= "5DP"     android:bottomleftradius= "5DP" android:bottomrightradius= "5DP"/> </shape>        </item> <item android:state_focused= "true" > <shape> <!--gradient-- <gradient Android:starTcolor= "#1E90FF" android:endcolor= "#EE82EE" android:angle= "android:centercolor=" #ffffff "/ > <!--strokes-<stroke android:width= "2DP" android:color= "#FF8C00" a Ndroid:dashwidth= "5DP" android:dashgap= "0DP"/> <!--rounded corners--<corners Andro id:radius= "5DP" android:topleftradius= "5DP" android:toprightradius= "5DP" android:bottomleftradius= "5d P "android:bottomrightradius=" 5DP "/> </shape> </item> <item            > <shape> <!---<solid android:color= "#1e90ff"/> <!--strokes--<stroke android:width= "2DP" android:color= "#FF8C00" android:dashwidth  = "5DP" android:dashgap= "2DP"/> </shape> </item> </selector>

Effect:

2. Use the shape effect in the control;

android:background= "@drawable/btn_style"

3.shape Common function Introduction;

<shape    xmlns:android= "<a target=_blank href=" Http://schemas.android.com/apk/res/android " >http://schemas.android.com/apk/res/android</a> "    android:shape=" Rectangle "     >          <!--       gradient       android:startColor  color values    starting colors          android:endcolor    color value    End color         android: Centercolor int       gradient middle color, which is the color between the start and end colors         android: angle       int       Gradient angle (PS: When angle=0, the gradient is left-to-right. Then turn counterclockwise, when angle=90 is from bottom to top. Angle must be an integer multiple of 45)         android:type         ["Linear" | "Radial" | "Sweep"] Gradient type (value: Linear, radial, sweep)                              linear linear gradient, which is the default setting                              Radial Radioactive gradients, Centered on the start color.                              sweep scan line gradient.        android:uselevel   ["true" | FALSE] set to TRUE if you want to use the Levellistdrawable object. Set to True no gradient. False has gradient        Android:gradientradius integer     gradient radius. When android:type= " Radial "is not used. Using android:type= "Radial" alone will cause an error.        android:centerx      int        Relative position of X-point coordinates of the gradient center        android:centery     Integer        Gradient Center relative position of y-point coordinates    -->   <gradient         android:startcolor= "#1E90FF"         Android:endcolor = "#EE82EE"         "android:angle="          android:centercolor= "#ffffff"        />             <!--       round corners        android:radius      integer radius       android:topleftradius     integral type Upper-left corner radius       android:toprightradius    integer right corner radius      android: Bottomleftradius   Integer left corner radius      android:bottomrightradius   integer Right lower corner radius      -->     <corners          android:radius= "5DP"        android:topleftradius= "5DP"          android:toprightradius= "5DP"         android:bottomleftradius= "5DP"         android:bottomrightradius= "5DP"           />            <!--       padding, that is, the content-to-edge distance       android:left    integer left padding      android:  top     Integral top margin      android:right    integral right padding      Android:bottom   integer Bottom padding      -->     <padding           android:left= "10DP"          Android : top= "10DP"          android:right= "10DP"          android:bottom= "10DP"         />          <!--     size size      android:width   Integer width      android:height   integer height    -->    <size         android:width= "200DP"         android: height= "50DP"        />        <!--       Inner fill      android:color   color value fill Color    -->     <solid         android:color= "#1e90ff"         />         <!--       stroke        android:width    int   stroke width      android:color   color values   Stroke colors       android:dashwidth   integer   indicates that the style of the stroke is the width of the dashed line, and the value is 0 o'clock, which is expressed as solid. A value greater than 0 is dashed      android:dashGap    int   Indicates the interval between dashes when the stroke is dashed .    -- >    <stroke         android:width= "2DP"          android:color= "#FF8C00"           android: Dashwidth= "5DP"         android:dashgap= "0DP"         />         </shape>

Use shape to make gradients, borders, rounded corners, and more in Android