ANDROID – INTERFACE AND

LAYOUT

L. Grewe
 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 grid
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 ---extends
 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"

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….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
LinearLayout RelativeLayout GridLayout
 GridLayout  AND MANY MORE (see children of ViewGroup in
API)
 LinearLayout

 Good for smaller devices (like phones

over Tablets) or when simple interfaceMore commonly
makes sense used in Vertical
Orientation
 Layout in column (for Vertical) or row (for
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 coplex
 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”/>

</LinearLayout>
VERY simple example – LinearLayout with one
child View object, a TextView saying Hello….
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"
LinearLayout with 4 child View objects,
android:onClick="onClickLaunchMyBrowser" />

</LinearLayout> 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
LinearLayout XML attributes & the
java class’s corresponding methods
 android:baselineAligned setBaselineAligned(boolean) When set to
false, prevents the layout from aligning its children's baselines. 
 android:baselineAlignedChildIndex setBaselineAlignedChildIndex(int)
When a linear layout is part of another layout that is baseline
aligned, it can specify which of its children to baseline align to (that
is, which child TextView). 
 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:measureWithLargestChild When set to true, all children with
a weight will be considered having the minimum size of the largest
child. 
 android:orientation setOrientation(int) Should the layout be a
column or a row? Use "horizontal" for a row, "vertical" for a column. 
 android:weightSum Defines the maximum weight sum. 
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 LinearLayou
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_c
    android:orientation="vertical">  ontent"
        android:layout_height="wrap_conte
    <TextView nt"         android:layout_marginTop="10d
        android:layout_width="wrap_content"        android:layout_marginTop="20dp" p"

        android:layout_height="wrap_content"        android:text="Using weightSum"         android:orientation="horizontal"

        android:text="Without using weightSum"         android:weightSum="1">

        android:textColor="@android:color/
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_c
        <Button ontent"
 
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, andr
oid: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"
    android:paddingLeft="16dp" Says we have RelativeLayout
    android:paddingRight="16dp" >
    <EditText that width and height match parent
        android:id="@+id/name" (which is the entire app screen)
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner 1st View object in RelativeLayout
        android:id="@+id/dates"
        android:layout_width="0dp" will be at the top and is the EditText
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" /> 2nd View object here is specified to be
    <Spinner
        android:id="@id/times"
below the 1st object EditText (id = name)
        android:layout_width="96dp" & aligned to left of parent(app)
        android:layout_height="wrap_content" & Left of the Button with id=times (see below)
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content" 3rd View object here is specified to be
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
below the 1st object EditText (id = name)
        android:text="@string/done" /> & aligned to left of parent(app)
</RelativeLayout>

4th View object here is specified to be

below the 2nd object Spinner (id = times)
& aligned to right of parent(app)
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
            android:text="@string/table_layout_4_save_shortcut" This Table has 2 Rows
            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: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 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
More on improving
performance
 Go to Developer site and search on
“Improving Layout Performance”

 https://developer.android.com/training/i
mproving-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. 
Gallery <Gallery ….>
 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)  
 android:unselectedAlpha setUnselectedAlpha(float) Sets the alpha
on the items that are not selected. 
 See our website,
book and developer
Code—setting up Gallery website for more
detailed explanation
of Gallery
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); //use xml file that contain a
<Gallery>

    Gallery gallery = (Gallery) findViewById(R.id.gallery);

    gallery.setAdapter(new ImageAdapter(this));

    gallery.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position,
long id) {
            Toast.makeText(HelloGallery.this, "" + position,
Toast.LENGTH_SHORT).show();
    }
    }); We need a “HANDLE” to the Gallery
} we created from XML in our Java code to
handle events when an item in Gallery is
clicked on
How to populate the
GridView, or Gallery or
ListView
 Look on our class website for more
detailed examples (too much code to put
into powerpoint) or look in your book or
at developer website or search on
google for tutorials
This is a power point “beginning” lecture on Layout and we can’t
cover all the many and elaborate examples --- that is best served by
websites and tutorials and books
 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/