LearninGuide3 - Mobile Computer UI
LearninGuide3 - Mobile Computer UI
This learning guide describes the advanced user interface (UI)control, event handling, styles and
themes in android. It explores the most used component in designing mobile application in android. It
contain topics on Layout Manager (Grid View, List View, Image View, Web View), Toggle Button,
Radio Button, Web View, Progress Bar, Check Box, Switch (on/off), and Date and Time Picker.
At the end of the information sheet the students will be able to:
ToggleButton is used to display checked and unchecked state of a button. ToggleButton basically an
off/on button with a light indicator which indicate the current state of toggle button. The most simple
example of ToggleButton is doing on/off in sound, Bluetooth, wifi, hotspot etc. It is a subclass of
compoundButton.
3. textOn And textOff: textOn attribute is used to set the text when toggle button is in checked/on
state. We can set the textOn in XML as well as in the java class.Below is the example code with
explanation included in which we set the textOn “Enabble Attribute Of Toggle button” for a toggle
button.
4. onClick
This is the name of the method in this View's context to invoke when the view is clicked.
3.7 Switch
Switch is a two-state toggle switch widget that can select between two options. It is used to display
checked and unchecked state of a button providing slider control to user. Switch is a subclass of
CompoundButton. It is basically an off/on button which indicate the current state of Switch. It is
commonly used in selecting on/off in Sound, Bluetooth, WiFi etc.
As compared to ToggleButton Switch provides user slider control. The user can simply tap on a switch
to change its current state.Switch allow the users to change the setting between two states like turn
on/off wifi, Bluetooth etc from your phone’s setting menu. It was introduced after Android 4.0 version
(API level 14).
// initiate a Switch
Switch simpleSwitch = (Switch) findViewById(R.id.simpleSwitch);
Attributes of Switch:
Now let’s we discuss important Switch attributes that helps us to configure a Switch in XML
file(layout).
1. id: id is an attribute used to uniquely identify a Switch.
2. checked: checked attribute of Switch is used to set the current state of a Switch. The value can be
either true or false where true shows the checked state and false shows unchecked state of a Switch.
The default value of checked attribute is false. We can also set the current state programmatically.
Below we set “true” value for checked attribute that sets the current state to checked.
3. text: text attribute is used to set the text in a Switch. We can set the text in xml as well as in the java
class.
Below we set the text “Sound” for the Switch.
<Switch
android:id="@+id/simpleSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Sound" /><!--displayed text of switch-->
4. textOn And testOff: textOn attribute is used to set the text when Switch is in checked state (i.e. on
state). We can set the textOn in XML as well as in the java class.
In the below example we set the textOn as “Yes” and textOff as “No” for a Switch.
<Switch
android:id="@+id/simpleSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Notification"
android:textOff="No"
android:textOn="Yes"/><!-- text to be displayed whenever current state is checked-->
3.8 CheckBox
CheckBox is a type of two state button either unchecked or checked in Android. Or you can say it is a
type of on/off switch that can be toggled by the users. You should use checkbox when presenting a
group of selectable options to users that are not mutually exclusive. CompoundButton is the
parent class of CheckBox class.
In android there is a lot of usage of check box. For example, to take survey in Android app we can list
few options and allow user to choose using CheckBox. The user will simply checked these checkboxes
rather than type their own option in EditText. Another very common use of CheckBox is as remember
me option in Login form.
Attributes of CheckBox:
Now let’s we discuss important attributes that helps us to configure a check box in XML file (layout).
1.id: id is an attribute used to uniquely identify a check box. Below we set the id of a image button.
<CheckBox
android:id="@+id/simpleCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple CheckBox"/>
2. checked: checked is an attribute of check box used to set the current state of a check box. The value
should be true or false where true shows the checked state and false shows unchecked state of a check
box. The default value of checked attribute is false. We can also set the current state programmatically.
<CheckBox
android:id="@+id/simpleCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple CheckBox"
android:checked="true"/><!--set the current state of the check box-->
3. gravity: The gravity attribute is an optional attribute which is used to control the alignment of the
text in CheckBox like left, right, center, top, bottom, center_vertical, center_horizontal etc.
Below we set the right and center_vertical gravity for the text of a check box.
<CheckBox
android:id="@+id/simpleCheckBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
4. text: text attribute is used to set the text in a check box. We can set the text in xml as well as in the
java class.
Below is the example code with explanation included in which we set the text “Text Attribute Of
Check Box” for a check box.
<CheckBox
android:id="@+id/simpleCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Text Attribute Of Check Box"/><!--displayed text of the check box-->
RadioButton are mainly used together in a RadioGroup. In RadioGroup checking the one
radio button out of several radio button added in it will automatically unchecked all the others. It means
at one time we can checked only one radio button from a group of radio buttons which belong to same
radio group. The most common use of radio button is in Quiz App.
RadioButon is a two state button that can be checked or unchecked. If a radio button is unchecked then
a user can check it by simply clicking on it. Once a RadiaButton is checked by user it can’t be
unchecked by simply pressing on the same button. It will automatically unchecked when you press any
other RadioButton within same RadioGroup.
Important Note: RadioGroup is a widget used in Android for the grouping of radio buttons and
provide the feature of selecting only one radio button from the set. When a user try to select any other
radio button within same radio group the previously selected radio button will be automatically
unchecked.
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
2. checked: checked attribute in radio button is used to set the current state of a radio button. We can
set it either true or false where true shows the checked state and false shows unchecked state of a radio
button. As usual default value of checked attribute is false. We can also set the current state in JAVA.
Below we set true value for checked attribute which sets the current state to checked of a Button
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"/><!-- set the current state of the radio button-->
3. text: text attribute is used to set the text in a radio button. We can set the text both ways either in
XML or in JAVA class.
Below is the example code with explanation included in which we set the text “I am a radiobutton” of
a radio button.
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_centerHorizontal="true"
android:text="I am a radiobutton" /><!-- displayed text of radio button-->
Progress Bar is used to display the status of work being done like analyzing status of work or
downloading a file etc. In Android, by default a progress bar will be displayed as a spinning wheel but
If we want it to be displayed as a horizontal bar then we need to use style attribute as horizontal. It
mainly use the “android.widget.ProgressBar” class.
2. max: max is an attribute used in android to define maximum value of the progress can take. It must
be an integer value like 100, 200 etc.
Below we set 100 maximum value for a progress bar.
<ProgressBar
android:id="@+id/simpleProgressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:max="100" /><!--set 100 maximum value for the progress bar-->
Android Time Picker allows you to select the time of day in either 24 hour or AM/PM mode. The time
consists of hours, minutes and clock format. Android provides this functionality through TimePicker
class.
<TimePicker
android:id="@+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
After that you have to create an object of TimePicker class and get a reference of the above defined
xml component. Its syntax is given below.
importandroid.widget.TimePicker;
privateTimePicker timePicker1;
timePicker1 = (TimePicker) findViewById(R.id.timePicker1);
Methods of TimePicker:
1. setCurrentHour(Integer currentHour):
2. setCurrentMinute(Integer currentMinute):
This method is used to set the current minutes in a time picker.
setMinute(Integer minute): setCurrentMinute() method was deprecated in API level 23. From api level
23 we have to use setMinute(Integer minute). In this method there is only one parameter of integer type
which set the value for minutes.
3. getCurrentHour():
This method is used to get the current hours from a time picker.
getCurrentHour(): getCurrentHour() method was deprecated in API level 23. From api level 23 you
have to use getHour(). This method returns an integer value.
Below we get the value of hours from a timepicker set by user.
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time
pickerint hours =simpleTimePicker.getCurrentHour(); // before api level 23
int hours =simpleTimePicker.getHour(); // after api level 23
4. getCurrentMinute():
This method is used to get the current minutes from a time picker.
getMinute(): getCurrentMinute() method was deprecated in API level 23. From api level 23 we have to
use getMinute(). This method returns an integer value.
Below we get the value of minutes from a time picker.
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time
picker
int minutes = simpleTimePicker.getCurrentMinute(); // before api level 23
int minutes = simpleTimePicker.getMinute(); // after api level 23
This method is used to set the mode of the Time picker either 24 hour mode or AM/PM mode. In this
method we set a Boolean value either true or false. True value indicate 24 hour mode and false value
indicate AM/PM mode.
Below we set the current mode of the time picker.
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time
picker
simpleTimePicker.setIs24HourView(true); // set 24 hours mode for the time picker
6. is24HourView():
This method is used to check the current mode of the time picker. This method returns true if its 24
hour mode or false if AM/PM mode is set.
Below we get the current mode of the time picker:
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time
picker
Boolean mode=simpleTimePicker.is24HourView(); // check the current mode of the time picker
7. setOnTimeChangedListener(TimePicker.OnTimeChangedListener onTimeChangedListener):
This method is used to set the callback that indicates the time has been adjusted by the user.
onTimeChanged(TimePicker view, int hourOfDay, int minute) is an override function of this listener in
which we have three parameters first is for TimePicker, second for getting hour of the day and last is
for getting the minutes after changing the time of the time picker.
Below we show the use of on time changed listener of a time picker.
TimePicker simpleTimePicker = (TimePicker)findViewById(R.id.simpleTimePicker); // initiate a time
picker
simpleTimePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
Android Date Picker allows you to select the date consisting of day, month and year in your custom
user interface. For this functionality android provides DatePicker and DatePickerDialog components.
Methods of DatePicker
Let’s discuss some common methods of a datepicker which are used to configure a DatePicker in our
application.
1. setSpinnersShown(boolean shown):
This method is used to set whether the spinner of the date picker in shown or not. In this method you
have to set a Boolean value either true or false. True indicates spinner is shown, false value indicates
spinner is not shown. Default value for this function is true.
Below we show the use of setSpinnerShown() function by setting false value.
2. getDayOfMonth():
This method is used to get the selected day of the month from a date picker. This method returns an
integer value.
Below we get the selected day of the month from a date picker.
/*Add in Oncreate() funtion after setContentView()*/
DatePickersimpleDatePicker = (DatePicker) findViewById(R.id.simpleDatePicker); // initiate a date
picker
int day = simpleDatePicker.getDayOfMonth(); // get the selected day of the month
3. getMonth():
This method is used to get the selected month from a date picker. This method returns an integer value.
Below we get the selected month from a date picker.
DatePickersimpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); // initiate a date
picker
int month = simpleDatePicker.getMonth(); // get the selected month
4. getYear():
This method is used to get the selected year from a date picker. This method returns an integer value.
Below code is used to get the selected year from a date picker.
DatePickersimpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); // initiate a date
picker
int year = simpleDatePicker.getYear(); // get the selected year
5. getFirstDayOfWeek():
Information Sheet 3.2 – Controls Dr. Patrick D. Cerna Page 95
This method is used to get the first day of the week. This method returns an integer value.
Below code is used to get the first day of the week.
DatePickersimpleDatePicker = (DatePicker)findViewById(R.id.simpleDatePicker); // initiate a date
picker
References:
[1] Bill Phillips, Chris Stewart, Brian Hardy, and Kristin Marsicano, Android Programming: The Big
Nerd Ranch Guide, Big Nerd Ranch LLC, 3rd edition, 2017.
[2] Murphy, Mark (2013). Android Programming Tutorials.Commonware Books
[3] Cerna, Patrick (2017). Teachers Training Learning Materials: Mobile Communication Network and
Technology.