App Interface

Mobile Application development

 App Interface:
View and ViewGroup

2
 Everything you see is a view

• If you look at your mobile device,

every user interface element that you
see is a View.

• View subclasses are basic user

interface building blocks.

• Over 100 different types of views

available from the Android system, all
children of the View class.

3
 Examples of view subclasses

Button CheckBox

EditText RadioButton

Slider Switch

4
 ViewGroup and View hierarchy
• The graphical user interface for an Android app is built using a
hierarchy of View and ViewGroup objects.

• View objects are usually UI widgets such as buttons or text fields.

• ViewGroup objects are invisible view containers that define how the
child views are laid out, such as in a grid or a vertical list.

5
ViewGroup and View hierarchy

6
 ViewGroups for layouts

Layouts
• are specific types of ViewGroups (subclasses
of ViewGroup)
• contain child views
• can be in a row, column, grid, table, absolute

7
 Common Layout Classes

LinearLayout ConstraintLayout GridLayout TableLayout

8
View hierarchy and screen layout

9
View hierarchy in the layout editor

10
 Create views and layouts

There are several ways to create views and layotus:

1. Android Studio layout editor: visual representation of XML

2. XML editor
>> Intermixing both is allowed and recommended

3. Java code

11
 Android Studio layout editor

1. XML layout file

2. Design and Text tabs
3. Palette pane
4. Component Tree
5. Design and blueprint panes
6. Attributes tab

12
 Layout created in XML
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
... />
<TextView
... />
<Button
... />
</LinearLayout

13
 Best practices for view hierarchies

• Arrangement of view hierarchy affects app performance

• Use smallest number of simplest views possible
• Keep the hierarchy flat—limit nesting of views and view groups

14
TextView and EditText

15
 TextView for text
• TextView is View subclass for single and multi-line text
• EditText is TextView subclass with editable text
• Controlled with layout attributes
• Set text:
– Statically from string resource in XML
– Dynamically from Java code and any source

16
 Creating TextView in XML
<TextView android:id="@+id/textView_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/welcome_message"/>

17
 Common TextView attributes

android:text—text to display
android:textColor—color of text
android:textAppearance—predefined style or theme
android:textSize—text size in sp
android:textStyle—normal, bold, italic, or bold|italic
android:typeface—normal, sans, serif, or monospace
android:lineSpacingExtra—extra space between lines in sp

18
 android:id attribute
android:id="@+id/textView_message"

• This provides a unique identifier for the view, which you can use to reference the
object from your app code, such as to read and manipulate the object.

• The at sign (@) is required when you're referring to any resource object from XML.
It is followed by the resource type (id in this case), a slash, then the resource name
(textView_message). (Note that textView_message is a user chosen name).

• The plus sign (+) before the resource type is needed only when you're defining a
resource ID for the first time.

19
 android:layout_width & android:layout_height

• The user can provide specific values for attributes android:layout_width and
android:layout_height.
• Android supports the following measurements:
– px (Pixels) - Actual pixels or dots on the screen.
– in (Inches) - Physical size of the screen in inches.
– mm (Millimeters) - Physical size of the screen in millimeters.
– pt (Points) - 1/72 of an inch.
– dp (Density-independent Pixels): density-independent
pixels (also
known as device-independent-pixels) help to keep UI elements
the same physical size across the different screen density
devices.
• Example: android:layout_width = “20dp”

20
 android:layout_width & android:layout_height

• Instead of using specific sizes for the width and height, the "wrap_content" value
specifies that the view should be only as big as needed to fit the contents of the
view.

• If you were to instead use "match_parent", then the view would fill its parent.

21
 Adding String Resources
• When you need to add text in the user interface, you should always specify
each string as a resource.

• String resources allow you to manage all UI text in a single location, which
makes it easier to find and update text.

• Externalizing the strings also allows you to localize your app to different
languages by providing alternative definitions for each string resource.

• By default, your Android project includes a string resource file

at res/values/strings.xml.

• Add a new string named "welcome_message" and set the value to "Welcome
to CENG435." ( note that "welcome_message" is the string variable name
while "Welcome to CENG435." is the content that will displayed on the screen).

22
 String.xml file

<?xml version="1.0" encoding="utf-8"?>

<resources>
<string name="app_name">My First App</string>
<string name="welcome_message">Welcome to CENG435.</string>

</resources>
Variable name value

• In this file, we have 2 strings. One of them was added

automatically by Android Studio (app_name), while the
other was added manually (welcome_message).

23
 Creating EditText in XML

<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message_hint" />

• The hint is a default string to display when the EditText field is

empty. It disappears when we start typing.

24
Toasts

25
 Toasts
• A toast provides simple feedback about an
operation in a small popup.

• It only fills the amount of space required for

the message and the current activity remains
visible and interactive.

• For example, navigating away from an email

before you send it triggers a "Draft saved"
toast to let you know that you can continue
editing later.

• Toasts automatically disappear after a

timeout.

26
 Toasts
• To create a Toast, here is an example:

Toast.makeText(this, "Type your message here",

Toast.LENGTH_SHORT).show();

27
Event Handling

28
 Events

Something that happens

● In UI: Click, tap, drag
● Device: DetectedActivity such as walking,
driving, tilting
● Events are "noticed" by the Android system

29
 Event Handlers

Methods that do something in response to a

click
● A method, called an event handler, is
triggered by a specific event and does
something in response to the event

30
 Event handler for button click
Let’s add a button to the activity layout:
• <Button anroid:id="@+id/button_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text" />

31
 Attach in XML and implement in
Java
Attach handler to view in XML layout: Implement handler in Java activity:

android:onClick="addValues" public void addValues(View view)

{
// code that adds values and
shows result…
}

The signature must be exactly as shown:

• Be public
• Have a void return value
• Have a View as the only parameter (this will be the View that was clicked)

32
 Attach in XML and implement in Java
The button declaration code in XML becomes:
• <Button anroid:id="@+id/button_toast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:onClick="addValues" />

33
 Alternative: Set click handler in
Java
Button button = (Button) findViewById(R.id.button_toast);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// code that adds values and shows result…
}
});

34
Resources and measurements

35
 Resources

• Separate static data from code in your layouts.

• Strings, dimensions, images, menu text,
colors, styles

36
Where are the resources in your
project?

resources and resource files

stored in res folder

37
Refer to resources in code

• Layout:
R.layout.activity_main
setContentView(R.layout.activity_main);

• View:
R.id.recyclerView
rv = (RecyclerView) findViewById(R.id.recyclerView);

• String:
In Java: R.string.title
In XML: android:text="@string/title"

38
 Measurements

● Density-independent Pixels (dp): for Views

● Scale-independent Pixels (sp): for text
Don't use device-dependent or density-
dependent units:
● Actual Pixels (px)
● Actual Measurement (in, mm)
● Points - typography 1/72 inch (pt)

39