cosc 4730

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 Tab3 Activity Tab1 Activity Tab2

3. Tab Activity Code. Resources res = getResources(); // Resource object to get Drawables TabHosttabHost = getTabHost(); // The activity TabHost TabHost.TabSpecspec; // ResusableTabSpec 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. TabHostDemoparentclass = 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<String> adapter = new ArrayAdapter<String>(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<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.

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). <ImageViewandroid: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>

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

13. ArrayAdapter (2) public class InteractiveArrayAdapterextends 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. } }

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 LayoutInflaterinflator = 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(CompoundButtonbuttonView, booleanisChecked) { CheckBoxcb = (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. intposition = Integer.parseInt(t); for (inti=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 baseAdapterto 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 intgetCount() • 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<Phonebook> listPhonebook; public PhonebookAdapter(Context context, List<Phonebook> listPhonebook) { this.context = context; this.listPhonebook = listPhonebook; } @Override public intgetCount() { 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 &