Outline

• Android TableLayout, ListView

UI for Hw3

• There are a few UI related things with HW3 we've covered for iPhone but not for Android...
• One thing, you still need to know is how to create and use ListView and TableLayout.
• The homework also asks you to have a toolbar at the bottom of the screen to switch between two views.
• A toolbar is basically a bar with a button on it.
• To fake this in Android, we can put a button on a LinearLayout that fills the screen width.
• We set the color of the layout by setting the attribute android:background="#CCC" to make it look like a bar.

ListView

• One way to display a list of items in Android is to use a ListView.
• One drawback to such a view for HW3 is you are going to have to experiment a bit if you want to use this and a "toolbar".
• The following code, creates and populates such a view.

  package org.pollett;
  
  import android.app.*;
  import android.widget.*;
  import android.os.Bundle;
  
  public class ListViewTest extends ListActivity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          setListAdapter(new ArrayAdapter<String>(this,
                  android.R.layout.simple_list_item_1, FOOD));
          getListView().setTextFilterEnabled(true);
          
      }
  
      static final String[] FOOD= new String[] {
          "Pizza", "Apple", "Calzone", "Ma Po Do Fu",
          "Pho Bo", "Curry", "Coffee", "Catfish"
          
        };
      
  }
  

What ListViewTest Looks Like

TableLayout

• The UI component that probably most approximates the iPhones table view is a TableLayout.
• As with table views we imagine a table being split into row and columns.
• A TableLayout's width is always FILL_PARENT.
• Such a layout can contain any View object, but typically contains TableRow's. These are arranged vertically
• A TableRow's height is always WRAP_CONTENT.
• A table row can in turn contains View's which are arranged horizontally. These views are allowed to span columns just like HTML tables.

TableLayout Example (based on Android Developer Example)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>

</TableLayout>

What TableLayoutTest Looks Like