Tuesday, January 25, 2011

Android Button Tutorial

In this tutorial we will create a simple Android App that responds to input from a button. Every time the button is clicked, an onscreen counter will update showing the total number of clicks.

Most Android apps involve using buttons to direct actions within the activity. Think about the built in calculator application. It is essentially made up of just a bunch of buttons. They may not look like the standard, buttons, but it is possible to skin Android buttons to look however you want.

Feel free to adjust the properties as you see fit. Listed below is a screenshot of the layout we have created.

Screenshot of the layout created.

Make sure to save your layout after you have modified it. When you save the layout, the generated Java class, R, will be recreated to include the ids of any new elements you have added to the layout.

Step 3. Add a OnClick listener to the button

Now that we have created the layout, its time to edit the actual Java code that is the logic behind the program. Open up MainActivity. It is located under src->example->MainActivity.java in the project explorer.

Screenshot of the MainActivity generated code

Let's examine the code that is already there.

MainActivity extends the Activity class. Activities are the main components of Android Applications. The onCreate method gets called when the parts of the activity need to get built. The first line calls the super constructor, and the second line sets the layout of the activity.

Now add a member variable that will keep track of the count. The complete code for the activity so far is listed below.

The Android Developer Tools make it really easy to reference the components inside of your resources folder. The ADT will automatically generate a Java file, R, that contains unique integer ids for all your resources. These generated IDs can then be used in your Java code to reference the resources.

Do not modify the file R.java!

R.java is located inside "gen" folder for generated java files. You should never be editing generated files because you will likely

Cause a problem

Have your changes overwritten almost immediately

Give yourself lots of headaches

If you modify your project to add a layout or a new drawable the file R.java will automatically get regenerated. On occasion you can run into problems, but these are generally solved by going to Project->Clean to regenerate many of the files.

Step 4. Obtaining references to the views

Now we want to obtain references to the views we created in the layout. We need these references in the Java file so that we can program the logic behind how they operate. Add the following code just below the setContentView... line

If you are still getting errors as part of "R.id...." make sure that you have saved the layout after modifying it.

Now that we have references to these views we can modify them in all sorts of ways through the Java code. Most of the properties we've set in the layout editor can also be set by using member functions for the views.

Step 5. Add a onClickListener to the Count Button

Now that we have a reference to the count button, we want to add a listener that handles when the count button is clicked. An easy way to do this is to have an anonymous class implement the View.OnClick interface. The Code listed below demonstrates this.

As always, please leave any questions you have in the comments area, and I will be glad to help!

------------------------------------------------------------

We create these tutorials in our free time. If you like what you see please consider buying us a cup of coffee so we can keep creating useful material. Click on the image below to make a donation via Paypal.

hello, I just read your post about:android-button-tutorialI need to count how many times the user clicks on a especific button in 24 hours, and then reset the counter. The user not always be in the app, So I figure i need to use a small data base to recover the counter every day.What should I do?thanks in advance…