Android Adventures - Basic Controls And Events
Written by Mike James   
Wednesday, 17 July 2013
Article Index
Android Adventures - Basic Controls And Events
General Event Handler
Switches and Toggle Buttons

Working with Android Studio makes building the UI easy with an interactive editor, but you still need to find out how to handle the things it isn't quite so good at. In this chapter of our ebook on Android the easy way we look at the basic UI components and general event handling - i.e beyond onClick. 


Android Adventures With Android Studio


  1. Getting Started With Android Studio
  2. The Activity And The UI
  3. Building The UI and a Calculator App
  4. Lifecycle and State
  5. Basic Controls And Events
  6. Spinners
  7. Pickers
  8. UI Graphics A Deep Dive
  9. ListView And Adapters
  10. Introducing Fragments
  11. Fragments and XML
  12. Fragment And Activity Working Together
  13. Managing Fragments
  14. Custom dialogs using DialogFragment
  15. Dialog Classes In DialogFragment
  16. A NumberPicker DialogFragment Project
  17. ViewPager

If you are interested in creating custom template also see:

Custom Projects In Android Studio






We have looked at the general principles of building a UI but now we have to spend some time looking at the most basic components that can be used to build an application.

We also need to find out how to work with any event and not just onClick. Even though most controls can be used very successfully using just the onClick event - there are other types of event that cannot be handled simply by setting an onEvent property in the Property Window. In this chapter we look in depth at Android event handling.

As before the emphasis will be on using Android Studio and the Layout editor to get as much of the work done as possible. 

The basic input controls are:

  • Buttons
  • Text Fields
  • Checkboxes
  • Radio Buttons
  • Toggle Buttons

If you have programmed using other UI frameworks many of these will be known to you and you can probably skip to just the ones that interest you.

Starting right at the beginning however let's revisit the Button but in a little more detail


There are two basic types of button - Button and ImageButton - but the Android Studio Toolbox has three Button, Small Button and ImageButton.

Small Button is just a standard Button control but with a style applied to make the font smaller and hence more suitable for a small button. The ImageButton is much the same as the Button but it has a src property which can be set to an image which will be displayed as the button icon and it doesn't display any text. 

The main properties that you work with in the case of a button is are things like background - which can be set to a color or a graphic. You can spend a long time changing the way buttons look but in the main the only important property of a button is its onclick handler.

A button is in your UI to be clicked. 

We have already seen how to create an onclick handler but for completeness - all you have to do is create a function which is public, returns void and has a View as its only parameter. 

If you place one example of a Button, Small Button and ImageButton on the design surface you can use the properties window to customize them.

Set the Background of the Button to dark grey by clicking on the ellipsis at the right of the property and then selecting the System tab in the Resource browser that appears. Scroll down and you will see a set of predefined colors that you can use. Find dark grey and select it.




For the small button set the Background property to a drawable in the same way - i.e. scroll down in the Resource browser until you see "drawables" and then select k_menu_add.



Repeat the task for the ImageButton but set the src property to k_menu_add. 


The result is the three buttons shown in the image below:



To attach a click event handler on all three buttons simply define a function

public void doButtonClick(View e){
 //process event

and set the onClick property on each button to doButtonClick.

You can find examples of using buttons in this way in earlier chapters. 

It is also worth noting that while a button has no other function in life other than to be clicked all of the other controls can also respond to an onClick event. That is you can use anything as a button if you want to.

Expert Properties

If you have looked at any example of using Buttons in the documentation, or if you look at slightly older Android code, you may discover some "tricks" that you can't seem to perform using Android Studio - this isn't actually the case. 

For example, suppose you want to set an icon within a standard text button so that it displays to the left of the text that button contains. This appears to be impossible if you restrict yourself to the properties presented in the property window. If you lookup the details of the properties that Button inherits you will find 

  • drawableLeft
  • drawableRight
  • drawableStart
  • drawableEnd
  • drawableBottom
  • drawableTop

which are not in the property window list. These allow you to display a drawable at the location specified relative to the text.

So setting drawableLeft to the icon resource we want to display would do the job but how can we set it?

The solution is that there is an icon to the right of the top of the property window that can be clicked to display "Expert Properties" i.e. all of the properties that the control supports.





If you select the Button and click Expert properties you will see among the new properties listed - drawableLeft. Click on the ellipsis button next to it and select a drawable of your choice to display the icon to the left of the text:


In most cases you will only want to work with the properties that are displayed in the property window, but you do need to know how to access the remainder. It is also worth keeping in mind that some of the expert properties will not be displayed correctly by the designer - especially in the early version of Android Studio - so use with care.

Last Updated ( Thursday, 20 November 2014 )

Copyright © 2015 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.