BACHELOR OF SCIENCE IN COMPUTER SCIENCE

COURSE: BSC 402: MOBILE PROGRAMMING

TECHNOLOGIES

TOPIC:

Factors in developing mobile applications

Mobile Software engineering
Frameworks and Tools
Generics UI Development
Android User
 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
android.widget.TableLayout

---specify Layout 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"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
Here is code of
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please Login"
layout created
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()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
◻ Layout in column (for Vertical) or row (for used in Vertical
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 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”/>

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
LinearLayout XML attributes & the
java class’s corresponding methods
◻ android:baselineAlignedandroid:baselineAligned setBaselineAligned(boolean)
When set to false, prevents the layout from aligning its children's baselines.
◻ android:baselineAlignedChildIndexandroid: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:gravityandroid: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:orientationandroid: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.