Android Application Design

Essentials
UNIT-2
View class

1. This class represents the basic building block

for user interface components. A View occupies
a rectangular area on the screen and is
responsible for drawing and event handling.
2. View is the base class for widgets, which are
used to create interactive UI components
(buttons, text fields, etc.).
Layouts

1. A layout defines the structure for a user

interface in your app, such as in an activity. All
elements in the layout are built using a
hierarchy of View and ViewGroup objects.
2. A View usually draws something the user can
see and interact with. Whereas a ViewGroup is
an invisible container that defines the layout
structure for View and
other ViewGroup objects,-
ViewGroup

Android provides an XML vocabulary

for ViewGroup and View classes, so most of
your UI is defined in XML files.
 You can declare a layout in two ways:
1. Declare UI elements in XML. Android provides a
straightforward XML vocabulary that corresponds
to the View classes and subclasses, such as those
for widgets and layouts.You can also use Android
Studio's Layout Editor to build your XML layout
using a drag-and-drop interface.
2. Instantiate layout elements at runtime. Your app
can create View and ViewGroup objects (and
manipulate their properties) programmatically.
ViewGroup

1. The ViewGroup subclass is the base class

for layouts, which are invisible containers that
hold other Views (or other ViewGroups) and
define their layout properties.
2. public class View
extends Object implements Drawable.Callback,
KeyEvent.Callback, AccessibilityEventSource
1. Define a Button in the layout file and assign it a
unique ID
<Button android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_button_text"/>
2. From the onCreate method of an Activity, find
the Button Button myButton =
findViewById(R.id.my_button);
Build a simple user interface

1. The user interface (UI) for an Android app is

built as a hierarchy of layouts and widgets.
2. The layouts are ViewGroup objects, containers
that control how their child views are
positioned on the screen.
3. Widgets are View objects, UI components such
as buttons and text boxes.
VIEW
 Android terminologies

• Button
public class Button extends TextView
• A user interface element the user can tap or click
to perform an action.
• To display a button in an activity, add a button to
the activity's layout XML file:
• <Button android:id="@+id/button_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/self_destruct" />
 Layout resource
• A layout resource defines the architecture for the UI
in an Activity or a component of a UI.
• <ViewGroup>A container for other View elements.
• There are many different kinds
of ViewGroup objects and each one lets you specify
the layout of the child elements in different ways.
Different kinds of ViewGroup objects
include LinearLayout, RelativeLayout,
and FrameLayout.
• <View>
• An individual UI component, generally referred to
as a "widget". Different kinds of View objects
include TextView, Button, and CheckBox.
• <requestFocus>
• Any element representing a View object can
include this empty element, which gives its
parent initial focus on the screen. You can have
only one of these elements per file.
• <include>
• Includes a layout file into this layout.
 Write and View Logs with Logcat
• The Logcat window in Android Studio displays system
messages, such as when a garbage collection occurs,
and messages that you added to your app with
the Log class. It displays messages in real time and keeps
a history so you can view older messages.
• When an app throws an exception, logcat shows a
message followed by the associated stack trace
containing links to the line of code.
• To display just the information of interest, you can
create filters, modify how much information is displayed
in messages, set priority levels, display messages
produced by app code only, and search the log. By
default, logcat shows the log output related to the most
recently run app only.
 View your app logs

• To display the log messages for an app:

Build and run your app on a device.
• Click View > Tool Windows > Logcat
• The Logcat window shows the log messages
for the selected app, as selected from the
dropdown lists at the top of the window.
 The Logcat toolbar provides the
following buttons:
• Clear logcat : Click to clear the visible log.
• Scroll to the end : Click to jump to the bottom of the log and see the latest log
messages. If you then click a line in the log, the view pauses scrolling at that
point.
• Up the stack trace and Down the stack trace : Click to navigate up and down the
stack traces in the log, selecting the subsequent filenames (and viewing the
correspnding line numbers in the editor) that appear in the printed exceptions.
This is the same behavior as when you click on a filename in the log.
• Use soft wraps : Click to enable line wrapping and prevent horizontal scrolling
(though any unbreakable strings will still require horizontal scrolling).
• Print : Click to print the logcat messages. After selecting your print preferences in
the dialog that appears, you can also choose to save to a PDF.
• Restart : Click to clear the log and restart logcat. Unlike the Clear logcat button,
this recovers and displays previous log messages, so is most useful if Logcat
becomes unresponsive and you don't want to lose your log messages.
• Logcat header : Click to open the Configure Logcat Header dialog, where you can
customize the appearance of each logcat message, such as whether to show the
date and time.
• Screen capture : Click to capture a screenshot.
• Screen record : Click to record a video of the device (for a maximum of 3
minutes).
 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. Toasts
automatically disappear after a timeout.
• Toasts are not clickable
• First, instantiate a Toast object with one of
the makeText() methods. This method takes three parameters:
the application Context, the text message, and the duration for
the toast. It returns a properly initialized Toast object. You can
display the toast notification with show()
• Ex:
• Context context = getApplicationContext();
CharSequence text = "Hello toast!";
int duration = Toast.LENGTH_SHORT;
Toast toast = Toast.makeText(context, text, duration);
toast.show();
 User Interface Design Essentials
• Your app's user interface is everything that the user can see and interact with.
Android provides a variety of pre-built UI components such as structured layout
objects and UI controls that allow you to build the graphical user interface for your
app. Android also provides other UI modules for special interfaces such as dialogs,
notifications, and menus.
• Layouts
• Notifications Overview
• Add the app bar
• Control the system UI visibility
• Designing effective navigation
• Implementing effective navigation
• Slide between fragments using ViewPager
• Supporting Swipe-to-Refresh
• Toasts overview
• Pop-up messages overview
• Dialogs
• Menus
• Search Overview
• Copy and Paste
• Drag and Drop
• Create backward-compatible UIs
User Interface Design Essentials(contd..)

• Notifications Overview
• A notification is a message that Android
displays outside your app's UI to provide the
user with reminders, communication from
other people, or other timely information
from your app. Users can tap the notification
to open your app or take an action directly
from the notification.
 User Interface Screen elements
• A typical user interface of an android
application consists of action bar and the
application content area.
• Main Action Bar
• View Control
• Content Area
• Split Action Bar
• Understanding Screen Components
• The basic unit of android application is the
activity. A UI is defined in an xml file. During
compilation, each element in the XML is
compiled into equivalent Android GUI class
with attributes represented by methods.
• View and ViewGroups
• An activity is consist of views. A view is just a
widget that appears on the screen. It could be
button e.t.c. One or more views can be
grouped together into one GroupView.
Example of ViewGroup includes layouts.
 Types of layout

• There are many types of layout. Some of

which are listed below −
• Linear Layout
• Absolute Layout
• Table Layout
• Frame Layout
• Relative Layout
 Linear Layout

• Linear layout is further divided into horizontal and

vertical layout. It means it can arrange views in a single
column or in a single row. Here is the code of linear
layout(vertical) that includes a text view.
• <?xml version=”1.0” encoding=”utf-8”?> <LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/
android” android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” > <TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” /> </LinearLayout>
 AbsoluteLayout
• The AbsoluteLayout enables you to specify the
exact location of its children. It can be declared like
this.
• <AbsoluteLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/
res/android” > <Button
android:layout_width=”188dp”
android:layout_height=”wrap_content”
android:text=”Button” android:layout_x=”126px”
android:layout_y=”361px” /> </AbsoluteLayout>
 TableLayout
• The TableLayout groups views into rows and
columns. It can be declared like this.
• <TableLayout
xmlns:android=”http://schemas.android.com/
apk/res/android”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent” >
<TableRow> <TextView android:text=”User
Name:” android:width =”120dp” /> <EditText
android:id=”@+id/txtUserName”
android:width=”200dp” /> </TableRow>
</TableLayout>
 RelativeLayout
• The RelativeLayout enables you to specify how
child views are positioned relative to each
other.
• <RelativeLayout android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/a
pk/res/android” > </RelativeLayout>
 FrameLayout
• The FrameLayout is a placeholder on screen that
you can use to display a single view.
• <?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/lblComments”
android:layout_below=”@+id/lblComments”
android:layout_centerHorizontal=”true” >
<ImageView android:src = “@drawable/droid”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</FrameLayout>
 • there are other attributes that are common in
all views and ViewGroups. They are listed below
Sr.N − View description
o
1 layout_width Specifies the width of the View or ViewGroup

2 layout_height Specifies the height of the View or ViewGroup

3 layout_marginTop Specifies extra space on the top side of the View

or ViewGroup
4 layout_marginBottom Specifies extra space on the bottom side of the
View or ViewGroup
5 layout_marginLeft Specifies extra space on the left side of the View
or ViewGroup
6 layout_marginRight Specifies extra space on the right side of the
View or ViewGroup
7 layout_gravity Specifies how child Views are positioned

8 layout_weight Specifies how much of the extra space in the

layout should be allocated to the View
 Units of Measurement
• When you are specifying the size of an
element on an Android UI, you should
remember the following units of
measurement
Sr.No Unit & description
1 dp Density-independent pixel. 1 dp is equivalent to
one pixel on a 160 dpi screen.
2 sp Scale-independent pixel. This is similar to dp and
is recommended for specifying font sizes
3 pt Point. A point is defined to be 1/72 of an inch,
based on the physical screen size.
4 px Pixel. Corresponds to actual pixels on the screen
 Screen Densities

Sr.No Density DPI

1 Low density (ldpi) 120 dpi

2 Medium density (mdpi) 160 dpi

3 High density (hdpi) 240 dpi

4 Extra High density (xhdpi) 320 dpi

Sr.No Layout Description

1 • A layout may contain

Linear Layout LinearLayoutany type
is a view group of
that widgets such
aligns all children in a
single direction, vertically or horizontally.
as buttons, labels, textboxes, and so on.

2 Relative Layout RelativeLayout is a view group that displays child views in

relative positions.

3 Table Layout TableLayout is a view that groups views into rows and
columns.
4 Absolute Layout. AbsoluteLayout enables you to specify the exact location
of its children

5 Frame Layout The FrameLayout is a placeholder on screen that you can

use to display a single view.