Page 1 of 3
We have already used some UI controls in previous chapters but now it is time to examine what the basic controls that make up a UI are and how they work and how you can change the way that they look.
Android Adventures With Android Studio
- Getting Started With Android Studio 2
- The Activity And The UI
- Building The UI and a Calculator App
- Android Events
- Basic Controls
- Layout Containers
- UI Graphics A Deep Dive
- Menus & The Action Bar
- Menus, Context & Popup
- Beginning Bitmap Graphics
- Staying Alive! Lifecycle & State
- ListView And Adapters
- Using Android Studio (coming soon)
If you are interested in creating custom template also see:
Custom Projects In Android Studio
The Basic Input Controls
Now that we have discovered how events work it is time to take a look at the most commonly used input controls.
The term control comes from the idea that the user "controls" your program using them - widget or GUI component are also terms that are used to mean the same thing. The Android community seems very sloppy about UI terminology.
The basic input controls are:
- Text Fields
- 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
Buttons Styles And Properties
There are two basic types of button - Button and ImageButton.
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.
If you place one example of a Button and ImageButton on the design surface you can use the properties window to customize them.
There are two distinct ways you can change the way a control looks. You can set a style or modify a property.
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 background_material_light and select it.
For the small button set the Background property to a drawable in the same way - i.e. select "drawables" in the left-hand menu scroll down in the Resource browser until you see items starting ic then select ic_menu_add.
We will discuss the use of resources and drawables in a later chapter. For now just assume that they are styles and graphics elements that you can select.
Repeat the task for the ImageButton but set the src property to ic_menu_add.
The result is the three buttons shown in the image below:
You can spend a great deal of time exploring ways to make use of a button's properties to style it just as you want it to look.