The UI to design the switch effect in Android

The final effect is as follows:

Specifically, the checkbox customization is implemented and the selection style is selected, and the menu item sets different backgrounds depending on the location.

First the overall layout file code:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:bac"
        Kground= "#DFE1E0" android:orientation= "vertical" > <linearlayout style= "@style/settingitemtop"
        android:background= "@drawable/setting_list_top" xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:tools= "Http://schemas.android.com/tools" android:layout_width= "Match_parent" Android:layout_heigh t= "wrap_content" android:orientation= "horizontal" > <textview style= "@style/mysetting Text "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android : text= "open notification"/> <checkbox style= "@style/mycheckbox" Android:layout_wi Dth= "Wrap_content" Android:layout_height= "Wrap_content"/> </LinearLayout> <linearlayout style= "@style/settingitemmiddle "Android:layout_width=" match_parent "android:layout_height=" wrap_content "android:orientation=" H Orizontal "> <textview style=" @style/mysettingtext "android:layout_width=" Wrap_cont Ent "android:layout_height=" wrap_content "android:text=" Open ringtones/> <chec Kbox style= "@style/mycheckbox" android:layout_width= "Wrap_content" Android:layout_heig
        ht= "Wrap_content"/> </LinearLayout> <linearlayout style= "@style/settingitembottom" Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "Horiz" Ontal "> <textview style=" @style/mysettingtext "android:layout_width=" wrap_content "Android:layout_height= "Wrap_content" android:text= "open Vibration"/> <checkbox style= "@s"  
    Tyle/mycheckbox "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "/>" </LinearLayout> </LinearLayout>

Noted that:

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

style= "@style/mysettingtext"

This sentence, here with the Style.xml this file to control the style. Android in actual development, there will be many times the attributes of some parts will be repeated, if each control to separate these attributes individually input, That would be inefficient. You can add duplicate code to style.xml and set it to a style that you use to refer to the style. style= "@style/mysettingtext" is the property of the text, the code reads as follows:

<style name= "Mysettingtext" >  
        <item name= "Android:layout_margin" >10dp</item>  
        <item Name= "Android:layout_weight" >6</item>  
</style>

Only two properties are used here. The development can be modified according to the actual needs. The text of each set item does not need to be added again, so refer to the style.

The checkbox style customization uses the selector.

style= "@style/mycheckbox"

The corresponding code for this sentence:

<style name= "MyCheckBox" parent= "@android: Style/widget.compoundbutton.checkbox" >  
        <item name= "Android : Button "> @drawable/check</item>  
        <item name=" Android:layout_margin ">10dp</item>  
        <item name= "Android:layout_weight" >1</item>   
</style>

Take note of this sentence:

<item name= "Android:button" > @drawable/check</item>

The selector custom style is used here.

Create a check (custom) XML file under Res/drawable with the following code:

<?xml version= "1.0" encoding= "UTF-8"?> <selector xmlns:android=  
"http://schemas.android.com/apk/res/" Android ">  
  <item android:state_checked=" true "android:drawable=" @drawable/on "/>  
  <item android: State_checked= "false" android:drawable= "@drawable/off"/>  
</selector>

which

@drawable/on is the image of the checkbox when selected, @drawable/off vice versa.

Also note that the first item in the menu is rounded, the middle of the four corners are square, the last one for the lower rounded corners, this is through the setting of different background pictures to achieve, the specific table.