Android : Using selector to change button backgrou

问题:

I have a button I set its background to specific selector.
The selector currently changes the button background and changed an image as the background.
I also want the background color to be changed (the image is icon with transparent space around).
This is the selector :

    <?xml version="1.0" encoding="utf-8"?>
        <selector 
            xmlns:android="http://schemas.android.com/apk/res/android" >
        <!-- default -->
        <item 
            android:state_pressed="false" 
            android:state_focused="false"
            android:drawable="@drawable/menu_button_collapsed" >
        </item>

        <!-- button focused -->
        <item 
            android:state_pressed="false" 
            android:state_focused="true"
            android:drawable="@drawable/menu_button_collapsed_highlight" 
            android:drawable="@drawable/button_background" >
        </item>

       <!-- button pressed -->
        <item 
            android:state_pressed="true" 
            android:state_focused="false"
            android:drawable="@drawable/menu_button_collapsed_highlight"
            android:drawable="@drawable/button_background" >
        </item>
    </selector>

As you can see, I set the drawable attribute twice, which is illegal, but this is what I want actually.
Notice @drawable/button_background is just a color

回答1:

Create a new <layer-list> drawable

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>        
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

           <!-- Your background color goes first -->
           <item 
             android:id="@android:id/background"
             android:drawable="@drawable/button_background" />

           <!-- Your button icon image -->
           <item 
             android:id="@android:id/button_image"
             android:drawable="@drawable/menu_button_collapsed_highlight" />

        </layer-list>

And reference it in your selector drawable file

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >

        <!-- default -->
        <item 
            android:state_pressed="false" 
            android:state_focused="false"
            android:drawable="@drawable/menu_button_collapsed" 
         />            

        <!-- button focused -->
        <item 
            android:state_pressed="false" 
            android:state_focused="true"
            android:drawable="@drawable/custom_button" 
            />

        <!-- button pressed -->
        <item 
            android:state_pressed="true" 
            android:state_focused="false"
            android:drawable="@drawable/custom_button" 
         />
    </selector>

回答2:

<!-- default -->
<item
    android:state_pressed="false"
    android:state_focused="false">
    <shape
        android:innerRadiusRatio="1"
        android:shape="rectangle" >
        <solid android:color="#01AF7E" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:radius="5dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp"></corners>
        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />

    </shape></item>

<!-- button focused -->
<item
    android:state_pressed="false"
    android:state_focused="true">
    <shape
        android:innerRadiusRatio="1"
        android:shape="rectangle" >
        <solid android:color="#8001AF7E" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:radius="5dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp"></corners>
        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />

    </shape></item>

<!-- button pressed -->
<item
    android:state_pressed="true"
    android:state_focused="false">
    <shape
        android:innerRadiusRatio="1"
        android:shape="rectangle" >
        <solid android:color="#8001AF7E" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:radius="5dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp"></corners>
        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />

    </shape></item>