Nowadays, users are very important to the appearance of the APP. If all the components in the APP are written in the default Android style, it is estimated that there are a bunch of ugly UIS in the comments below. Learn how to customize the Button style today. The Button style modifies the Background attribute of the Button.
First, write an XML file that defines the Button style:
Create an Android XML file, select Drawable as the type, and click selector as the root node. The file name is buton_style.
The program automatically adds the selector node to the file we just created. We only need to write the background image displayed in three states in the selector node (Press and get the focus, normal ).
The Code is as follows:
Xml Code
<? 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/play_press"/>
<Item android: state_focused = "true" android: drawable = "@ drawable/play_press"/>
<Item android: drawable = "@ drawable/play"/>
</Selector>
The focus I obtained here is the same as the image displayed when I click it. It must be written strictly in the above Order and cannot be reversed.
Next, you only need to use the Background attribute of the Button when writing the Button control during layout.
Xml Code
<Button android: id = "@ + id/button1"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"
Android: background = "@ drawable/button_style"
> </Button>
Finally:
Add a custom style method. The image above is used. In fact, we can directly implement different styles by defining the xml file:
Based on the source code above, you only need to modify the button_style file and define the three States separately:
Xml Code
<? 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 = "#0d76e1" android: endColor = "#0d76e1"
Android: angle = "270" type = "parmname" text = "parmname"/>
<Stroke android: width = "1dip" android: color = "# f403c9"/>
<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" type = "parmname" text = "parmname"/>
<Stroke android: width = "1dip" android: color = "# f403c9"/>
<Corners android: radius = "2dp"/>
<Padding android: left = "10dp" android: top = "10dp"
Android: right = "10dp" android: bottom = "10dp"/>
</Shape>
</Item>
<Item>
<Shape>
<Gradient android: startColor = "#000000" android: endColor = "# ffffff"
Android: angle = "180" type = "parmname" text = "parmname"/>
<Stroke android: width = "1dip" android: color = "# f403c9"/>
<Corners android: radius = "5dip"/>
<Padding android: left = "10dp" android: top = "10dp"
Android: right = "10dp" android: bottom = "10dp"/>
</Shape>
</Item>
</Selector>
Gradient main gradient startColor start color, endColor end color, angle start gradient angle (the value can only be a multiple of 90, 0 is a left-right gradient, 90 is a bottom-up gradient, and so on)
Stroke Border width, color border color
Radius of the corners rounded corner. 0 is the right angle.
Relative Position of the padding text Value