Use shape drawable in Android to implement the custom Interface

Official documentation on shape:

Http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

In Android, shape is often used to define some display attributes of the control. The following describes all attributes of shape and a simple example:

 

<?xml version="1.0" encoding="utf-8"?><shape        xmlns:android="http://schemas.android.com/apk/res/android"        android:shape=["rectangle" | "oval" | "line" | "ring"] >        <corners                android:radius="integer"                android:topLeftRadius="integer"                android:topRightRadius="integer"                android:bottomLeftRadius="integer"                android:bottomRightRadius="integer" />        <gradient                android:angle="integer"                android:centerX="integer"                android:centerY="integer"                android:centerColor="integer"                android:endColor="color"                android:gradientRadius="integer"                android:startColor="color"                android:type=["linear" | "radial" | "sweep"]                android:useLevel=["true" | "false"] />        <padding                android:left="integer"                android:top="integer"                android:right="integer"                android:bottom="integer" />        <size                android:width="integer"                android:height="integer" />        <solid                android:color="color" />       <stroke              android:width="integer"                android:color="color"                android:dashWidth="integer"                android:dashGap="integer" /></shape>

Below is a small example:

The content of the Main. xml file is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <item Android: state_pressed = "true"> <shape> <! -- Gradient --> <gradient Android: endcolor = "# ffffff" Android: gradientradius = "50" Android: startcolor = "# ff8c00" Android: TYPE = "RADIAL"/> <! -- Stroke --> <stroke Android: dashgap = "3dp" Android: dashwidth = "5dp" Android: width = "2dp" Android: color = "# dcdcdc"/> <! -- Rounded corner --> <corners Android: radius = "2dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> <item Android: state_focused = "true"> <shape> <gradient Android: angle = "270" Android: endcolor = "# ffc2b7" Android: startcolor = "# ffc2b7"/> <stroke Android: width = "2dp" Android: color = "# dcdcdc"/> <corners Android: radius = "2dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> <shape> <solid Android: color = "# ff9d77"/> <stroke Android: width = "2dp" Android: color = "# fad3cf"/> <corners Android: bottomleftradius = "5dp" Android: bottomrightradius = "0dp" Android: topleftradius = "0dp" Android: toprightradius = "5dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> </selector>

 

The content of button_selector.xml is as follows:

 

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <item Android: state_pressed = "true"> <shape> <! -- Gradient --> <gradient Android: endcolor = "# ffffff" Android: gradientradius = "50" Android: startcolor = "# ff8c00" Android: TYPE = "RADIAL"/> <! -- Stroke --> <stroke Android: dashgap = "3dp" Android: dashwidth = "5dp" Android: width = "2dp" Android: color = "# dcdcdc"/> <! -- Rounded corner --> <corners Android: radius = "2dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> <item Android: state_focused = "true"> <shape> <gradient Android: angle = "270" Android: endcolor = "# ffc2b7" Android: startcolor = "# ffc2b7"/> <stroke Android: width = "2dp" Android: color = "# dcdcdc"/> <corners Android: radius = "2dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> <shape> <solid Android: color = "# ff9d77"/> <stroke Android: width = "2dp" Android: color = "# fad3cf"/> <corners Android: bottomleftradius = "5dp" Android: bottomrightradius = "0dp" Android: topleftradius = "0dp" Android: toprightradius = "5dp"/> <padding Android: Bottom = "10dp" Android: Left = "10dp" Android: Right = "10dp" Android: top = "10dp"/> </shape> </item> </selector>

 

As follows:

General status:

 

Press status: