Android Development Tutorial: 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 Introduction Role: Geometry shape defined in XML location: The name of the res/drawable/file. Xml used by: Java code: r.drawable. File name xml: android:background= "@ drawable/file Name "property:<shape>  android:shape=[" Rectangle "| "Oval" | "Line" | "Ring"] where rectagle rectangles, oval ellipses, line horizontal lines, Ring Ring <shape> Neutron node Common Properties:<gradient>   gradient Android:startcolor   Start color android:endcolor   End color             android:angle   gradient angle, 0 top to bottom, 90 represents left-to-right, integer multiples of 45, default to 0;android:type   gradient style liner linear gradient radial ring gradient sweep<solid >   Fill android:color   Fill Color <stroke > Stroke android:width Stroke width android:color stroke color android:dashwidth expression '-' the width of the horizontal line Android:dashgap '-' Distance between horizontal lines <corners > Fillet android:radius   fillet radius value Larger angle more rounded android:toprightradius   Right top corner radius android: Bottomleftradius the corner radius of the right corner Android:topleftradius the upper left corner radius of Android:bottomrightradius 2. Selector Profile Location: The name of the res/drawable/file. Xml using the method: 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 picture-    <item android:drawable= "@drawable/pic1"/>      <!--background picture without focus--   <item    android:state_window_focused= "false"         android: drawable= "@drawable/pic_blue"     />     <!--get focus in non-touch mode and click on the background picture--   <item    android:state_focused= "true"     android:state_pressed= "true"      android:drawable= "@drawable/pic_red"     />   <!-- Background picture when clicked in touch mode-   <item    android:state_focused= "false"      Android:state_pressed= "true"      android:drawable= "@drawable/pic_pink"     / >    <!--picture Background When selected--   <item    android:state_selected= "true"     android:drawable= "@drawable/pic_orange"     />     <!-- Picture background when getting focus-   <item    android:state_focused= "true"     android: drawable= "@drawable/pic_green"     />     </selector>  The first example: a rounded button second example: Shape+selector integrated use example 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= "android:endcolor=" #99BD4C "                 android:startcolor= "#A5D245"/>             <size android:h eight= "60DP" android:width= "320DP"/>             <corners android:radius= "8DP "/>         </shape>     </item>     <item Android:state_pressed= "true" >         <shape>             <gradient android:angle= "android:endcolor=" #99BD4C "                 android:startcolor= "#A5D245"/>             <size android: height= "60DP" android:width= "320DP"/>             <corners android:radius= " 8DP "/>         </shape>     </item>     <item >         <shape>             <gradient android:a Ngle= "android:endcolor=" #A8C3B0 "                 android:startcolor=" #C6CFCE " />         &NBSP;   <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:o rientation= "Horizontal"       android:layout_width= "fill_parent"        android:layout_height= "Wrap_content"      android:background= "@drawable/selector"      >                         <imageview  & nbsp;        android:id= "@+id/img"          android:layout_width= " Wrap_content "          android:layout_height=" Wrap_content "                     android:layout_gravity= "center_vertical" & nbsp;        android:layout_marginleft= "20DP"                & nbsp />                                &NBSP ;   <textview               android:text= "data"       & nbsp       android:id= ' @+id/title '              android:layout_width= ' Fill_ Parent "              android:layout_height=" Wrap_content "    & nbsp         android:gravity= "center_vertical"                Andro id:layout_marginleft= "20DP"               android:layout_margintop= "20DP"               android:textsize= "14SP"                                       android:textstyle= "bold"        &N Bsp     android:textcolor= "@color/black"                     &NBSP ;                >         </TextView>   &NBS P        </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"    &nbSp     >                    ,         &NBSP ;           <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:drawselectorontop=" false "           >          </ListView>   </linearlayout> colors.xml<?xml Version= "1.0" encoding= "Utf-8"?> <resources>   &nBsp <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 in T[]{R.ID.TITLE,R.ID.IMG});          List.setadapter (adapter);             }      Private arraylist

Android Development Tutorial: Combination of shape and selector