Comp 194-MA

Widgets and Containers?

The UIs of Android applications are composed of a series of widgets contained inside containers.

The general philosophy is similar to Swing/AWT

The Eclipse plugin provides a easy to use GUI to construct Android UIs

How it works

The Android UI is described using XML where the tags represent layouts and widgets.

UI elements can also be added programmatically at runtime.

The Eclipse plugin provides a GUI to manipulate the XML.

Android Containers

Android ships with five core layouts: FrameLayout – simplest layout system.

Provides a blank space that can be filled by a widget.

LinearLayout – default layout. Everything is laid out linearly either horizontally or vertically.

TableLayout – positions elements in a table like grid.

AbsoluteLayout – allows elements to be absolutely positioned.

The LinearLayout

Default layout for Android applications.

It provides the best compromise between flexibility and usability.

Layouts using the LinearLayout should render uniformly across Android devices.

Google recommends using the LinearLayout whenever possible.

More info

Layouts are nestable – you can nest several layouts to design your UI as you please.

Widgets can not exist in a View without a layout parent.

More information is available here: http://code.google.com/android/devel/ui/layout.html

Widgets

Android ships with a default set of around a dozen widgets.

They range from everything from textboxes to embeddable Google Maps.

Widgets are Java classes so they can be easily extended and modified.

List of standard widgets: http://code.google.com/android/reference/view-gallery.html

Widgets and Strings

Easy to embed string in widget <TextView

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text=“Hello World"/>

This can get cluttered and difficult to easy switch out strings. It should be separated much more

Widgets and Strings Better Separate the string text into different

xml file, strings.xml <TextView

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello"/>

In strings.xml now place: <string name="hello">Hello, I am a string resource!

</string> Much cleaner, easier to read and to update.

You can also reference the strings in the application so you do not have to code them in the app itself

The UI Editor

Canvas

Add/RemoveWidgets

Edit the XML

Events and such

Widgets expose the customary events to Android developers.

Handlers can be attached using anonymous classes that deal with the various events (see later slide)

Events also “bubble” up in Android from lower widgets to their parents.

Project

Build a weather report app using as many widgets as possible.

Screenshots

Snippets!

Using the autocompleter: ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, CITIES);AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.zipcode);

textView.setAdapter(adapter);

Snippets!

Add event listener to a button:ImageButton button = (ImageButton)

this.findViewById(R.id.fetchWeather);

button.setOnClickListener(onButtonClick);

private OnClickListener onButtonClick = new OnClickListener() {

public void onClick(View v) { … }

}

Snippets!

Access the R resources from a activity:

Activity. getResources()

Screen Shots Part Deux

How’s it done?

ListAdapter Allows for a list much like the contact list

on the iPhone Change your main class to extend

ListActivity Create an ArrayAdapter: myAdapter new

ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, StringArray) The string array is the list of items in a

single dimensional array ie String[] x={“earthquake”…};

Almost There

You need to listen to the adapter for an item to get clicked so create an OnItemClickListener private OnItemClickListener bClick=new

OnItemClickListener(){….} Set the listView to have the

itemListener(bClick) getListView().setOnItemClickListener(bCl

ick);

Finishing Step

You can retrieve the ImageView from the layout file ImageView

img=(ImageView)findViewById(R.id.imageviewid)

Once you have this you can update the weather image by changing the background resource Img.setBackgroundResource(R.drawable.ima

ge) Done!