Controls provided by the system sometimes do not meet our needs, so we use custom controls. Here we introduce Button highlighting, Edittext highlighting, custom Seekbar,Edittext style, and ShapeDrawable!
1.Button click highlight
When we click the button button, the color of the button button should change. Otherwise, the user is not sure whether the button he clicked is valid. We choose two colors, one is red in normal condition, the other is dark red in click condition. In the drawable directory, we create a new xml file. The code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<! - When clicking the button button, the color of the button - >
<item android:state_pressed="true" android:drawable="@color/c1"></item>
<! - When the button button is not clicked, the color of the button - >
<item android:state_pressed="false" android:drawable="@color/c10"></item>
<! - state_press= "true | false" is to determine whether the button is clicked - >.
<! - C1 and c10 are two colours that I customize in color - >.
</selector>
It should be noted that android:drawable can not be replaced by android: color, otherwise it will make an error.
Then create a new Button component in the layout and refer to the xml file we defined above. The code is as follows
<Button
android:text="Highlight BUTTON"
android:layout_margin="@dimen/spaceing"
android:background="@drawable/button_style"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--button_style That's what we just wrote. xml file-->
Run the code and click the button to see the effect.
2. Customize SeekBar
Seekbar is a drag bar. After dragging, the color or state will change. Here we prepare two pictures with different colors but the same shape. Then we create an XML file in the drawable directory. The code is as follows.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Background for defining orbits-->
<item android:id="@android:id/background" android:drawable="@drawable/heart_black"/>
<!--Define the background of the completed orbit-->
<!--heart and heart_black I put it in drawable Two pictures in the catalogue-->
<item android:id="@android:id/progress" android:drawable="@drawable/heart"/>
</layer-list>
Note: You need to specify id!
Then create a new SeekBar component in the layout, referring to the xml we just defined, and the code is as follows
<SeekBar
android:layout_margin="@dimen/spaceing"
android:max="100"
android:progressDrawable="@drawable/my_bar"
<!--my_bar It was just defined. xml Name of file-->
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Then run, and you can see the effect.
3.Edittext highlight
The process is similar to that of pasting code directly.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--state_focused Is to determine whether the current text box is focused or not selected-->
<item android:state_focused="true" android:color="@color/c1"/>
<item android:state_focused="false" android:color="@color/c2"/>
</selector>
Note that this is android: color!
Then create a new Edittext in the layout and set the value of the textColor attribute to the xml file we defined.
You can see the effect when you run it.
4. Customize Edittext background
First, you need to create a new xml file, then the root directory is shape, according to the style you want to set the values of the following attributes, as follows
<! - Defines the radians of the four angles of a geometry - >.
<corners/>
The bigger the ridus is, the bigger the radian is. You can specify the radian for each of the four angles, but it's not necessary.
<! - Defines filling with gradient colors - >
<gradient/>
Gradient colors are primarily the starting, ending, and angle colors.
<! - Defines the internal margin of a geometric shape - >
<padding/>
Specify the inner margins, such as edittext, that specify the input font and the upper and lower left margins of the entire box.
<! - Define the size of the geometric shape - >
<size/>
Define width and height
<! - Defines filling with a single color - >
<solid/>
Set the fill of a single fixed color
<stroke/>
<! - Defined as a geometric shape drawing border - >.
I wrote four Edittext background codes, which are as follows
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--Setting Fill Colors-->
<solid android:color="@color/c7"/>
<!--Set the inner margin around-->
<padding android:left="@dimen/spaceing"
android:bottom="@dimen/spaceing"
android:right="@dimen/spaceing"
android:top="@dimen/spaceing"/>
<!--Setting Borders-->
<stroke android:width="3dip" android:color="@color/c9"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--Define fill gradient color-->
<gradient android:startColor="@color/c1"
android:endColor="@color/c3"
android:angle="45"/>
<!--Installation Filling-->
<padding android:top="@dimen/spaceing"
android:right="@dimen/spaceing"
android:bottom="@dimen/spaceing"
android:left="@dimen/spaceing"/>
<!--Set up rounded rectangle-->
<corners android:radius="20dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--Define fill gradient color-->
<gradient android:startColor="@color/c1"
android:endColor="@color/c3"
android:angle="45"
android:type="linear"/>
<!--Installation Filling-->
<padding android:left="@dimen/spaceing"
android:bottom="@dimen/spaceing"
android:right="@dimen/spaceing"
android:top="@dimen/spaceing"/>
<!--Set up rounded rectangle-->
<corners android:radius="8dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dip"
android:color="@color/c2"
android:dashGap="5dip"
android:dashWidth="100dp"/>
</shape>