Mobile Computing

Lecture#04 User Interface

Lecture Contents
 Android Architecture
 User Interface
 Layouts
Android Platform
 Multi-user Linux system (each application is a different
user)
 Every application is assigned a unique id (only know to
platform)
 Each process has its own VM (every application runs in
isolation with other applications)
 It is possible to arrange for two applications to share the
same Linux user ID (i. in this case they are able to access
each other's files ii. applications with the same user ID can also
arrange to run in the same Linux process and share the same
VM provided that applications are signed with the same
certificate)
3
Android Platform ….
 An application can request permission to access device data
(such as the user's contacts, SMS messages, the mountable
storage , camera, Bluetooth...)

4
Android Phone Features
 Virtual Keyboard
 Instant Search & Web Browsing
 Built-In support for SQLite
 Widgets & Live Folders
 Sharing made Instant
 Voice Search
Android Architecture

6
User Interface (UI)
Made up of View &
ViewGroup objects
Many types of views &
viewgroups
View is base class of
widgets
ViewGroup is base class of
layouts
View is a graphical element
and occupies rectangular
area of screen
7
TextView
<TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1“
android:text=“This is Label on TextView"/>

8
EditText
<EditText
android:id="@+id/EditText01"
android:layout_height="wrap_content“
android:layout_width="wrap_content"
android:singleLine="true"
android:text="Edittext example"/>

9
Button

<Button
android:id=“@+id/click_button"
android:layout_height="wrap_content"
android:layout_width=“fill_parent"
android:text="Click to Execute"
android:onClick="selfDestruct" />

10
Button & Click Handler
<Button
android:id=“@+id/click_button"
android:layout_height="wrap_content"
android:layout_width=“fill_parent"
android:text="Click to Execute" />

Button button = (Button) findViewById(R.id.click_button);

button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on click
}
});
11
ImageView
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:src="@drawable/my_image"/>

12
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() or android:orientation in XML
 You can also specify gravity, which specifies the alignment
of all the child elements
 Children can grow to fill up any remaining space in the
layout by setting the weight of element
 The default orientation is horizontal

13
 14
Linear Layout XML
Layout Output

15
 16
Orientation=Vertical
 17
Orientation=Vertical
 <TextView
android:text="red“
Weight Does Matter

android:gravity="center_horizontal“
android:background="#aa0000“
android:layout_width="fill_parent“
android:layout_height="wrap_content“
android:layout_weight="2"/>

18
RelativeLayout

 RelativeLayout is a ViewGroup that displays child View

elements in relative positions
 The position of a View can be specified as relative to
sibling elements or in positions relative to the
RelativeLayout area
 A RelativeLayout is a very powerful utility because it can
eliminate nested ViewGroups
 Several nested LinearLayout groups can be replaced with
a single RelativeLayout (same affect can be produced)

19
 20
RelativeLayout
 21
Relative Layout Output
FrameLayout

22
 23
TableLayout
Layout in Code
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout.LayoutParams lp;
lp = new LinearLayout.LayoutParams (LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
LinearLayout.LayoutParams textViewLP;
textViewLP = new LinearLayout.LayoutParams
(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
TextView myTextView = new TextView(this);
myTextView.setText("Hello World, HelloWorld");
ll.addView(myTextView, textViewLP);
This.addContentView(ll, lp);
24
}