Android : Using selector to change button background image and color

android, android-drawable, imagebutton

Solution

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>

Problem

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

Original source