Mobile Application Development

Android UI Controls

Wasif Hamdani
 Create the App Project

• Launch Android Studio, and you should see a

welcome page, as shown below:

2
 Create the App Project

3
 Create the App Project

4
 Create the App Project

5
 Create the App Project

Coding the Hello World App

– The Default Main Activity Java Code
– Below is the default Java code generated by the
application for the main activity.

6
 Create the App Project

Coding the Hello World App

– The Default Layout XML File
– XML files are used for layouts.

7
 Create the App Project

Coding the Hello World App

– Changing the Activity Layout

8
 Create the App Project

Coding the Hello World App

– The Strings File
– The strings.xml file provides text strings for your
application. For example, a default strings file looks
like this: 

9
 Create the App Project

10
 Android UI Controls

UI Controls
– TextView
– EditText
– Button
– ImageButton
– ToggleButton
– CheckBox
– RadioButton
– RadioGroup
– ProgressBar

11
 Android UI Controls

UI Controls
– Spinner
– TimePicker
– DatePicker
– SeekBar
– AlertDialog
– Switch
– RatingBar

12
 Android UI Controls

TextView
TextView is a user interface control that is used to
display the text to the user.

13
 Android UI Controls

14
 Android UI Controls

EditText
EditText is a user interface control which is used to
allow the user to enter or modify the text.

15
 Android UI Controls

16
 Android UI Controls

Button
Button is a user interface control that is used to
perform an action when the user clicks or tap on it.

17
 Android UI Controls

18
 Android UI Controls

ImageButton
– Image Button is a user interface control that is used
to display a button with an image to perform an
action when the user clicks or tap on it.
– Generally, the Image button in android looks similar
as regular Button and perform the actions same as
regular button but only difference is for image
button we will add an image instead of text.

19
 Android UI Controls

20
 Android UI Controls

ToggleButton
– Toggle Button is a user interface control that is
used to display ON (Checked) or OFF (Unchecked)
states as a button with a light indicator.

21
 Android UI Controls

22
 Android UI Controls

Checkbox
– Checkbox is a two-states button that can be either
checked or unchecked.

23
 Android UI Controls

24
 Android UI Controls

Radio Button
– Radio Button is a two-states button that can be
either checked or unchecked and it cannot be
unchecked once it is checked.

25
 Android UI Controls

26
 Android UI Controls

Radio Group
– Radio Group is used to group one or more radio
buttons into separate groups based on our
requirements.
– In case if we group radio buttons using the radio
group, at a time only one item can be selected from
the group of radio buttons.

27
 Android UI Controls

28
 Android UI Controls

ProgressBar
– ProgressBar is a user interface control that is used
to indicate the progress of an operation. For
example, downloading a file, uploading a file.

29
 Android UI Controls

30
 Android UI Controls

Spinner
– Spinner is a drop-down list which allows a user to
select one value from the list.

31
 Android UI Controls

32
 Android UI Controls

TimePicker
– TimePicker is a widget for selecting the time of day,
either in 24-hour or AM/PM mode.

33
 Android UI Controls

34
 Android UI Controls

DatePicker
– DatePicker is a widget for selecting a date.

35
 Android UI Controls

36
 Android UI Controls

SeekBar
– SeekBar is an extension of ProgressBar control with
a draggable thumb. The SeekBar allows users to
touch the thumb and drag left or right to set the
current progress levels.
– The android SeekBar is one of the useful UI element
and it provides a user interface to select the integer
values within the defined range.

37
 Android UI Controls

38
 Android UI Controls

AlertDialog
– Dialog is a small window that prompt messages to
the user to make a decision or enter additional
details.
– AlertDialog is used to prompt a dialog to the user
with messages and buttons to perform an action to
proceed further.

39
 Android UI Controls

40
 Android UI Controls

Switch
– Switch is a two-state user interface element that is
used to display ON (Checked) or OFF (Unchecked)
states as a button with thumb slider.
– By using thumb, the user may drag back and forth
to choose an option either ON or OFF.
– The Switch element is useful for the users to change
the settings between two states either ON or OFF.

41
 Android UI Controls

42
 Android UI Controls

RatingBar
– RatingBar is a UI control that is used to get the
rating from the user. The RatingBar is an extension
of SeekBar and ProgressBar that shows a rating in
stars and it allows users to set the rating value by
touch or click on the stars.
– The android RatingBar will always return a rating
value as a floating-point number such as 1.0, 2.0,
2.5, 3.0, 3.5, etc.

43
 Android UI Controls

44
 Question(s)?

45
 Thank you 

46