Showing posts with label button. Show all posts
Showing posts with label button. Show all posts

Wednesday, June 13, 2012

Event Handling

What are events? Why do we need to handle them? Events occur when an user interact with the UI components of our app like buttons. When these events occurs, a function/method is called. As a programmer, it is our responsibility to dump a block of code inside that method/function and make the UI respond to the user, like closing the application when the user presses the "quit" button. Seems like a good idea. Lets do just that.


Create a project. First, we need to include a button in our layout and id it. I do the same in the following code:




In our source code ( java file ), we need to add a variable for this button and add a listener to it, which is done in the following code:



This can also be done another way. Instead of adding OnClickListener on the java file, we can handle events by addding the tag android:onClick="myOnClickMethod". "myOnClickMethod" is a method defined inside our activity class(java file). Any name can be given to the method but it must have an argument of type "View". Take a look at my button in layout and the method myOnClickMethod() in my activity class:

A code snippet for button:







The Activity:


These methods are enough to implement event listeners for 2 or 3 buttons. But what if we need to handle the events of 10 buttons. For this situation, there is a special way of implementing listeners. Lets say we have 4 buttons and a text view as in the layout below. We need to print the event occurred like printing "Button 1 is pressed" when button1 is pressed. What we do is that, we make our activity to implement a class "View.OnClickListener" and then, we implement the common method onClick(), in which we differentiate events occurred by using id of the buttons. This is done in the code given below.


main.xml




BaseActivity.java

Some snaps:


1. The quit button:






2. Button2 event:






3. Button4 event:








OK... thats it for now guys!!! See ya later with more.....

Monday, June 11, 2012

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:



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!!!