[Android UI] combination of shape and selector

Shapes and selector are often used in the Android UI design, such as when we want to customize a fillet button and click on the button to change some of the effects, we'll use shape and selector. It can be said that the role of shape and selector in beautifying controls is critical.

1.Shape
Brief introduction
Role: Geometric shapes defined in XML
Location: Name of the res/drawable/file. xml
The method used:
Java code: r.drawable. Name of the file
XML: android:background= "@drawable/File name"
Property:
<shape> android:shape=["Rectangle" | "Oval" | "Line" | "Ring"]
where Rectagle rectangle, oval oval, line horizontal straight, ring ring
<shape> Common properties of neutron nodes:
<gradient> gradients
Android:startcolor Start Color
Android:endcolor End Color
Android:angle gradient angle, 0 from top to bottom, 90 for left to right, and 45 for integer times by default to 0;
Android:type gradient Style liner linear gradient radial ring gradient sweep
< solid > Fill
Android:color the color of the fill
<stroke > Strokes
Android:width width of stroke
Android:color Color of strokes
Android:dashwidth = width of '-' horizontal line
Android:dashgap means the distance between the '-' horizontal lines
<corners > Rounded Corners
Android:radius the radius of the fillet is larger, the more rounded the corner
Android:toprightradius Right Upper corner radius
Android:bottomleftradius Corner radius of Right bottom corner
Android:topleftradius left Upper Corner radius
Android:bottomrightradius left Lower Corner radius

2.Selector
Brief introduction
Location: Name of the res/drawable/file. xml
The method used:
Java code: r.drawable. Name of the file
XML: android:background= "@drawable/File name"

<?XML version= "1.0" encoding= "Utf-8"?>    <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">  <!--background picture by default -   <Itemandroid:drawable= "@drawable/pic1" />     <!--background picture When there is no focus -   <Itemandroid:state_window_focused= "false"android:drawable= "@drawable/pic_blue"/>    <!--background picture When you get focus in non-touch mode and click -   <Itemandroid:state_focused= "true"android:state_pressed= "true"android:drawable= "@drawable/pic_red"/>  <!--background picture when clicked in touch mode -   <Itemandroid:state_focused= "false"android:state_pressed= "true"android:drawable= "@drawable/pic_pink"/>   <!--picture Background When selected -   <Itemandroid:state_selected= "true"android:drawable= "@drawable/pic_orange"/>    <!--picture background when getting focus -   <Itemandroid:state_focused= "true"android:drawable= "@drawable/pic_green"/>    </selector>

3:shape+selector Examples of integrated use

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_selected= "true">        <Shape>            <GradientAndroid:angle= "+"Android:endcolor= "#99BD4C"Android:startcolor= "#A5D245" />            <sizeAndroid:height= "60DP"Android:width= "320DP" />            <CornersAndroid:radius= "8DP" />        </Shape>    </Item>    <Itemandroid:state_pressed= "true">        <Shape>            <GradientAndroid:angle= "+"Android:endcolor= "#99BD4C"Android:startcolor= "#A5D245"/>            <sizeAndroid:height= "60DP"Android:width= "320DP" />            <CornersAndroid:radius= "8DP" />        </Shape>    </Item>    <Item>        <Shape>            <GradientAndroid:angle= "+"Android:endcolor= "#A8C3B0"Android:startcolor= "#C6CFCE"  />            <sizeAndroid:height= "60DP"Android:width= "320DP" />            <CornersAndroid:radius= "8DP" />        </Shape>    </Item></selector>