How To Replace Default Background Of Multistate ImageButton In Layout

How To Replace Default Background Of Multistate ImageButton In Layout

Multistates buttons are useful for showing the various states of buttons like pressed,focussed,normal state. For creating multistate button in the layout we need to use two classes .

• First one, android.graphics.drawable.StateListDrawable class,which creates a drawable objects to show different images on same graphics based on the state of objects.Here each graphics is represented by <item> elements inside single <selector> elements.
• Second one, android.widget.ImageButton class.It display an button with image in background and can be pressed.IT changes color during different state of button like focused, pressed etc.

So lets begin the programming step by step:

• first open the eclipse select File -> New -> Project.

• Then Select Android -> Android Application Project and then click next.
• Now fill with following details:
• Project name- MultistateButton
• Application name-MultistateButton
• package name-multistate.Button
• Minimum required SDK- select android 3.0
• tick on create custom laucher icon.
• tick on create project in workspace.

• In Config Launcher Icon window click Next and finally choose Blank Activity in Create Activity window and the click Next and then Finish.
• Now we will create Multistate button file name as multistate_button.xml .but before doing this let us know the different state of button.
• drawable- must for showing the normal state image.must refer to the image.
• state_pressed-when object is pressed(touched/clicked) ,by default remains  non-pressed .
• state_focused-when object has input focussed(when user selects text input).
• state_hovered-when object is hovered by cursor , very similar to focused state.
• state_selected-when object are selected through directional control inside focused state.
• state_checkable-when object is checkable.object should be a type of check or unchecked.
• state_checked-when object is checked.
• state_enabled-when objects are enabled(are able to receive clicks or touch)
• state_window_focused-when application window has focus means app comes in foreground.
• Now in multistate_button.xml file we will use pressed, focused. so lets begin.
• select MultistateButton project.
• right click on drawable folder and click on new.
• and write multistate_button.xml and then finish.

• Now open the multistate_button.xml file and write the following lines.

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3:  <item android:state_pressed="true"  
4:  android:drawable="@drawable/button_pressed" />  
5:  <item android:state_focused="true"  
6:  android:drawable="@drawable/button_focused" />  
7:  <item android:drawable="@drawable/button_normal" />  
8:  </selector>  

• Now we need to add three image for pressed ,focused, normal state. we will use same size for these three.you ca copy these images from here.



button_normal



button_pressed



button_focused

• now  paste images in drawable folder by right  click on drawable ->paste.
• Now open activity_main.xml file and replace the whole xml lines with the new lines given below.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent" >  
5:    <ImageButton  
6:      android:id="@+id/button_one"  
7:      android:layout_width="wrap_content"  
8:      android:layout_height="wrap_content"  
9:      android:layout_centerHorizontal="true"  
10:      android:layout_centerVertical="true"  
11:      android:background="#00000000"  
12:      android:src="@drawable/multistate_button" />  
13:  </RelativeLayout>  

• In above activity_main.xml file , at line 12 we are referring the multistate_button.xml  file and at line 11 we are making default background as "#00000000" that removes the default background.
• Now our project is ready for running.
• As you have already set up emulator for android.
• so to compile right click on top level of project MultistateButton project folder in the package explorer and select run as ->android application.
• The emulator will take approximately 30 sec then after it will launch your project in the emulator  environment.

• now when you change the state of button it will change the color of button with state and doesn't show the default background.