Android shape (e.g. custom button)

Shape

Preface: Sometimes go to draw some button's style to show in the UI, the main use is shape

Take a look at the code first:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:shape= "Rectangle" >4 5     <SolidAndroid:color= "#FFF0F5" />6 7     <Stroke8         Android:width= "2DP"9 Android:color= "#6A5ACD" />Ten  One     <CornersAndroid:radius= "16DP" /> A  -     <Gradient -         Android:angle= "+" the Android:endcolor= "#B0E0E6" - Android:startcolor= "#000080" - Android:type= "Linear" > -     </Gradient> +  -     <padding +         Android:left= "50DP" A Android:top= "50DP" /> at  - </Shape>

1)Solid: solid, is the meaning of filling
　　android:color Specifies the color of the fill

2)gradient: Gradient
Android:startcolor and Android:endcolor are start and end colors respectively, Ndroid:angle is the gradient angle and must be an integer multiple of 45 .
In addition, the default mode of the gradient is android:type= "linear", that is, linear gradient, you can specify the gradient to radial gradient, android:type= "radial", radial gradient needs to specify the radius android:gradientradius= "50".

3)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

4)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 angles to different angles by:
<corners
android:toprightradius= "20DP" upper right corner
android:bottomleftradius= "20DP" lower right corner
android:topleftradius= "1DP" upper left corner
android:bottomrightradius= "0DP" lower left corner
/>
Here's a place to be aware thatBottomleftradius is the lower-right corner, not the lower -left corner,

5)padding: Interval
is the distance from the border within the contents of the box

6) Here is an example to illustrate :

When the button is not clicked it is this style: The style that is clicked is the time:

Under the Drawable folder Default_shape.xml This is the style when the button is not clicked:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:shape= "Rectangle" >4 5     <SolidAndroid:color= "#FFF0F5" />6 7     <Stroke8         Android:width= "2DP"9 Android:color= "#6A5ACD" />Ten  One     <CornersAndroid:radius= "16DP" /> A  -     <Gradient -         Android:angle= "+" the Android:endcolor= "#B0E0E6" - Android:startcolor= "#000080" - Android:type= "Linear" > -     </Gradient> +  -     <padding +         Android:left= "50DP" A Android:top= "50DP" /> at  - </Shape>

Drawable folder under Pressed_shape.xml This is the style when the button is clicked:

<?XML version= "1.0" encoding= "Utf-8"?><Shapexmlns:android= "Http://schemas.android.com/apk/res/android"Android:shape= "Rectangle" >    <!--the color of the fill -    <SolidAndroid:color= "#d1d1d1" />    <!--Border -    <StrokeAndroid:width= "2DP"Android:color= "#FFB6C1" />    <!--defined as rounded corners. -    <CornersAndroid:radius= "30DP" />    <GradientAndroid:endcolor= "#F5FFFA"Android:startcolor= "#FFB6C1"Android:type= "Linear" >    </Gradient></Shape>

drawable The selector XML file in the button, Btn_style.xml:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">3 4     <Itemandroid:drawable= "@drawable/pressed_shape"android:state_pressed= "true"></Item>5     <Itemandroid:drawable= "@drawable/default_shape"></Item>6 7 </selector>

XML file for activity:

1 <LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"2 Xmlns:tools= "Http://schemas.android.com/tools"3 Android:layout_width= "Match_parent"4 Android:layout_height= "Match_parent"5 android:gravity= "Center"6 android:orientation= "vertical"7 Tools:context=". Mainactivity " >8 9     <ButtonTen         Android:id= "@+id/btn" One Android:layout_width= "150DP" A Android:layout_height= "150DP" - Android:background= "@drawable/btn_style" - Android:text= "Change Shape" the Android:textcolor= "@drawable/text_style" /> -  - </LinearLayout>

The main program is on it, and then you run the program to see the previous effect.

Source code Download: Source code