WIA2007

MOBILE APPLICATION DEVELOPMENT

USER INTERFACE: LAYOUTS, VIEWS AND WIDGETS
(PART 1)
Originally Created by S. Ong
Modified by Chiew, TK
Semester 1, 2024/2025

[email protected]
 2

ANDROID APP COMPONENTS

ACTIVITIES
• Recall the question
• Do we need to implement ALL lifecycle methods?

[email protected]
 3

TODAY’S OUTLINE
❑Basic Understanding of Layout Objects in Android
❑ Examples of View

[email protected]
 4

UNDERSTANDING BASIC
LAYOUT OBJECTS IN ANDROID
View versus ViewGroup
 5

LAYOUT
• Defines the structure of interface in your app.
• All elements in layout are built using a hierarchy of View
and ViewGroup objects.
• Arranged in tree manner.

Component tree in
layout XML file.

[email protected]
 6

LAYOUT OBJECT - VIEW

• View class:
• Basic building block for
user interface
components.
• Rectangular area on
the UI.
• Responsible for drawing
and event handling.
• Base class for widgets
• Used to create
interactive UI
components (buttons,
text fields, etc.).

[email protected]
 7

LAYOUT OBJECT - VIEW

• View class:
• Draw something users
can see and interact
with.

Can drag and drop

widget from Palette.

[email protected]
 8

LAYOUT OBJECT - VIEWGROUP

• ViewGroup:
• The ViewGroup subclass is the base class for layouts
• Invisible container that defines the layout structure /
properties and hold other Views (or ViewGroups).
• Special View that can contains other Views.
• E.g., LinearLayout and ConstraintLayout

[email protected]
 9

LAYOUT
• Three ways to define layout:
1. Declare UI elements in XML
• Either write it in XML or use the drag-and-drop feature in
Layout’s Editor
• XML vocabulary for the widget and layout
2. Instantiate elements at runtime
• Do it programmatically
• App will create view and viewgroup when you run it.
3. Or hybrid!
• Always a good habit to separate frontend and
backend codes – easier to control the screen size
changes and orientation too.

[email protected]
SOME SUBCLASSES OF VIEW CLASS
10
 11

ID
• All view object has their own unique ID (in interger
format) associated when it’s first created / added:
• Used to uniquely identify them in the layout component
tree.
• When the app is compiled, the ID is referenced as
integer in the background
• But on XML file, the view object is identified using String
ID, in the id attribute:

• Plus “+” sign indicate adding new resource name into

R.java resource file.

[email protected]
 12

ID
• Also, when we are creating a new View object without
“adding” it into the resources
• Instead, we are using the resource from Android
package
• For instance, when we are declaring custom listview in
the layout file:
• When the listview contains data, you use your own
listview object.
• When the listview is empty, you are referencing to the
empty listview resource defined in the Android package
from android.R resource file (instead the local defined
one):

[email protected]
 13

CREATE AND REFERENCE

VIEW
• Define the widget / View in the XML layout file.
• With object ID provided.

• In the java file, you can reference to the widget / View

object by:

[email protected]
 14

BASIC BUILDING BLOCKS

IN XML
• Similar to HTML pages
• Use tags and hierarchical structure (nested manner) to
organize the view and viewgroup, and define their
attributes.

[email protected]
 15

BASIC BUILDING BLOCKS

IN XML
• Each layout file must contain at least ONE root element,
that holds the other layout objects (nested layout or
widget)

[email protected]
 16

BASIC BUILDING BLOCKS

IN XML

What is the root element here?

Which one is view and which one is
viewgroup?

[email protected]
 17

ATTRIBUTES
• View and viewgroup
has their own attributes
• To define their
appearance
• To define some basic
behaviors

Attribute Panel
- The attribute
changes when
different widget /
layout is selected.

[email protected]
 18

ATTRIBUTES
• Attribute types:
• Common attribute: Attribute inherited from the root View
object, such as id.
• Specific attribute: TextSize in TextView
• Inherited attribute: Specific attribute that can be
extended by the inherited view objects.
• Layout parameter: layout settings in view object inherited
from the viewgroup object.

[email protected]
 19

LAYOUT PARAMETER
• Special attribute inherited from the chosen ViewGroup
to the View object.
• Format of such parameter: layout_something

[email protected]
 20

LAYOUT PARAMETER
• All the child object must define Layout Parameter that
are appropriate to its (direct) parent.
• For example:
• All viewgroup has layout_width and layout_height
• All the child object must define them.
• Each ViewGroup.LayoutParams has their own syntax to
set values.

[email protected]
 21

LAYOUT PARAMETER
• But generally, all of them have syntax to set width and
height (layout_height and layout_width):
• wrap_content: tells your view to size itself to the
dimensions required by the content.
• match_parent: tells your view to become as big as its
parent ViewGroup will allow.

[email protected]
 22

LAYOUT PARAMETER
• But generally, all of them
have syntax to set width
and height (layout_height
and layout_width):
• Specifying these settings
with absolute units such as
pixels is not
recommended.
• Use relative measurement
is better approach.
em: computed pixel size based on font size of that element’s parent.
rem: computed pixel size based on font size of that root’s element.

%: need to use layout_weight=“.60” to indicate 60% of the space (layout_width needs to set
to 0)
[email protected]
 23

LAYOUT PARAMETER
1 px =0.2646mm

[email protected]
 24

LAYOUT POSITION
• A view has its location, and can be expressed using its
top and / or left coordinates.
• Expressed in pixels.
• Possible methods to retrieve a View’s location:
• getLeft(): returns left or X coordinate of the rectangle
representing the view.
• getTop(): returns top or Y coordinate of the rectangle
representing the view.
• Other methods: getBottom() and getRight()

[email protected]
 25

SIZE, MARGIN AND PADDING

• Size of a view is expressed by width and height.
• Two pairs of width and height values for each view:
• Measured width (getMeasuredWidth()) and measured
height (getMeasuredHeight()): define how big a view
wants to be within its parent.
• Width (getWidth()) and height (getHeight()) (drawing
width and drawing height): define actual size of the view
on screen.
• These two pairs may or may not be different.

[email protected]
 26

SIZE, MARGIN AND PADDING

• Padding is included into a view’s dimension.
• Expressed in pixels for the left, top, right, bottom parts of
the view.
• Can also be used as offset to the content.
• Define and retrieve padding:
• setPadding (int, int, int, int)
• getPaddingLeft(), getPaddingTop(), getPaddingRight(),
getPaddingBottom().
• View does not provide support to margin.
• But ViewGroup does.
• Difference between margin and padding?
[email protected]
 27

MARGIN VS PADDING
• Which one is margin and which one is padding?

[email protected]
 28

VIEW
Some examples of widgets
 29

TEXTVIEW
• A user interface element that displays text to the user.

[email protected]
 30

BUTTON
• A user interface element the user can tap or click to
perform an action.
• Few methods to create button event listener
• Create an instance of OnClickListener
• Create a public action method and assign it to OnClick
attribute

Use OnClick attribute

Use OnClickListener

[email protected]
 31

BUTTON EVENT LISTENER

Use OnClickListener

Use OnClick attribute

[email protected]
 32

BUTTON EVENT LISTENER

Use OnClickListener

Use OnClick attribute

[email protected]
 33

EDITTEXT(VARIOUS INPUT)

• May specify input type via android:inputType

attribute in the layout -> corresponding keypad will
be displayed during user input:
• text: normal text keyboard
• textEmailAddress: normal text keyboard with @ char
• textUri: normal text keyboard with / char
• phone: phone-styled key pad
• number: basic number key pad

[email protected]
 34

EDITTEXT(VARIOUS INPUT)
• May specify input type via
android:inputType attribute in the
layout (continue):
• textCapSentences: normal text
keyboard that capitalizes first letter of
each new sentence.
• textCapWords: normal text keyboard
that capitalizes first letter of each new
words.
• textAutoCorrect: normal text keyboard
that corrects commonly misspelled
word.
• textPassword: normal text keyboard,
turn char to dot.
• textMultiline: normal text keyboard that
allows long strings with new line break.
• Etc.

[email protected]
 35

EDITTEXT(VARIOUS INPUT)
• Can also enter multiple input types:
• android:inputType="textPostalAddress|
textCapWords|
textNoSuggestions"

[email protected]
 36

RADIO BUTTON
• Allow users to select ONE
option from a set of
available options.
• Grouped by using
RadioGroup

[email protected]
 37

<TextView
android:id="@+id/textView"
android:layout_width="305dp"
android:layout_height="47dp"
android:layout_marginStart="32dp"
RADIO BUTTON - XML
android:layout_marginTop="100dp"
android:text="How do you want to subscribe to the newsletter?"
android:textSize="16sp"
<RadioButton
app:layout_constraintStart_toStartOf="parent"
android:id="@+id/RBAnnually"
app:layout_constraintTop_toTopOf="parent" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<RadioGroup android:layout_marginStart="32dp"
android:id="@+id/RGSubscription" android:layout_marginTop="8dp"
android:layout_width="wrap_content" android:text="Annually @ RM100"
android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp" app:layout_constraintTop_toBottomOf="@+id/RBMonthly" />
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent" <RadioButton
app:layout_constraintTop_toBottomOf="@+id/textView"> android:id="@+id/RBSkip"
android:layout_width="wrap_content"
<RadioButton android:layout_height="wrap_content"
android:id="@+id/RBMonthly" android:layout_marginStart="32dp"
android:layout_width="wrap_content" android:layout_marginTop="8dp"
android:layout_height="wrap_content" android:text="I will skip this time."
android:layout_marginStart="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@+id/RBAnnually" />
</RadioGroup>
android:text="Monthly @ RM9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
[email protected]
 38

RADIO BUTTON - BACKEND

RadioGroup RGSubscription = findViewById(R.id.RGSubscription);
RGSubscription.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton radioButton = (RadioButton) findViewById(checkedId);
String message = "";
switch(checkedId) {
case R.id.RBMonthly:
message = "Thank you for the monthly subscription. See you next month!";
break;
case R.id.RBAnnually:
message = "Smart choice selecting annual subscription, special 30% discount codes for purchasing other
product: DC1030.";
break;
case R.id.RBSkip:
message = "Please come again next time!";
break;
}

Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();

}
});

[email protected]
 39

SWITCH AND TOGGLE BUTTON

• Similar concept as Checkbox and Radio Button, but
only support 2 states:
• On and off
• Also use setOnChangedListener

[email protected]
 40

SPINNER
• Selecting one item from the drop-down items.

[email protected]
 41

SPINNER - XML
<Spinner
android:id="@+id/DDLAppointment2"
android:layout_width="215dp"
android:layout_height="48dp"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:background="#CEC1E4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.098"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/TVAppointment"
tools:ignore="SpeakableTextPresentCheck" />

[email protected]
 42

SPINNER - BACKEND
Spinner DDLAppointment2 =(Spinner) findViewById(R.id.DDLAppointment2);
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.MorningSlots, android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
DDLAppointment2.setAdapter(adapter);

DDLAppointment2.setOnItemSelectedListener(
new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
Toast.makeText(getApplicationContext(), parent.getItemAtPosition(pos).toString(),
Toast.LENGTH_SHORT).show();
}
public void onNothingSelected(AdapterView<?> parent) {
}
});

[email protected]
 43

AUTO-COMPLETE TV
• Editable TextView that
provides suggestion for user
to select from in order to
“auto-complete” their text.

[email protected]
 44

AUTO-COMPLETE TV - XML
<AutoCompleteTextView
android:id="@+id/ACTVBirthMonth"
android:layout_width="211dp"
android:layout_height="58dp"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:minHeight="48dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/TVBirthMonth"
tools:ignore="SpeakableTextPresentCheck" />

<TextView
android:id="@+id/TVBirthMonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="64dp"
android:text="Your Birth Month:"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

[email protected]
 45

AUTO-COMPLETE TV -
BACKEND
private static final String[] BIRTHMONTHS = new String[] {
"January", "February", "March", "April", "May"
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_auto_complete_demo);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, BIRTHMONTHS);
AutoCompleteTextView ACTVBirthMonth = (AutoCompleteTextView)
findViewById(R.id.ACTVBirthMonth);
ACTVBirthMonth.setAdapter(adapter);
}

[email protected]
 46

OTHER INPUT CONTROLS

• Many other input controls to
explore:
• Date time picker
• Floating action button
• Etc.

• But, how do we navigate

from one activity to
another?
• Next Chapter.

[email protected]