1. cosc 4730 Android TabActivity and ListView

2. 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

3. Tab Activity Code. Resources res = getResources(); // Resource object to get Drawables TabHost tabHost = getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent 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 TabHost spec = 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.

4. 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 onCreate parentclass = (TabHostDemo) tab1.this.getParent();

5. 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

6. 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

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

8. Simple listView public 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 adapter = new ArrayAdapter (this, android.R.layout.simple_list_item_1, values); setListAdapter(adapter); } //This responses to the click event. @Override protected 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

9. Changing the layout ArrayAdapter adapter = new ArrayAdapter (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.

10. 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" > <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@+id/label" android:textSize="20dp" >

11. 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.

12. 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 adapter = new InteractiveArrayAdapter(this, myModelList); setListAdapter(adapter); Where myModleList is a list – Where model is a class you created.

13. ArrayAdapter (2) public class InteractiveArrayAdapter extends ArrayAdapter { public test1(Context context, List 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. }

14. 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 View LayoutInflater 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;

15. getView (2) The checkbox listener. checkbox.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public 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. } });

16. 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 class is created to hold all the Information, which passed to an extended baseAdapter.

17. 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.

18. PhoneBookAdapter public class PhonebookAdapter extends BaseAdapter implements OnClickListener { private Context context; private List listPhonebook; public PhonebookAdapter(Context context, List 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 widgets In the layout with information. See the source code. ListDemo.zip

19. 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.

20. Q A &