4 INTERFACE AND LAYOUT

Android GUI –the concept

 GUI = hierarchy of View and ViewGroup
objects
 View = UI component (e.g. button, textfields,
imageviews,..)
 ViewGroup = containers that have a layout
defined controlling how View widgets are
arranged in it.
Software components -
activity
 The simplest application
is composed of a single
activity that ‘inflates’ a
User UI, defined by an XML file
Interface (some similarity with
HTML)
 An activity is an event-
triggered software
component staying
Activity behind a UI and
managed by the
operating system via
callbacks or hooks
 It also reacts to user
generated events coming
from UI via handlers (e.g.,
push a button)
Layouts
 An Android layout is a class that handles
arranging the way its children appear on the
screen. Anything that is a View (or inherits
from View) can be a child of a layout. All of
the layouts inherit from ViewGroup (which
inherits from View) so you can nest layouts.
You can also create your own custom layout
by making a class that inherits
from ViewGroup.
 The image below illustrates the inheritance
hierarchy between views in Android.
User
interface
 The View 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.
 View is the base class for widgets,
which are used to create interactive UI
components (buttons, text fields etc.).
 The ViewGroup subclass is the base
class for layouts, which are invisible
Views
 There are many
 android.view.View.* = base class for all
Views.
 example sub-classes include: TextView, ImageView, etc.
 ViewGroup
android.view.ViewGroup = Layout for views it
contains, subclasses include
android.widget.LinearLayout
android.widget.AbsoluteLayout

---specify Layout
android.widget.TableLayout
android.widget.RelativeLayout
android.widget.FrameLayout
android.widget.ScrollLayout

Controls location of Views in that ViewGroup

 LinearLayout: all children aligned in single

direction, horizontally or vertically

 RelativeLayout: Child object relative to each

other
 GridView: displays items in two-dimensional,

scrollable grid
 Absolute & Frame Layouts also
Interfaces: Two Alternatives
for creation: Code or XML
 You have two ways you can create the
interface(s) of your Application.
1. Code = write code using SDK with
classes like LinearLayout, TextView, ……

2. XML = create XML files in res/Layout

(i.e. main.xml) that contain Android
XML view tags like <LinearLayout>
<TextView>, etc.
Option: XML Interface
Lets look at this option first
XML Interface Creation
 Generally, doing XML would be better as
it means a decoupling of design from
Java code.
 You can have both in your system….
The Layout --- the interface
 Layouts defined with XML located in
res/layout
The Layout-the interface
 res/layout/activity_main.xml = contains
layout for interface
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
The above will create an interface in vertical (versus portrait) mode that fills
the parent
XML interface
 Look to API for details Each XML file
contains a tree of elements specifying a
layout of widgets and containers that
make up one View.

 The attributes of the XML elements are

properties, describing how a widget
should look or how a container should
behave
XML interface
 <TextView
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"/>
 xmlns:android XML namespace declaration that tells the Android
tools that you are going to refer to common attributes defined in
the Android namespace. The outermost tag in every Android layout
file must have this attribute.
 android:layout_width This attribute defines how much of the
available width on the screen this View should consume. As it's the
only View so you want it to take up the entire screen, which is what
a value of "fill_parent" means.
android:layout_height This is just like android:layout_width, except
that it refers to available screen height.
 android:text This sets the text that the TextView should display. In
this example, you use a string resource instead of a hard-coded
Displaying the Application’s
View
 The Android UI Framework paints the screen
by walking the View tree by asking each
component to draw itself in a pre-order
traversal way.

 Each component draws itself and then

asks each of its children to do the same.
root
Using Android Studio IDE to
Visually Create XML file
 Visual creation of XML file
 Create File-> New->XML -> Layout XML
File
 Specify name of xml file
 Specify Layout type
Visually creating interface
in drag and drop
 Drag and drop
 Call alter properties in Properties window
 Below is a LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"

Here is code
android:layout_height="match_parent"
android:orientation="vertical">

<TextView

of
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please Login"
android:id="@+id/textView_TopLabel" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout created
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="login"
android:id="@+id/textView_login" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText_Login" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="password"
android:id="@+id/textView_password" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText_Password" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button_Enter" />
</LinearLayout>
 XML Interface tags
Besides drag and
drop you can edit
the xml file
directly….
Lets return to looking at
some of the possible
ViewGroup Layouts
 Layouts determines how
the widgets will be placed
inFrameLayout
UI
 LinearLayout
 A Layout that arranges its children in a single column or a single

row. The direction of the row can be set by calling setOrientation

(). You can also specify gravity, which specifies the alignment of
all the child elements by calling setGravity() or specify that
specific children grow to fill up any remaining space in the
layout by setting the weight member of
LinearLayout.LayoutParams. The default orientation is
horizontal.
 RelativeLayout
LinearLayout RelativeLayout GridLayout
 GridLayout
Frame Layout
 FrameLayout is the simplest type of
layout object. It's basically a blank
space on your screen that you can later
fill with a single object —for example, a
picture that you'll swap in and out.
 All child elements of the FrameLayout
are pinned to the top left corner of the
screen; you cannot specify a different
location for a child view.
 Subsequent child views will simply be
drawn over previous ones, partially or
Linear Layouts
 Good for smaller devices (like phones
over Tablets) or when simple interface
makes sense
LinearLayout

More commonly
used in Vertical
Orientation
LinearLayout
Good:
 Simple
 Know exactly how it will look on every
device
Bad:
 too much simple look….
BUT  see next slide
 BUT, REMEMBER you can have a ViewGroup
(another Layout) inside as a member of the
LinearLayout to make a more COMPLEX
interface
Example
 LinearLayout Very SIMPLE
Example
 arranges by single column (vertical
orientation)

<?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" >

<Text View
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
VERY simple
android:text=“@string/hello”/> example – LinearLayout with one
child View object, a TextView saying Hello….

</LinearLayout>
LinearLayout Example 2
<?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" >

<Button android:id="@+id/btn_webbrowser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Web Browser“
android:onClick="onClickWebBrowser" />

<Button android:id="@+id/btn_makecalls"
android:layout_width="fill_parent"
android:layout_height="wrap_content“
android:text="Make Calls"
android:onClick="onClickMakeCalls" />

<Button android:id="@+id/btn_showMap"
android:layout_width="fill_parent"
android:layout_height="wrap_content“
android:text="Show Map"
android:onClick="onClickShowMap" />

<Button android:id="@+id/btn_launchMyBrowser"
LinearLayout with 4 child View objects,
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Launch My Browser"all are buttons
android:onClick="onClickLaunchMyBrowser" />
Each View or ViewGroup can have its own
set of attributes…but, some are very
common
Attribute Description

layout_width specifies width of View or

ViewGroup
layout_height specifies height
layout_marginTop extra space on top
layout_marginBottom extra space on bottom side
layout_marginLeft extra space on left side
layout_marginRight extra space on right side
layout_gravity how child views are positioned
layout_weight how much extra space in layout
should be allocated to View (only
when in LinearLayout or
TableView)
layout_x x-coordinate
Linear layout (fill
model)
Linear layout (fill
model)
Linear layout (vertical)
android:width=fill_parent
Linear layout
(weight)
 Sub-view in LinearLayout has an important
attributes: android: layout_weight.
 This attribute assigns an "importance"
value to a view in terms of how much
space it should occupy on the screen.
 A larger weight value allows it to expand
to fill any remaining space in the parent
view.
 Child views can specify a weight value,
and then any remaining space in the view
group is assigned to children in the
Linear layout
(weight)
 The
subcomponents
that have weight
will fill the
remaining space
of LinearLayout
in proportion to
its weight.
Linear layout (layout_gravity vs
gravity)
 android:layout_gravity sets the gravity
of the View or Layout in its parent.
 android:gravity sets the gravity of the
content of the View its used on (for
example, Text inside the TextView).
Linear layout
(padding)
Linear layout
(padding)
Widget margin Widget Padding

Cell Frame
Boundary
Linear layout
(padding)
What about more complex
interfaces?
…..yes you can do this especially with
Nested Layouts
More Complexity  Example
of Nested LinearLayouts
 Here have First LinearLayout (vertical)
that contains ImageView and then
another LinearLayout (itself has 2 TextViews)
ImageView

2
TextViews
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
Another Nested LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
Example <LinearLayout
android:layout_height="match_parent" <TextView android:layout_width="match_p
arent"
android:layout_margin="10dp" android:layout_width="wrap_conten
t" android:layout_height="wrap_co
android:orientation="vertical"> ntent"
android:layout_height="wrap_conte
<TextView nt" android:layout_marginTop="10d
android:layout_width="wrap_content" p"
android:layout_marginTop="20dp"
android:layout_height="wrap_content" android:orientation="horizontal"
android:text="Using weightSum"
android:text="Without using weightSum" android:textColor="@android:color/ android:weightSum="1">
black"
android:textColor="@android:color/black" <Button

android:textSize="25sp" /> android:textSize="25sp" /> android:layout_width="wrap_

content"
<LinearLayout
android:layout_height="wrap
android:layout_width="match_parent" <LinearLayout _content"
android:layout_height="wrap_content" android:layout_width="match_pare android:layout_weight="0.5"
nt"
android:orientation="horizontal"> android:text="Android" />
android:layout_height="wrap_conte
nt" <Button
<Button android:orientation="horizontal" There are
android:layout_width="wrap_
content" 3 LinearLayouts
android:layout_width="wrap_content" android:weightSum="1">
nested inside the
android:layout_height="wrap
android:layout_height="wrap_content"
_content" outer LinearLayou
android:text="Android" /> <Button android:layout_weight="0.5"
android:layout_width="wrap_cont android:text="C" />
ent"
<Button
</LinearLayout>
android:layout_height="wrap_con
android:layout_width="wrap_content"
tent" <LinearLayout
android:layout_height="wrap_content"
android:layout_weight="0.7" android:layout_width="match_p
android:text="Java" /> arent"
android:text="Android" />
</LinearLayout> android:layout_height="wrap_co
<Button ntent"
You can nest Any kind of Layouts
–like here
 you can have a ViewGroup (another
Layout) inside as a member of the
LinearLayout to make a more COMPLEX
interface
Whatever Layout you choose
---it will contain Views and
even other Layouts
 As we see here we have an Interface
that overall is a LinearLayout
 It contains 2 Views and 1 RelativeLayout
 The RelativeLayout contains 3 Views
Another Option to reduce
the complex layout
structure is - Relative
Layouts
 RelativeLayout is good ---and can
make your design EASIER
 Note: there is more than one way to
use Layouts to create a look in an
interface that is the same ---so, this
in part is an art and in part how you
think of things ---but, sometimes as
we will see later some Layouts can
be faster (especially when
compared to nested layouts)
Relative Layouts
 RelativeLayout is a view group that displays
child views in relative positions. The position of
each view can be specified as relative to sibling
elements (such as to the left-of or below another
view) or in positions relative to the parent
RelativeLayout area (such as aligned to the
bottom, left or center).
 A RelativeLayout is a very powerful utility for
designing a user interface because it can
eliminate nested view groups and keep your
layout hierarchy flat, which improves
performance. If you find yourself using several
nested LinearLayout groups, you may be able
to replace them with a single RelativeLayout.
 RelativeLayout
GOOD:
 Can give more complex
interfaces
 Know what will look like on
different sized devices
 Position relative to another
position
RelativeLayout – how it
works
Parameters in XML (or can map to method calls in
Java RelativeLayout class)
 Position relative to Parent
android:layout_alignParentTop,
android:layout_alignParentBottom,
android:layout_alignParentLeft,
android:layout_alignParentRight
VALUE = ‘true’ ---If "true", moves to that edge of
Parent
android:layout_centerVertical
VALUE= “true” -- If "true", centers this child vertically
within its parent.
 Position relative to another widget
android:layout_below, android:layout_above,
android:layout_toLeftOf, android:layout_toRightOf
 RelativeLayout – how it
works
Example
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
Says we have RelativeLayout
android:layout_height="match_parent"
android:paddingLeft="16dp" that width and height match parent
android:paddingRight="16dp" > (which is the entire app screen)
<EditText
android:id="@+id/name"
android:layout_width="match_parent" st
android:layout_height="wrap_content"1 View object in RelativeLayout
android:hint="@string/reminder" /> will be at the top and is the EditText
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
2nd View object here is specified to be
android:layout_height="wrap_content"
android:layout_below="@id/name" below the 1 object EditText (id = name)
st

android:layout_alignParentLeft="true"& aligned to left of parent(app)

android:layout_toLeftOf="@+id/times" & Left
/> of the Button with id=times (see below)
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content" 3rd View object here is specified to be
android:layout_below="@id/name" below the 1st object EditText (id = name)
android:layout_alignParentRight="true" />
& aligned to left of parent(app)
<Button
android:layout_width="96dp"
android:layout_height="wrap_content" th
android:layout_below="@id/times" 4 View object here is specified to be
android:layout_alignParentRight="true" below the 2nd object Spinner (id = times)
android:text="@string/done" /> & aligned to right of parent(app)
</RelativeLayout>
More on RelativeLayout
parameters
 Center
Top
Bottom
of
Parent
There are many other
Layouts
 TableLayout (think a table)
 GridLayout (from API 11, ICS)
 The latest one ConstraintLayout

TableLayout
Table Layout
 TableLayout positions its children into rows and
columns. TableLayout containers do not display
border lines for their rows, columns, or cells. The
table will have as many columns as the row with
the most cells. A table can leave cells empty, but
cells cannot span vertical, as they can in HTML.
 TableRow: TableRow objects are the child
views of a TableLayout (each TableRow defines
a single row in the table). Each row has zero or
more cells, each of which is defined by any kind
of other View.
 So, the cells of a row may be composed of a
variety of View objects, like
ImageView or TextView objects. A cell may also
 TableRow will be automatically created
(if that row has not been existed) when
you drag Subview to the table cell.
GridLayout
 A layout that places its children in a
rectangular grid.
 GridLayout uses a grid of infinitely-thin
lines to separate its drawing area into:
rows, columns, and cells. It supports both
row and column spanning, this means it is
possible to merge adjacent cells into a
large cell (a rectangle) to contain a View.
 Throughout the API, grid lines are
referenced by grid indices. A grid with N
columns has N + 1 grid indices that run
from 0 through N inclusive.
 Sizes, Margins and Alignment/Gravity
 In GridLayout, specifying sizes and margins is
done just as with a LinearLayout.
Alignment/gravity also works just like gravity in
LinearLayout and uses the same
constants: left, top, right, bottom,
center_horizontal, center_vertical, center,
fill_horizontal, fill_vertical and fill.
 Flexibility: Unlike most grids in other
toolkits, Android GridLayout does not associate
data with rows or columns. Instead, everything to
do with alignment and flexibility is associated
with the components themselves.
 The flexibility of columns is inferred from
 With GridLayout, if there is no object
displaces grid column, the width of the
grid would be 0. Similarly, if row does
not be displaced by any objects, the
height of the grid is 0.
 layout_columnWeight
 In GridLayout, layout_columnWeight
attribute is weight by column of the
object in the cell, it may affect the
occupancy by column, the default value
is 0.
Most Important!
 If you specify a value different than 0
for layout_columnWeight, you need to set
layout_gravity value for the object, this is
mandatory, if not specified
the layout_gravity value, object will not be
displayed on the grid:
 The value for layout_gravity in this case is:
 left
 right
 center_horizontal
 center
 fill_horizontal

layout_rowSpan
layout_rowWeight
 In GridLayout, layout_rowWeight attri
bute is weight by row of the object in
the cell, it may affect the occupancy by
row, the default value is 0.
layout_columnSpan
GridLayout Vs TableLayout?
 For the same UI, a GridLayout will
generally be faster and take less
memory than a TableLayout
ConstraintLayout
 ConstraintLayout allows you to create
large and complex layouts with a flat
view hierarchy (no nested view groups).
 It's similar to RelativeLayout in that all
views are laid out according to
relationships between sibling views and
the parent layout, but it's more flexible
than RelativeLayout and easier to use
with Android Studio's Layout Editor.
ConstraintLayout
 To define a view's position in
ConstraintLayout, you must add at least
one horizontal and one vertical
constraint for the view.
 Each constraint represents a connection
or alignment to another view, the parent
layout, or an invisible guideline.
 Each constraint defines the view's
position along either the vertical or
horizontal axis; so each view must have
a minimum of one constraint for each
ConstraintLayout
 When you drop a view into the Layout
Editor, it stays where you leave it even if
it has no constraints. However, this is
only to make editing easier; if a view has
no constraints when you run your layout
on a device, it is drawn at position [0,0]
(the top-left corner).
 In figure 1, the layout looks good in the
editor, but there's no vertical constraint
on view C. When this layout draws on a
device, view C horizontally aligns with
the left and right edges of view A, but
ConstraintLayout

Figure-1 Figure-2
There is also Absolute
Layout
 You position View widgets
exactly where you want them.
 It is DEPRECATED

 Great for fast creation of GUI –

NOT GOOD for changing GUI
dimension between different
devices  that is why we have
those different “controlled”
layouts like LinearLayout,
RelativeLayout and more
Absolute layout
• A layout that lets you specify exact locations (x/y
coordinates) of its children. Absolute layouts are less
flexible and harder to maintain than other types of
layouts without absolute positioning
Do different Layouts have better
performance???
…..actually yes they can
CAUTION --- speed of
rendering can be impacted
by design choices
 Problem: nesting several instances of
LinearLayout that use
the layout_weight parameter can be
especially expensive as each child needs
to be measured twice.
Comparing speeds:
Nested LinearLayout VERSUS
RelativeLayout
Nested LinearLayout
RelativeLayout

speed:
Measure: 0.977ms
Layout: 0.167ms
speed:
Measure: 0.598ms
Layout: 0.110ms
Draw: 2.717ms Draw: 2.146ms

RelativeLayout is FASTER
Coordinator Vs Constraint
 The CoordinatorLayout is to manage the
complex behavior (especially
animations) of your activity's
components, and ConstraintLayout for
components proper placement
(especially list items).
Basic Views (Widgets)
 UI Controls
Sr.N UI Control & Description
o.
1 TextView: This control is used to display text to the user.
2 EditText: EditText is a predefined subclass of TextView that includes rich editing
capabilities.
3 AutoCompleteTextView: The AutoCompleteTextView is a view that is similar to
EditText, except that it shows a list of completion suggestions automatically while
the user is typing.
4 Button: A push-button that can be pressed, or clicked, by the user to perform an
action.
5 ImageButton: An ImageButton shows a button with an image (instead of text) that
can be pressed or clicked by the user.
6 CheckBox: An on/off switch that can be toggled by the user. You should use check
box when presenting users with a group of selectable options that are not mutually
exclusive.
7 ToggleButton: An on/off button with a light indicator.
8 RadioButton: The RadioButton has two states: either checked or unchecked.
9 RadioGroup: A RadioGroup is used to group together one or more RadioButtons.
10 ProgressBar: The ProgressBar view provides visual feedback about some ongoing
tasks, such as when you are performing a task in the background.
11 Spinner: A drop-down list that allows users to select one value from a set.
Related Layout Tags
to create a DYNAMIC layout
contents –one where the contents
are dynamic (maybe read in from
database or???)
 Subclasses of
AdapterView
SOME Examples of Layout Tags
that can load contents/data
dynamically
ListView Gallery GridView

All these (and there are more) are descendants of AdapterView

ListView <ListView ...>
 A view that shows items in a
vertically scrolling list.
Attributes
 android:divider Drawable or color to draw
between list items.
 android:dividerHeight Height of the divider.
 android:entries Reference to an array
resource that will populate the ListView.
 android:footerDividersEnabled When set to
false, the ListView will not draw the divider
before each footer view.
 android:headerDividersEnabled When set to
false, the ListView will not draw the divider
after each header view.
Gallery <Gallery ...>
Deprecated
 A view that shows items in a
center-locked, horizontally
scrolling list.
 The default values for the Gallery assume you will be using
Theme_galleryItemBackground as the background for each View
given to the Gallery from the Adapter. If you are not doing this,
you may need to adjust some Gallery properties, such as the
spacing.

Attributes
 android:animationDuration setAnimationDuration(int) Sets
how long a transition animation should run (in
milliseconds) when layout has changed.
 android:gravity setGravity(int) Specifies how to place the
content of an object, both on the x- and y-axis, within the
object itself.
 android:spacing setSpacing(int)
Fragments
 A Fragment is a piece of an activity
which enable more modular activity
design. It will not be wrong if we say, a
fragment is a kind of sub-activity.
 You create fragments by
extending Fragment class and You can
insert a fragment into your activity
layout by declaring the fragment in the
activity's layout file, as
a <fragment> element.
 Prior to fragment introduction, we had a
 So we were not able to divide device
screen and control different parts
separately.
 But with the introduction of fragment we
got more flexibility and removed the
limitation of having a single activity on
the screen at a time.
 Now we can have a single activity but
each activity can comprise of multiple
fragments which will have their own
layout, events and complete life cycle.
 A fragment has its own layout and its own
behavior with its own lifecycle callbacks.
 You can add or remove fragments in an
activity while the activity is running.
 You can combine multiple fragments in a
single activity to build a multi-pane UI.
 A fragment can be used in multiple
activities.
 Fragment life cycle is closely related to the
lifecycle of its host activity which means
when the activity is paused, all the
fragments available in the activity will also
be stopped.
 A fragment can implement a behavior
that has no user interface component.
 Fragments were added to the Android