Android development Tutorial: combining shape and Selector

Shape and Selector are frequently used in Android UI design. For example, if we want to customize a rounded corner button and click the button to change some effects, we need to use shape and selector. It can be said that shape and Selector play a vital role in beautifying controls. 1. Introduction to shape: Location of the geometric shape defined in XML: Res/drawable/file name. How to use XML: Java Code Medium: R. drawable. file Name XML: Android: Background = "@ drawable/file name" Property: <shape> Android: shape = ["rectangle" | "Oval" | "line" | "ring"] The rectagle rectangle, oval ellipse, and line horizontal line, ring <shape> common attributes of neutron nodes: <gradient> gradient Android: startcolor starting color Android: endcolor ending color Android: angle gradient angle, 0 from top to bottom, 90 indicates that the value is from left to right, And the integer multiple of the value is 45 by default. Android: Type gradient style liner linear gradient Radial Ring gradient sweep <solid> fills Android: color filled color <stroke> stroke Android: width stroke width Android: Color Stroke color Android: dashwidth indicates the width of '-' horizontal line Android: dashgap indicates the distance between '-' horizontal lines <corners> rounded corner Android: larger radius: Android: toprightradius upper right corner radius Android: bottomleftradius lower right corner radius Android: topleftradius upper left corner radius Android: bottomrightradius lower left corner radius 2. selector introduction location: Res/drawable/file name. how to use XML: in Java code: R. drawable. file Name in XML: Android: Background = "@ drawable/file name" <? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <! -- Default background image --> <item Android: drawable = "@ drawable/pic1"/> <! -- Background image without focus --> <item Android: state_window_focused = "false" Android: drawable = "@ drawable/pic_blue"/> <! -- Background image when the focus is obtained in non-touch mode and clicked --> <item Android: state_focused = "true" Android: state_pressed = "true" Android: drawable = "@ drawable/pic_red"/> <! -- Background image when you click in touch mode --> <item Android: state_focused = "false" Android: state_pressed = "true" Android: drawable = "@ drawable/pic_pink"/> <! -- Background of the selected image --> <item Android: state_selected = "true" Android: drawable = "@ drawable/pic_orange"/> <! -- Image background when getting focus --> <item Android: state_focused = "true" Android: drawable = "@ drawable/pic_green"/> </selector> Example 1: the second example of the button with rounded corners: the example of comprehensive use of shape + selector the beautiful listviewselector. XML <? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <item Android: state_selected = "true"> <shape> <gradient Android: angle = "270" Android: endcolor = "# 99bd4c" Android: startcolor = "# a5d245"/> <size Android: Height = "60dp" Android: width = "320dp"/> <corners Android: radius = "8dp"/> </shape> </item> <item Android: state_pressed = "true"> <shape> <gradient Android: angle = "270" Android: endcolor = "# 99bd4c "Android: startcolor =" # a5d245 "/> <size Android: Height =" 60dp "Android: width =" 320dp "/> <corners Android: radius = "8dp"/> </shape> </item> <shape> <gradient Android: angle = "270" Android: endcolor = "# a8c3b0" Android: startcolor = "# c6cfce"/> <size Android: Height = "60dp" Android: width = "320dp"/> <corners Android: radius = "8dp"/> </shape> </item> </selector> list_item.xml <? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "horizontal" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: background = "@ drawable/selector"> <imageview Android: Id = "@ + ID/IMG" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "center_vertical" Android: layout_marginleft = "20dp" /> <Textview Android: text = "data" Android: Id = "@ + ID/Title" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: gravity = "center_vertical" Android: layout_marginleft = "20dp" Android: layout_margintop = "20dp" Android: textsize = "14sp" Android: textstyle = "bold" Android: textcolor = "@ color/Black"> </textview> </linearlayout> main. XML <? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: background = "#253853"> <listview Android: Id = "@ + ID/List" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: cachecolorhint = "#00000000" Android: divider = "#2a4562" Android: dividerheight = "3px "Android: listselector =" #264365 "Android: drawselectings Top =" false "> </listview> </linearlayout> colors. xml <? XML version = "1.0" encoding = "UTF-8"?> <Resources> <color name = "white"> # ffffffff </color> <color name = "Transparency"> #00000000 </color> <color name = "title_bg"> # 1c86ee </color> <color name = "end_color"> # a0cfef83 </color> <color name = "black"> #464646 </color> </resources> mainactivity. xmlpackage COM. lingdududu. customlist; import Java. util. arraylist; import Java. util. hashmap; import XB. customlist. r; import android. r. array; import android. app. activity; import android. OS. bundle; import android. widget. arrayadapter; import android. widget. listview; import android. widget. simpleadapter; public class mainactivity extends activity {listview list; string data [] = new string [] {"China", "UK", "USA", "Japan ", "German", "Canada", "ET", "narotu"};/** called when the activity is first created. * // @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); List = (listview) findviewbyid (R. id. list); simpleadapter adapter = new simpleadapter (this, getdata (), R. layout. list_item, new string [] {"title", "IMG"}, new int [] {R. id. title, R. id. IMG}); list. setadapter (adapter);} private arraylist