cosc 4730

Android TabActivity and ListView

TabActivity

• A TabActivity allows for multiple “tabs”.– Each Tab is it’s own activity and the “root” activity creates

each tab and calls each activity (via an intent). An activity is called, when it’s tab is clicked.

– Below is a Tab Activity, which then calls 3 activities

Activity Tab1

Activity Tab2

Activity Tab3

Tab Activity Code.Resources res = getResources(); // Resource object to get DrawablesTabHost tabHost = getTabHost(); // The activity TabHostTabHost.TabSpec spec; // Resusable TabSpec for each tabIntent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)intent = new Intent().setClass(this, tab1.class);// Initialize a TabSpec for each tab and add it to the TabHostspec = tabHost.newTabSpec("artists").setIndicator("Tab1") //,res.getDrawable(R.drawable.ic_tab1)) //this is optional, if you want a picture. .setContent(intent);tabHost.addTab(spec); //place the “tab” in the tabHost.

//add more tabs

tabHost.setCurrentTab(0); //set first tab to display.//You can also create “global” variables here as well.• NOTE, you need to have each activity in the androidManifest.xml file as well.

Activity as the tab.

• The activity is unchanged, it needs it own layout and works just like normal.– But as a note, when the tab is not selected the activity is

paused (onPause() is called)– When it active, the onResume will be called.

• For global variables, you can get the “parent class” and use them as an object.

TabHostDemo parentclass = null; //declared at top//called in onCreateparentclass = (TabHostDemo) tab1.this.getParent();

Passing information between tabs.

• You can use global variables • Or you can put information in the intent (in

the onPause() Method). The tab to be displayed can then retrieve information from the intent in onResume()

• A very simple example is shown in the TabHostDemo.zip

Listview (and spinner)

• The spinner shown before is a very similar to a list view

• A listView can be the only widget on the screen and can get very complex with the adapter.– The items in the list are

normally clickable.

• Simple listView

Listview continued

• A listView can just be another widget in the layout as well.

• Or a very complex, which multiple widgets in each item in the list– Also true for the spinner

Simple listViewpublic class Simple extends ListActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // NOTE, there is no xml layout for this activity! String[] values = new String[] { "Android", "iPhone", "WindowsMobile",

"Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" }; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, values); setListAdapter(adapter);}

//This responses to the click event.@Overrideprotected void onListItemClick(ListView l, View v, int position, long id) { String item = (String) getListAdapter().getItem(position); Toast.makeText(this, item + " selected", Toast.LENGTH_LONG).show();}}

The layout is how the items will be displayed

Changing the layout

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.rowlayout, R.id.label, values);setListAdapter(adapter);• Uses a layout we created and the label is

where the item is go. In this case with an picture.

rowlayout.xml• Using our custom layout, the listView displays an picture (the same picture for all items)• And we need a textview to display the “item” for each one. Which is called label in this

case (you can choose whatever name).

<ImageView android:id="@+id/icon" android:layout_width="22dp" android:layout_height="22dp" android:layout_marginLeft="4dp" android:layout_marginRight="10dp" android:layout_marginTop="4dp" android:src="@drawable/ic_launcher" > </ImageView>

<TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@+id/label" android:textSize="20dp" > </TextView>

More complex ListViews.

• If you want to display more then one piece of information per item, then you can have not only change the layout, but extend the ArrayAdapter or BaseAdapter.

ArrayAdapter

• The ArrayAdapter already extends the BaseAdapter and provides a lot of built in methods.

• In the ListActivity (or Activity) you would do something like this:

ArrayAdapter<Model> adapter = new InteractiveArrayAdapter(this, myModelList);setListAdapter(adapter);• Where myModleList is a list<model> – Where model is a class you created.

ArrayAdapter (2)public class InteractiveArrayAdapter extends ArrayAdapter<Model> { public test1(Context context, List<Model> list) {

super(context,R.layout.rowbuttonlayout, list);// TODO Auto-generated constructor stub//store objects so you can access it below.this.context = context;this.list = list;

} @Override public View getView(int position, View convertView, ViewGroup parent) {

//this will you create the View, which is each list item.//This will look similar to an OnCreate.

}}

getView• So for this one, we have TextView and checkBox. The List tells us if it’s

checked or not.• In getView, we create the ViewLayoutInflater inflator = context.getLayoutInflater();convertView = inflator.inflate(R.layout.rowbuttonlayout, null);text = (TextView) convertView.findViewById(R.id.label);checkbox = (CheckBox) convertView.findViewById(R.id.check);

//Tag is an like a temp space, in a widget where you can set some information as an Object Class in this case, the position variable, used when we change the check mark.

checkbox.setTag(String.valueOf(position)); checkbox.setChecked(list.get(position).isSelected());text.setText(list.get(position).getName());return convertView;

getView (2)• The checkbox listener.checkbox.setOnCheckedChangeListener(new OnCheckedChangeListener(){@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { CheckBox cb = (CheckBox)buttonView; //first get the model item out of the list, using the position stored in Tag. Model temp = list.get( Integer.parseInt((String)cb.getTag())); //now update our Model with the correct information. temp.setSelected(cb.isChecked()); cb.setChecked(temp.isSelected()); //Not necessary since the GUI handles it.

• say we only want one "item" checked and all the other unchecked.String t = (String) cb.getTag(); //use the tag temp space to get back our current position in the list.int position = Integer.parseInt(t);for (int i=0; i<list.size();i++) {if (i!= position) list.get(i).setSelected(false);}

notifyDataSetChanged(); //"redraw" any views that were checked.}});

Custom ListViews

• We want to very complex and provide our own interface, then normally we extend the baseAdapter to create “mini activities” for each item in the ListView.

• In this case a Phone classis created to hold all the Information, which passedto an extended baseAdapter.

BaseAdapter• In a BaseAdapter you must implement the following methods:• public int getCount()

– How many items are in the data set represented by this Adapter.• public Object getItem(int position)

– Get the data item associated with the specified position in the data set.• public long getItemId(int position)

– Get the row id associated with the specified position in the list.• public View getView(int position, View convertView, ViewGroup

parent) – Like before, the view.

• You will likely create a constructor, just like before, except you don’t call super, because they isn’t a super constructor.– Get the list and context.

PhoneBookAdapterpublic class PhonebookAdapter extends BaseAdapter implements OnClickListener { private Context context; private List<Phonebook> listPhonebook;

public PhonebookAdapter(Context context, List<Phonebook> listPhonebook) { this.context = context; this.listPhonebook = listPhonebook; }

@Override public int getCount() { return listPhonebook.size(); } @Override public Object getItem(int position) { return listPhonebook.get(position); } @Override public long getItemId(int position) { return position; }

getView will be complex like before, with the inflater and then setting up all the widgetsIn the layout with information.

See the source code. ListDemo.zip

References

• See the TabHostDemo.zip and ListDemo.zip on the handout pages for source code.

• There are a lot more to ListView• Also, you can do the same thing to a spinner

as well. This allows you to create very complex “drop-down menu” to use in your app.

QA&