Use of selector in Android

First method (highly recommended)

Methods: Selector Do the mask, the original image do background.

When we make the button, we often need to use two images to achieve the style of button click and normal state, this need to provide two kinds of images, and there are more than one set of pictures at each resolution, greatly increasing the size of the APK.

We want these two pictures to be one, and we can achieve two or more states, how to do it? We first set up a circular selector, which is normally completely transparent, and the opacity becomes smaller after pressing.

Normal_bg_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 android:shape=" Oval ">            <solid Android:color= "#21000000"/>        </shape>    </item>    <item>        <shape android: Shape= "Oval" >            <solid android:color= "#00000000"/>        </shape>    </item></selector >

Then just ask the artist to take a picture, like this one:

The key step, now we need to take the selector file as a mask, and then use the blue icon above as BG, put in a ImageButton:

<imagebutton        android:layout_width= "100DP"        android:layout_height= "100DP"               android:src= "@ Drawable/normal_bg_selector "        android:background=" @drawable/blue_btn_icon "             />

Finally, just adjust the next padding, if you need a rectangular picture, just follow the above method to create a rectangular matte. If your company uses the rounded rectangle, ask the designer directly to the standard of a fillet, then create a selector file. The following is the simplest prototype and a rectangular matte file:

Normal_oval_mask_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 android:shape=" Oval ">            <solid Android:color= "#21000000"/>        </shape>    </item>    <item>        <shape android: Shape= "Oval" >            <solid android:color= "#00000000"/>        </shape>    </item></ Selector>

Normal_rectangle_mask_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 android:shape=" Rectangle ">            < Solid android:color= "#21000000"/>        </shape>    </item>    <item>        <shape Android : shape= "Rectangle" >            <solid android:color= "#00000000"/>        </shape>    </item></ Selector>

Second method (not recommended)

Of course we have another way to achieve this effect, using Layer-list. First put a selector mask, and then overlay a button's icon underneath the mask. This completes the style of button press.

Blue_btn_selector_layerlist.xml

<?xml version= "1.0" encoding= "Utf-8"? ><layer-list   xmlns:android= "Http://schemas.android.com/apk/res /android ">        <item android:drawable=" @drawable/blue_btn_icon "/>        <item android:drawable=" @ Drawable/blue_btn_mask_shape "/>    

Now that we have the normal style of the button and the style of the button press, we can create a selector:

Blue_button_bg_selector.xml

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item        android:state_pressed=" true "        android:drawable=" @drawable/blue_btn_selector_ Layerlist "/>    <item        android:drawable=" @drawable/blue_btn_icon "/></selector>

Finally, just set the Blue_button_bg_selector.xml on the button's background. The second method is obviously more cumbersome, need to build a file, not modular.

November 05, 2015 20:07:07 23446 people read Comments (5) favorite reports Classification:Android Basics (+)

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Discussion QQ Group: 372702757 http://blog.csdn.net/wenwen091100304/article/details/49667293

Directory (?) [+]

Introduction

Selector The Chinese meaning selector, which is often used as a background for components in Android, has the advantage of eliminating the use of code to control the transformation of a component's different background colors or images in different states. Very convenient to use.

Definition of Selector

Selector is the state list (statelist), which is divided into two types, a color-selector and a drawable-selector.

Color-selector

Color-selector is a list of color states that can be used with color, and colors change as the component States. The location of the file is stored in

/res/color/filename.xml

• 1

The use in Java is: R.color.filename
The use in XML is:@[package]color/filename

Grammar

<?xmlversion="1.0" encoding="Utf-8"? ><selector xmlns:android="Http://schemas.android.com/apk/res/android" > <Item android:color="Hex_color"Color value, #RGB, $ARGB, #RRGGBB, #AARRGGBB android:state_pressed=["True" |"False"]//whether to touch Android:state_focused=[ "true" |  "false" ]//whether to get focus android:state_selected=[  "true" |  "false" ]//whether it is State android:state_checkable=[  "true" |  "false" ]//optional android:state_checked=[  "true" |  "false" ]//whether android:state_enabled=[is selected  "true" |  "false" ]//whether Android:state_window_focused=[" true "|  "false"]/>//whether the window focuses </selector>    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

Example

Create a new Test_color_selector.xml under the/res/color/folder

<?xml version= "1.0" encoding= "Utf-8"?><SelectorXmlns:android="Http://schemas.android.com/apk/res/android" ><item android:state_pressed=< Span class= "Hljs-value" > "true" android:color= "#ffff0000"/ > <!--pressed--<item Span class= "Hljs-attribute" >android:state_focused= "true"  Android:color= "#ff0000ff"/> <!--focused--<item android:color=  "#ff000000"/> <!--Default--- </SELECTOR>         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

Call:

    <Button        android:id="@+id/bt_about"        style="@style/Button_style"        android:layout_width="250dp" android:layout_height="50dp" android:layout_margin="5dp" android:textColor="@color/test_color_selector" android:text="@string/about" />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

Effect: Notice the change of font color

Drawable-selector

Drawable-selector is a list of background chart states that can be used as a picture, and the background will vary depending on the state of the component. Files are stored in

/res/drawable/filename.xml

• 1

Called in Java: R.drawable.filename
Called in XML: @[package:]drawable/filename

Grammar

<?xmlversion="1.0" encoding="Utf-8"? ><selector xmlns:android="Http://schemas.android.com/apk/res/android" android:constantsize=["True" |"False"]//drawable is the size of the state change, true indicates a change, false means no transformation, the default is False android:dither=["True" |"False"]//when the bitmap is not the same as the pixel configuration of the screen (for example, a bitmap with a ARGB of 8888 and an RGB 555 screen), the color (dither) is self-recursive. When set to False, the non-recursive color. Default True android:variablepadding=["True" |"False"]>//the internal margin is changed, default false <Item android:drawable="@[package:]drawable/drawable_resource"//Picture Resources android:state_pressed=["True" |"False"]//whether to touch android:state_focused=["True" |"False"]//whether to get to focus android:state_hovered=["True" |"False"]//cursor passed Android:state_selected=[ "true" | " false "]//check android:state_checkable=[ "false" ]//can be checked android:state_checked=[  "true" |  "false" ]//check android:state_enabled=[  "true" |  "false" ]//available android:state_activated=[  "true" |  "false" ]//whether to activate Android:state_window_focused=[" true "|  "false"]/>//the window in which to get focus </selector>    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

Example

<?xml version= "1.0" encoding= "Utf-8"?><SelectorXmlns:android="Http://schemas.android.com/apk/res/android" ><ItemAndroid:state_selected="True"android:drawable= "@drawable/button_bg_press"/> <item android:state_focused= "true" android:drawable= "@drawable/ Button_bg_press "/> <item  Android:state_pressed= "true" android:drawable= "@drawable/button_bg_press"/> <item android:drawable= "@drawable/button_bg_normol"/></SELECTOR>         

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Call:

 <Button        android:id="@+id/bt_about"        style="@style/Button_style"        android:background="@drawable/button_selector" android:layout_width="250dp" android:layout_height="50dp" android:layout_margin="5dp" android:textColor="@color/test_color_selector" android:text="@string/about" />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Effect: note Button background change

Summarize

Selector is a good way to achieve changes in the background and color of the view state, you can save a lot of logic code, after mastering can save a lot of Java code, but also to write some beautiful UI.

Use of selector in Android