Notes
Transcript of Notes
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!