Android : Using Selector To Change Button Background Image And Color

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 c

Solution 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>

Solution 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>