ANDROID – INTERFACE AND

LAYOUT

T.Heba AL.Marwai
 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 arrange in it.
Views
 There are many –read book and look at API
 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

 ListView: a list of scrollable items

 GridView: displays items in two-dimensional, scrollable

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, I would say if it is possible, doing XML
would be better as it means a decoupling of design
from Java code.
 You can have both in your system….
 Lets discuss this first.
The Layout --- the interface

 Layouts defined with

XML located in
res/layout
 The Layout-the interface
 res/layout/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
Both in width and write and wraps and content as necessary.
XML interface
 it's a tree of XML elements,
 Inspired by web authoring
 Build up UI quickly
 each node is the name of a View class (example is just one View element).
 Create your own View
 Each node can have multiple attributes
 Look to API for details
XML interface
 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
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 string value. The hello string is defined
in the res/values/strings.xml file.
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 we see LinearLayout of 6 widgets
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
Here is code of
layout created
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"
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….you will
see examples
throughout this lecture
Lets return to looking at some of the
possible ViewGroup Layouts
 Layout Options ---there are a
number
 Determines how the layout is structured.
 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
 FrameLayout
 GridLayout  AND MANY MORE (see children of ViewGroup in API)
LinearLayout RelativeLayout GridLayout
 LinearLayout

 Good for smaller devices (like phones over Tablets)

or when simple interface makes sense More commonly
used in Vertical
 Layout in column (for Vertical) or row (for Orientation
Horizontal) one after another child View objects

 Some Examples
LinearLayout
Good:
 Simple

 Know exactly how it will look on every device

Bad:
 Well for many interfaces too simple….
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
 ALSO can make more complex
 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”
android:text=“@string/hello”/>

VERY simple 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"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Launch My Browser" android:onClick="onClickLaunchMyBrowser"
/>

</LinearLayout>
LinearLayout with 4 child View objects,
all are buttons
LinearLayout attributes
 You can set either in XML or with set*() methods.

Xml
android:orientation=“vertical”

code (ll is LinearLayout instance)

ll.setOrientation(VERTICAL);
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
layout_y y-coordinate
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 xmlns:android="http://schemas.android.com/apk/res/android"
Another Nested LinearLayout Example
android:layout_width="match_parent"
<LinearLayout
android:layout_height="match_parent"
<TextView android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical">
android:layout_height="wrap_content" android:layout_marginTop="10dp"
<TextView
android:layout_marginTop="20dp" android:orientation="horizontal"
android:layout_width="wrap_content"
android:text="Using weightSum" android:weightSum="1">
android:layout_height="wrap_content"
android:textColor="@android:color/black" <Button
android:text="Without using weightSum"
android:textSize="25sp" /> android:layout_width="wrap_content"
android:textColor="@android:color/black"
android:layout_height="wrap_content"
android:textSize="25sp" />
<LinearLayout android:layout_weight="0.5"
<LinearLayout
android:layout_width="match_parent" android:text="Android" />
android:layout_width="match_parent"
android:layout_height="wrap_content" <Button
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_width="wrap_content"
android:orientation="horizontal">
android:weightSum="1"> android:layout_height="wrap_content"
android:layout_weight="0.5"
<Button
<Button android:text="C" /> There are
android:layout_width="wrap_content" 3 LinearLayouts
android:layout_width="wrap_content" </LinearLayout>
android:layout_height="wrap_content" nested inside the
android:layout_height="wrap_content" <LinearLayout outer LinearLayout
android:text="Android" />
android:layout_weight="0.7" android:layout_width="match_parent"
android:text="Android" /> android:layout_height="wrap_content"
<Button
<Button android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_width="wrap_content" android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_height="wrap_content" android:weightSum="1">
android:text="Java" />
android:layout_weight="0.3"
</LinearLayout>
android:text="C" /> <Button
</LinearLayout>
android:layout_width="wrap_content"
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 get Complexity
What about Other 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)
RelativeLayout
GOOD:
 Can give more complex interfaces
 Know what will look like on different sized devices

 Position relative to another position

CAUTION This is meant to be flat –meaning you don’t

want/need to nest RelativeLayouts in each other –sometimes may
impact speed in rendering and some have reported problems.
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
VALUE=“resource ID of other widget” -- Positions the top edge of this
view below/aboveof the view specified with a resource ID.
OR Positions the left edge of this view to the left/right of the view
specified with a resource ID.
 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"
android:layout_height="match_parent" Says we have RelativeLayout
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"
android:layout_height="wrap_content" 1st 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"
android:layout_height="wrap_content"
2nd View object here is specified to be
android:layout_below="@id/name" below the 1st object EditText (id = name)
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"
android:layout_below="@id/times" 4th 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
 Look them up on Android Developer site
 They include: TableLayout (think a table),
GridLayout, FrameLayout, and MORE!!

TableLayout

Read book and look at

developer website to learn
about others like TableLayout
 TableLayout Example
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="@string/table_layout_4_open"
android:padding="3dip" />
<TextView
android:text="@string/table_layout_4_open_shortcut"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:text="@string/table_layout_4_save"
android:padding="3dip" />
<TextView This Table has 2 Rows
android:text="@string/table_layout_4_save_shortcut"
android:gravity="right"
android:padding="3dip" />
</TableRow>
</TableLayout>
TableLayout example 2
 Here use gravity to move the 2nd item in row to the
right
ONLY partial XML code
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">

<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow> NOW CONTINUE ON FOR 2nd row

Do different Layouts have better performance???

…..actually yes they can

CAUTION --- speed of rendering
can be impacted by design choices
 Example from developer website
 Problem: nesting several instances
ofLinearLayout that us 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: speed:
Measure: 0.977ms Measure: 0.598ms
Layout: 0.167ms Layout: 0.110ms
Draw: 2.717ms Draw: 2.146ms

RelativeLayout is FASTER
More on improving performance
 Go to Developer site and search on “Improving
Layout Performance”

 https://developer.android.com/training/improving-
layouts/index.html
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.
 Note 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
Interesting tutorial on AbsoluteLayout :
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/