Android button background

Here I will give an example of how to use selector and layer-list to complete the cascading combination of the button background, so as to have different effects in different situations.

Selector in button_ctrl.xml

 <?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/button_highlight_ctrl" />
<item android:drawable="@drawable/button_normal_ctrl" />
</selector>

Button_highlight_ctrl.xml

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/button_highlight_back"
         android:top="2dip"
         android:right="2dip"
         android:bottom="2dip"
         android:left="2dip"/>
<item
android:drawable="@drawable/button_highlight_fore"
         android:top="2dip"
         android:right="2dip"
         android:bottom="2dip"
         android:left="2dip"/>
</layer-list>

The background color gradient is completed in button_highlight_back.xml.

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners
android:radius="4dip"/>
<gradient
android:type="linear"
        android:angle="270"
        android:startColor="@color/highlight_button_start_color"
        android:centerColor="@color/highlight_button_middle_color"
        android:endColor="@color/highlight_button_end_color"/>
</shape>

Button_highlight_fore is a foreground image, that is, the top shadow when the image is pressed:

So far, the preparation of the highlighted button has been completed, followed by the normal button

Button_normal_ctrl.xml

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/button_normal_back"
        android:top="2dip"
        android:right="2dip"
        android:bottom="2dip"
        android:left="2dip"/>
<item
android:drawable="@drawable/button_normal_fore"
        android:top="2dip"
        android:right="2dip"
        android:bottom="1dip"
        android:left="2dip"/>
</layer-list>

Button_normal_back.xml and button_normal_fore handle similar highlighting and do not post code

 

The following figure shows the running effect:

Normal highlight

 

Of course, it may be an image rather than a character. In short, changes can be varied, and the core idea is the same.