Use selector and shape to implement rounded corner options

Recently, I was working on a project where the setting page requires the rounded corner option, similar to the setting page in the QQ browser. Not much nonsense. Let's take a look at the general effect:

To achieve this, you need to add four selector (single rounded corner option, rounded corner, middle corner, and bottom corner) and a shape (multiple rounded corner option outer boxes) to the drawable ).

Note:

1. If setonclicklistener is not processed in the code, addAndroid: clickable = "true"Attribute. Otherwise, clicking the button will have no effect.

2. Add linearlayout to the outer box of the rounded corner OptionAndroid: padding = "1dp"Attribute. Otherwise, the options in the box will cover the rounded corner and the external border will not be visible.

3. In the selector at or below the rounded corner, the angle of the rounded corner when the focal point is obtained is smaller than that of the default one, otherwise it will be a bit blank.

The following is the code time:

1. Single rounded corner option: option_setting_bg_full.xml

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <! -- When you click --> <item Android: state_pressed = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: radius = "5dp"/> <stroke Android: width = "1dp" Android: color = "# afafaf"/> </shape> </item> <! -- When getting focus --> <item Android: state_focused = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: radius = "5dp"/> <stroke Android: width = "1dp" Android: color = "# afafaf"/> </shape> </item> <! -- Default status --> <item> <shape> <solid Android: color = "@ color/mine_option_bg_nor"/> <corners Android: radius = "5dp"/> <stroke Android: width = "1dp" Android: color = "# afaf"/> </shape> </item> </selector>

2, Option box with multiple rounded corners: option_setting_bg_all.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <solid android:color="@color/mine_option_bg_nor" />    <corners         android:topLeftRadius="5dp"        android:topRightRadius="5dp"        android:bottomLeftRadius="5dp"        android:bottomRightRadius="5dp" />    <stroke        android:width="1dp"        android:color="#afafaf" /></shape>

3, Rounded corner: option_setting_bg_top.xml

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <! -- When you click --> <item Android: state_pressed = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: topleftradius = "4dp" Android: toprightradius = "4dp" Android: bottomleftradius = "0dp" Android: bottomrightradius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- When getting focus --> <item Android: state_focused = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: topleftradius = "4dp" Android: toprightradius = "4dp" Android: bottomleftradius = "0dp" Android: bottomrightradius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- Default status --> <item> <shape> <solid Android: color = "@ color/mine_option_bg_nor"/> <corners Android: topleftradius = "5dp" Android: toprightradius = "5dp" Android: bottomleftradius = "0dp" Android: bottomrightradius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> </selector>

4, Middle corner: option_setting_bg_center.xml

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <! -- When you click --> <item Android: state_pressed = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: radius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- When getting focus --> <item Android: state_focused = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: radius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- Default status --> <item> <shape> <solid Android: color = "@ color/mine_option_bg_nor"/> <corners Android: radius = "0dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> </selector>

5, Rounded corner: option_setting_bg_bottom.xml

<? XML version = "1.0" encoding = "UTF-8"?> <Selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <! -- When you click --> <item Android: state_pressed = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: bottomleftradius = "5dp" Android: bottomrightradius = "5dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- When getting focus --> <item Android: state_focused = "true"> <shape> <solid Android: color = "@ color/mine_option_bg_pre"/> <corners Android: bottomleftradius = "5dp" Android: bottomrightradius = "5dp"/> <stroke Android: width = "0dp" Android: color = "# afafaf"/> </shape> </item> <! -- Default status --> <item> <shape> <solid Android: color = "@ color/mine_option_bg_nor"/> <corners Android: bottomleftradius = "5dp" Android: bottomrightradius = "5dp"/> <stroke Android: width = "0dp" Android: color = "# afaf"/> </shape> </item> </selector>

Application in layout: layout. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: Background = "@ color/app_base_bg" Android: orientation = "vertical"> <relativelayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: layout_marginleft = "@ dimen/space_10" Android: layout_marginright = "@ dimen/space_10" Android: layout_margintop = "@ dimen/space_20" Android: Background = "@ drawable/option_setting_bg_full" Android: clickable = "true"> <imageview Android: id = "@ + ID/example" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_alignparentleft = "true" Android: layout_alignparentstart = "true" Android: layout_centervertical = "true" Android: layout_marginbottom = "@ dimen/space_20" Android: layout_marginend = "@ dimen/space_10" Android: layout_marginleft = "@ dimen/space_20" Android: layout_marginright = "@ dimen/space_10" Android: layout_marginstart = "@ dimen/space_20" Android: layout_margintop = "@ dimen/space_20" Android: contentdescription = "@ string/blank" Android: src = "@ drawable/setting_head_def"/> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: layout_centervertical = "true" Android: layout_marginbottom = "@ dimen/space_20" Android: layout_margintop = "@ dimen/space_20" Android: layout_toendof = "@ + ID/set_option_head_img" Android: layout_torightof = "@ + ID/set_option_head_img" Android: Orientation = "vertical"> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: TEXT = "single rounded corner option" Android: textcolor = "@ color/Black" Android: textsize = "@ dimen/text_size_15"/> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "there is only one corner button" Android: textcolor = "#666666" Android: textsize = "@ dimen/text_size_13"/> </linearlayout> <imageview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_alignparentend = "true: layout_alignparentright = "true" Android: layout_centervertical = "true" Android: contentdescription = "@ string/iv_cont_des_string" Android: src = "@ drawable/option_more"/> </relativelayout> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: layout_marginleft = "@ dimen/space_10" Android: layout_marginright = "@ dimen/space_10" Android: layout_margintop = "@ dimen/space_20" Android: Background = "@ drawable/secure" Android: clickable = "true" Android: Orientation = "vertical" Android: padding = "1dp"> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: background = "@ drawable/option_setting_bg_top" Android: baselinealigned = "false" Android: clickable = "true" Android: Orientation = "horizontal"> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "Start | center_vertical" Android: padding = "@ dimen/space_10" Android: text = "button 1" Android: textcolor = "@ color/Black" Android: textsize = "20sp"/> </linearlayout> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <imageview Android: layout_width = "wrap_content" Android: layout_height = "match_parent" Android: terminal = "End | center_vertical" Android: contentdescription = "@ string/iv_cont_des_string" Android: src = "@ drawable/option_more"/> </linearlayout> <view Android: layout_width = "match_parent" Android: layout_height = "1dp" Android: Background = "# cfcfcf"/> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: background = "@ drawable/option_setting_bg_center" Android: baselinealigned = "false" Android: clickable = "true" Android: Orientation = "horizontal"> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "Start | center_vertical" Android: padding = "@ dimen/space_10" Android: text = "button 2" Android: textcolor = "@ color/Black" Android: textsize = "20sp"/> </linearlayout> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <imageview Android: layout_width = "wrap_content" Android: layout_height = "match_parent" Android: terminal = "End | center_vertical" Android: contentdescription = "@ string/iv_cont_des_string" Android: src = "@ drawable/option_more"/> </linearlayout> <view Android: layout_width = "match_parent" Android: layout_height = "1dp" Android: Background = "# cfcfcf"/> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: background = "@ drawable/option_setting_bg_bottom" Android: baselinealigned = "false" Android: clickable = "true" Android: Orientation = "horizontal"> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "Start | center_vertical" Android: padding = "@ dimen/space_10" Android: text = "button 3" Android: textcolor = "@ color/Black" Android: textsize = "20sp"/> </linearlayout> <linearlayout Android: layout_width = "0dp" Android: layout_height = "match_parent" Android: layout_weight = "1" Android: Orientation = "vertical"> <imageview Android: layout_width = "wrap_content" Android: layout_height = "match_parent" Android: terminal = "End | center_vertical" Android: contentdescription = "@ string/iv_cont_des_string" Android: src = "@ drawable/option_more"/> </linearlayout>

Use selector and shape to implement rounded corner options