How to Give Different Background Images for Different States of a UI Component

Most of the application demands custom UI component and hence we may need to override the default properties for a view. Let me explain this by taking a ButtonView as an example by giving  different images to the button on its different states i.e one image when the button is in normal state and another when it is in pressed state. etc.

This is pretty simple to achieve. Only thing you need to implement is a selector with items that you need to deal with your button. Confused? Don't worry :) Here I am  going to explain with some simple steps.

Step 1: Create a new Android project in your work space.
Refer: How to Create and Run Your First Android Project

Step 2: Create two button images. 
Fisrt of all create 2 button images, one for the normal state and other for the pressed state and place it inside the res\drawable-mdpi folder. Name of the image files are button.png (image for button in normal state) with green colored button and button_focused.png (image for button in pressed or focused state ) with red colored button. You can download the same from below.

Step 3: Create a new XML file with a selector containing items with states that you need to deal with your button.


Create a new XML file with name button_selector.xml inside the res\drawable\ folder. The content of the file is shown below.

<?xml version="1.0" encoding="utf-8"?>



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_focused" android:state_pressed="true"/>

    <item android:drawable="@drawable/button" android:state_pressed="false"/>

    <item android:drawable="@drawable/button_focused" android:state_focused="true"/>

    <item android:drawable="@drawable/button" android:state_focused="false"/>

</selector>

Please note: The item with pressed and focused state is having image button_focused.png and all other states button.png is set as the drawable.

Step 4: Create a button view to the main layout and set the background to button_selector.xml

Once you are done with above items, its time for you to create a button view to demo the background images. Go to your main layout file (mine is main.xml) and drag a button view to the main layout. Now set its background to button_selector.xml file. Your main.xml file looks like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation = "vertical"

  >



    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button"

        android:textColor="@android:color/white"

        android:textSize="28dp"

        android:textStyle="bold"

        android:layout_centerInParent="true"

        android:background="@drawable/button_selector"

        />

   

</RelativeLayout>

Thats all! You are done with setting different background images for your button. Now just press control + F11, you can see the result as below, when the button is in pressed and normal state.

Cheers,
Have a nice day. View Complete List of Tips