Android custom control style example detail

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.