Custom Buttons

In this post, we'll make custom buttons for our app. Its actually pretty simple. We just need to make use of few xml tags to handle images. What happens when we press a button ( a normal button ) ? There is a change in its.... Lets say, it responds to our touch. What actually happens is an animation. When we press a button, the background image of the button changes in such a way that it seems the button responds to our touch. So there are 2 images; one when not pressed and one when pressed. Which image for what and how to set them? We'll be doing it now. At first, lets just make a button with custom background and it doesn't change its background when pressed. We need an image for that. Download the buttons i used, from the link below:

---------------------------> Download button images <---------------------------

Copy all the images to the drawable folder (-hdpi ). Lets use the quit button for now. Create a new project. Open up main.xml and create a button ( How to create a button?). Add the tag android:background="@drawable/quit" and position the button wherever you want to, in the graphical layout. Thats it, a simple custom button is ready. Run the project and look at the button, click on the button and notice there is no change in it. Here is a code snippet of main.xml:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	a simple button is created with background as the image "quit.png"....
	and the button is positioned according to our need in the graphical layout....
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit"
	android:gravity="center" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

OK.. Now, lets jump to step 2. Create an android xml file named "quit_button.xml" (any name). In this file, we specify which image to display when button is pressed or not. Check out mine below:

	<?xml version="1.0" encoding="utf-8" ?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--
	the image "quit.png" will be displayed when the button is not pressed...
	the image "about1.png" will be displayed when the button is pressed...
	-->
	<item android:drawable="@drawable/about1" android:state_pressed="true" />
	<item android:drawable="@drawable/quit" />
	</selector>

view raw quit_button.xml hosted with ❤ by GitHub

Go to the layout file ( main.xml ); change the background to "@drawable/quit_button". Check it out below:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	button states are defined in quit_button.xml ...
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit_button"
	android:gravity="center" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

Run the project and notice the change when the quit button is pressed. Now you can do the same using btn_1.png and btn_2.png. Here are code snippets to displays btn_1 and btn_2....

	<?xml version="1.0" encoding="utf-8" ?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/btn_2" android:state_pressed="true" />
	<item android:drawable="@drawable/btn_1" />
	</selector>

view raw new_button.xml hosted with ❤ by GitHub

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	two buttons are create quit and click me...
	button states are defined in quit_button.xml and new_button.xml...
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit_button"
	android:gravity="center" />
	<Button
	android:layout_width="wrap_content"
	android:text="@string/click_me"
	android:layout_height="wrap_content"
	android:layout_alignParentTop="true"
	android:layout_marginRight="34dp"
	android:layout_marginTop="124dp"
	android:layout_toLeftOf="@+id/b_quit_id"
	android:background="@drawable/new_btn" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

Check out the snaps:
1. When button is not pressed...

2. When button is pressed...

3. A sample layout from an old project...

--------------> Download Project here <--------------

Thats it for now guys! In the next post, we'll learn about layouts in android and how to customize them. See ya!!!