User Interface

Android Applications

Activities

• An activity presents a visual user interface.• Each activity is given a default window to draw

in.• The visual content of the window is provided

by a hierarchy of views.• Each view controls a particular rectangular

space within the window.

Hierarchy of Views

• Parent views contain and organize the layout of their children.

• Leaf views (those at the bottom of the hierarchy) draw in the rectangles they control and respond to user actions directed at that space.

View Hierarchy

• A view hierarchy is placed within an activity's window by the Activity.setContentView() method.

View Group

• A ViewGroup is a special view that can contain other views (called children.)

• The view group is the base class for layouts and views container

• Some layout paramemeters:fill_parent, match_parent, wrap_content

Widgets

• The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons.

• A widget is a View object that serves as an interface for interaction with the user.

Widgets: Ready-made views in Android

• buttons, • text fields, • scroll bars, • menu items, • check boxes,• more

src/[package name]/[activity name].java

package com.example.helloandroid;

import android.app.Activity;import android.os.Bundle;

public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}

Notice that the class is based on the Activity class.

• The onCreate() method will be called by the Android system when your Activity starts — it is where you should perform all initialization and UI setup.

• In there you will usually call setContentView(int) with a layout resource defining your UI

Declaring Layout

• Your layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user.

• You can declare your layout in two ways:– Declare UI elements in XML– Instantiate layout elements at runtime

Declare UI elements in XML• Android provides a straightforward XML vocabulary

that corresponds to the View classes and subclasses, such as those for widgets and layouts.

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

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?><resources> <string name="hello">Hello World,

HelloAndroid!</string> <string name="app_name">Hello, Android</string></resources>

Hello World, HelloAndroid!

Instantiate layout elements at runtime

• Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

src/[package name]/[activity name].java

package com.example.helloandroid;

import android.app.Activity;import android.os.Bundle;import android.widget.TextView;

public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView tv = new TextView(this); tv.setText("Hello World, HelloAndroid!"); setContentView(tv); }}

Application Resources

• Common files in res/ directory:– drawable/icon.png: Icon for the program in

launcher– layout/main.xml: User interface for main Activity– values/strings.xml: Any Strings appearing in UI

• Resources –separate program logic from “other stuff”Strings, images, UI layouts

res/layout/main.xml<?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>

Hello Android

XML files

• The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior.

• Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile.

Modified main.xml (1)<?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">

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <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"/> <TextView android:text="green" android:gravity="center_horizontal" android:background="#00aa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="blue" android:gravity="center_horizontal" android:background="#0000aa" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="yellow" android:gravity="center_horizontal" android:background="#aaaa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> </LinearLayout>

Modified main.xml (2) <LinearLayout

android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="row one" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row two" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row three" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row four" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout>

</LinearLayout>

Linear Layout

Identify the changes in main.xml

Modified main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation=“horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent“

…

Identify changes in original main.xml

ID

• Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute.

android:id="@+id/my_button"

Vertical LinearLayout to hold a TextView and a Button

• <?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" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /></LinearLayout>

android:id="@+id/my_button"

• The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource.

• The plus-symbol (+) means that this is a new resource name that must be created and added to our resources (in the R.java file).

Loading the XML Resource

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView.(R.layout.main_layout);}

R.java

• Eclipse combs through res/ directory, generating Java class to access resources in code.

• Examples:R.string.<string_name>, R.layout.<layout_name>

• Accessing resources through the R class lets Android determine the right resource to use

gen/ [Generated Java Files]/R.java/* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */

package com.example.helloandroid3;

public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final int app_name=0x7f040001; public static final int hello=0x7f040000; }}