Examples of Android selector and shape usage _android

Shape and selector are often used in Android UI design, such as we want to customize a fillet button, click on the button some effect changes, we need to use shape and selector. It can be said that the role of shape and selector in beautifying the control is essential.

1:selector

The drawable item can have the following properties:

Android:drawable= "@[package:]drawable/drawable_resource"
Android:state_pressed=["true" | "False"]
Android:state_focused=["true" | "False"]
Android:state_selected=["true" | "False"]
Android:state_active=["true" | "False"]
Android:state_checkable=["true" | "False"]
Android:state_checked=["true" | "False"]
Android:state_enabled=["true" | "False"]
Android:state_window_focused=["true" | "False"]

 <?xml version= "1.0" encoding= "Utf-8"?> <selector "xmlns:android=" Schemas.android.com/apk/res/android "> <item android:state_enabled=" true "android:state_checked=" true " Android:state_pressed= "true" android:drawable= "@drawable/enabled_on_pressed"/> <item android:state_enabled= "True" android:state_checked= "false" android:state_pressed= "true" android:drawable= "@drawable/enabled_off_pressed "/> <item android:state_enabled=" true android:state_checked= "true" android:drawable= "@drawable/enabled_on"/ > <item android:state_enabled= "true" android:state_checked= "false" android:drawable= "@drawable/enabled_off"/ > <item android:state_enabled= "false" android:state_checked= "true" android:drawable= "@drawable/disabled_on"/ > <item android:state_enabled= "false" android:state_checked= "false" android:drawable= "@drawable/disabled_off "/> </selector> 

Item order is fastidious, the more detailed the conditions, it should be put to the front. For example, if you exchange 1, 2 lines and 3, 4 of the item, then pressed will never be able to trigger, because the item has been satisfied with the condition returned. Can be understood as an if statement in code.

2:shape

<shape> 
<!--solid--> 
<solid android:color= "#ff9d77"/> 
<!--gradient--> 
< Gradient 
android:startcolor= "#ff8c00" 
android:endcolor= "#FFFFFF" 
android:angle= "270"/> 
<!--stroke--> 
<stroke 
android:width= "2DP" 
android:color= "#dcdcdc"/> 
<!--rounded corners- > 
<corners 
android:radius= "2DP"/> 
<padding 
android:left= "10DP" 
android: top= "10DP" 
android:right= "10DP" 
android:bottom= "10DP"/> 

Solid: solid, is the meaning of filling
Android:color Specify the color of the fill
Gradient: Gradients

Android:startcolor and Android:endcolor are starting and ending colors respectively, Ndroid:angle is a gradient angle and must be an integer multiple of 45.

In addition, the default mode of the gradient is android:type= "linear", which is a linear gradient, you can specify that the gradient is a radial gradient, android:type= "radial", and the radial gradient needs to specify a radius of android:gradientradius= "50".

Stroke: Strokes

Android:width= the width of the "2DP" stroke, android:color the stroke color.

We can also make the stroke in the form of a dotted line, set in the following way:

Android:dashwidth= "5DP"
android:dashgap= "3DP"

Wherein Android:dashwidth represents '-' the width of such a horizontal line, android:dashgap the distance between them.

Corners: Rounded Corners

Android:radius is the angle of the radian, the greater the value of the more rounded corners.

We can also set the four angles to different angles by:

<corners 
android:toprightradius= "20DP" upper right corner
android:bottomleftradius= "20DP" right corner of
android: topleftradius= "1DP" upper left corner
android:bottomrightradius= "0DP" lower left corner
/>

Here is a place to note, Bottomleftradius is the lower right corner, rather than the lower left corner, this is a bit depressing, but does not affect the use, remember not to make a mistake on the line.
There are also online to see someone said set to 0DP invalid, but I found in the test is OK, I use 2.2, may fix the problem, if not valid then it can only be set to 1DP.

padding: Interval

Button_selector.xml:

<?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:startcol Or= "#ff8c00" android:endcolor= "#FFFFFF" android:type= "Radial" android:gradientradius= "/>" <!--stroke--> Stroke android:width= "2DP" android:color= "#dcdcdc" android:dashwidth= "5DP" android:dashgap= "3DP"/> <!--fillet-- 
> <corners android:radius= "2dp"/> <padding android:left= "10DP" android:top= "10DP" android:right= "10DP" android:bottom= "10DP"/> </shape> </item> <item android:state_focused= "true" > <shape> &L T;gradient android:startcolor= "#ffc2b7" android:endcolor= "#ffc2b7" android:angle= "270"/> <stroke, Android:widt H= "2DP" android:color= "#dcdcdc"/> <corners android:radius= "2DP"/> <padding android:left= "10DP" Android : top= "10DP" android:right= "10DP" android:bottom= "10DP"/> </shape> </item> <item> <shape> <solid android:color= "#ff9d77" > <stroke android:width= "2DP" android:color= "#fad3cf"/> <corners android:toprightradius= "5DP" android:b ottomleftradius= "5DP" android:topleftradius= "0DP" android:bottomrightradius= "0DP"/> <padding android:left= " 10DP "android:top=" 10DP "android:right=" 10DP "android:bottom=" 10DP "/> </shape> </item> </selector  >

The results of the operation are shown below:

General Status:

Get Focus Status:

Press the Status:

The above is a small set of examples to share with you on the use of Android selector and shape