Android custom control style example detail
- 2021-01-03 21:05:15
- OfStack
This article gives an example of how Android can customize the style of its controls. To share for your reference, the details are as follows:
Android control style customization is achieved with XML files defined under the drawable folder, and the effect is achieved in the layout file by setting the background properties of the control.
1. Common states of controls: selector node is used in XML file, selector can be understood as state switcher, different styles are switched in different states, various states are represented by Item node, the following are some common states (note: the first item in statelist matching the current state will be used. Therefore, if the first item does not have any state features, it will be used every time, which is why the default value must always be at the end, the various states can be used interleaved) :
1, android: state_pressed
boolean. "true" means pressed state (for example, a button is pressed); "false" indicates non-pressed state use.
2, android: state_focused
boolean. "true" means focus state use (e.g., scrollball/ES36en-ES37en focus button); "false" indicates non-focused state use.
3, android: state_selected
boolean. "true" indicates that the selected state is used (for example, tab is open); "false" indicates non-selected use.
4, android: state_checkable
boolean. "true" means when the state can be checked; "false" means non-tickable state. (useful only if you can switch ticketable - non-ticketable components.)
5, android: state_checked
boolean. "true" means to use the checked status; "false" is used for non-checked status.
6, android: state_enabled
boolean. "true" means available state (can receive touch/click events); "false" indicates use in an unavailable state.
7, android: window_focused
boolean. "true" means used when the application window has focus (the application is in the foreground); "false" is used when there is no focus (for example, notification column drop down or dialog box display).
2. Properties of shape: Each state (item) corresponds to an effect. shape is used to define shapes.
1. solid: Solid, which means filled
android:color specifies the color of the fill
gradient: Gradient
android:startColor and android:endColor are the start and end colors respectively. android:angle is the gradient Angle and must be an integer multiple of 45. When angle=0, the gradient is from left to right. Then turn counterclockwise, from bottom to top when angle=90. In addition, the default mode of gradient is android:type="linear", i.e. linear gradient, which can be specified as radial gradient, android:type="radial", radial gradient needs to specify the radius of android:gradientRadius="50", or 1 can specify the combination of 2, scan gradient android: type="sweep"
3. stroke: Stroke
android:width="2dp" stroke width, android:color stroke color.
We can also make the stroke into a dotted line and set it as follows:
android:dashWidth="5dp"
android:dashGap="3dp"
Where android:dashWidth represents the width of such a horizontal line as '-', and android:dashGap represents the distance between them.
4. corners: Rounded corners
android:radius is the radian of the Angle. The larger the value, the more circular the Angle is.
We can also set the four angles at different angles by:
20 dp android: topRightRadius = "" the top right corner
android: bottomLeftRadius = "20 dp" at the bottom right corner
dp android: topLeftRadius = "1" on the upper left corner
dp android: bottomRightRadius = "0" the bottom left corner
One thing to note here is that bottomLeftRadius is the lower right corner, not the lower left
5. panding: Inner edge moment
The following is a complete definition of Button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<gradient
android:startColor="#ff8c00"
android:endColor="#FFFFFF"
android:angle="270"/>
<stroke android:width="2dp"
android:color="#dcdcdc"/>
<corners android:radius="2dp"/>
<padding android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<gradient
android:startColor="#ffc2b7"
android:endColor="#ffc2b7"
android:angle="270"/>
<stroke android:width="2dp" android:color="#dcdcdc"/>
<corners android:radius="2dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ff9d77"
android:endColor="#ff9d77"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#fad3cf"/>
<corners android:radius="2dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
</selector>
For more information about Android controls, please see the Android control Usage Summary.
I hope this article has been helpful in Android programming.