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.
 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
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/a
ndroid” > <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.

ListView is a view group that displays a list of scrollable