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:
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:
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:
Go to the layout file ( main.xml ); change the background to "@drawable/quit_button". Check it out below:
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....
Check out the snaps:
1. When button is not pressed...
2. When button is pressed...
3. A sample layout from an old project...
Thats it for now guys! In the next post, we'll learn about layouts in android and how to customize them. See ya!!!
