Android layer-list (border BOLD effect)

 

To achieve the above effect: After the checkbox is selected, the border of the checkbox is bold (color change and font change can be easily achieved, so we will not repeat it here ). The temporary solution is to use layer-list.

Layer-list: layer accumulation. It is literally multiple layers, that is, you can put multiple layers together and then show them.

 

The layout of the custom view checkbox in the tab-widget is as follows:

[Html]
<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 = "40dp"
Android: orientation = "vertical">
 
<CheckBox
Android: id = "@ + id/checkMsg"
Style = "@ style/tab_checkbox"
Android: layout_width = "match_parent"
Android: layout_height = "40dp"/>
 
</LinearLayout>

<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 = "40dp"
Android: orientation = "vertical">

<CheckBox
Android: id = "@ + id/checkMsg"
Style = "@ style/tab_checkbox"
Android: layout_width = "match_parent"
Android: layout_height = "40dp"/>

</LinearLayout>
Checkbox style. xml style file:

[Html]
<Style name = "tab_checkbox">
<Item name = "android: background"> @ drawable/msg_tab_widget_sharp </item>
<Item name = "android: button"> @ null </item>
<Item name = "android: textColor"> @ color/gray </item>
<Item name = "android: textSize"> 16sp </item>
<Item name = "android: gravity"> center </item>
</Style>

<Style name = "tab_checkbox">
<Item name = "android: background"> @ drawable/msg_tab_widget_sharp </item>
<Item name = "android: button"> @ null </item>
<Item name = "android: textColor"> @ color/gray </item>
<Item name = "android: textSize"> 16sp </item>
<Item name = "android: gravity"> center </item>
</Style>
The layout file of the background in the msg_tab_widget_sharp.xml checkbox style. xml style file:

 

[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: drawable = "@ drawable/msg_tab_widget1" android: state_checked = "true"> </item>
<Item android: drawable = "@ drawable/msg_tab_widget2" android: state_checked = "false"> </item>
<Item android: drawable = "@ drawable/msg_tab_widget2"> </item>
</Selector>

<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: drawable = "@ drawable/msg_tab_widget1" android: state_checked = "true"> </item>
<Item android: drawable = "@ drawable/msg_tab_widget2" android: state_checked = "false"> </item>
<Item android: drawable = "@ drawable/msg_tab_widget2"> </item>
</Selector>
Msg_tab_widget1.xml when checkbox is selected:

[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">
 
<Item>
<! -- This is the border color -->
<Shape>
<Solid android: color = "# 0066CC"/>
</Shape>
</Item>
<Item android: bottom = "3dp" android: right = "1dp">
<! -- This is the main color -->
<Shape>
<Solid android: color = "# E9F2FC"/>
 
<Padding
Android: bottom = "5dp"
Android: left = "5dp"
Android: right = "5dp"
Android: top = "5dp"/>
</Shape>
</Item>
 
</Layer-list>

<? Xml version = "1.0" encoding = "UTF-8"?>
<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">

<Item>
<! -- This is the border color -->
<Shape>
<Solid android: color = "# 0066CC"/>
</Shape>
</Item>
<Item android: bottom = "3dp" android: right = "1dp">
<! -- This is the main color -->
<Shape>
<Solid android: color = "# E9F2FC"/>

<Padding
Android: bottom = "5dp"
Android: left = "5dp"
Android: right = "5dp"
Android: top = "5dp"/>
</Shape>
</Item>

</Layer-list>
Msg_tab_widget2.xml: When the checkbox is not selected, the default status is displayed:

 

[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">
 
<Item>
<! -- This is the border color -->
<Shape>
<Solid android: color = "# 0066CC"/>
</Shape>
</Item>
<Item
Android: bottom = "1dp"
Android: right = "1dp">
 
<! -- This is the main color -->
<Shape>
<Solid android: color = "# E9F2FC"/>
 
<Padding
Android: bottom = "5dp"
Android: left = "5dp"
Android: right = "5dp"
Android: top = "5dp"/>
</Shape>
</Item>
 
</Layer-list>

<? Xml version = "1.0" encoding = "UTF-8"?>
<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">

<Item>
<! -- This is the border color -->
<Shape>
<Solid android: color = "# 0066CC"/>
</Shape>
</Item>
<Item
Android: bottom = "1dp"
Android: right = "1dp">

<! -- This is the main color -->
<Shape>
<Solid android: color = "# E9F2FC"/>

<Padding
Android: bottom = "5dp"
Android: left = "5dp"
Android: right = "5dp"
Android: top = "5dp"/>
</Shape>
</Item>

</Layer-list>

 

 

 

 

Other demos: for example, in android: style/Widget. ProgressBar. Large or other progressbar styles

[Html]
<Style
Name = "progressBarStyleSmall"
Parent = "android: style/Widget. ProgressBar. Large">
 
<Item name = "android: indeterminateDrawable"> @ drawable/progress </item>
</Style>
 
 
<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">
 
<! -- <Item android: drawable = "@ android: drawable/progress_circular_background"/> -->
<! --
<Item>
<Shape android: shape = "ring" android: innerRadiusRatio = "3.4" android: thicknessRatio = "6.0">
<Gradient android: useLevel = "true" android: type = "sweep" android: startColor = "# ff000000" android: endColor = "# ffffffff"/>
</Shape>
</Item>
-->
<Item>
<Rotate
Android: drawable = "@ drawable/load2"
Android: fromDegrees = "0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: toDegrees = "370"/>
</Item>
 
</Layer-list>

<Style
Name = "progressBarStyleSmall"
Parent = "android: style/Widget. ProgressBar. Large">

<Item name = "android: indeterminateDrawable"> @ drawable/progress </item>
</Style>

<Layer-list xmlns: android = "http://schemas.android.com/apk/res/android">

<! -- <Item android: drawable = "@ android: drawable/progress_circular_background"/> -->
<! --
<Item>
<Shape android: shape = "ring" android: innerRadiusRatio = "3.4" android: thicknessRatio = "6.0">
<Gradient android: useLevel = "true" android: type = "sweep" android: startColor = "# ff000000" android: endColor = "# ffffffff"/>
</Shape>
</Item>
-->
<Item>
<Rotate
Android: drawable = "@ drawable/load2"
Android: fromDegrees = "0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: toDegrees = "370"/>
</Item>

</Layer-list>