Getting started with the Tabbed UI and List View in Android 2.1 SDK
We've officially started developing under Android development with Flex/AIR for mobile. In the meantime I've investigated into the native Android development using Java and the Android SDK.
In this post I would like to share with you my experience and show you how to create an Android application that makes use of the Tabbed UI and the ListView.
For this example I'm using the Android SDK 2.1 with a Motorola Droid 2 device for testing activities.
Let's see how to develop a simple tab menu.
Tabbed UI
To create a Tab menu it’s necessary to define a TabHost Object. This object is the root class for a tab menu and it uses a tabWidget object to show the navigation buttons, and a Framelayout Object to show the tabs content.
Now we are going to see how to create a simple TabView using separated Activities for the contents of the tabs.The Activity class is the base class of all Android’s applications and it's is used to perform actions.
We can have several Activities in our Apllications but the user can interact with them one at a time.
The first step is to define two Activities for the Tabs’ context; for example we can use the class below:
package com.comtaste.android;
import com.comtaste.android.components.PersonListAdapter;
import android.app.ListActivity;
import android.os.Bundle;
/***
*
* @author Luca Florido
*
* This Activity is an example to build a ListView in Android
*/
public class SelectView extends ListActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
/***
* This method is called every time the activity
* is change is state (see the Android's guide for
* understand the lifecycle of an Activity )
*/
@Override
protected void onResume() {
super.onResume();
try{
if (getListAdapter() == null ){
int displayWidth = getWindowManager().getDefaultDisplay().getWidth();
setListAdapter(new
PersonListAdapter(getApplicationContext(),displayWidth));
}else{
PersonListAdapter p = (PersonListAdapter)getListAdapter();
p.refresh();
}
}catch(Exception e ){
e.printStackTrace();
}
}
}
package com.comtaste.android;import com.comtaste.android.datamanage.EngineDB;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.view.View.OnClickListener;
/***
*
* @author Luca Florido
*
*/
public class InsertView extends Activity {
private EditText nameED;
private EditText surnameED;
private EngineDB db;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
db = new EngineDB(getApplicationContext());
setContentView(R.layout.inserview);
db = new EngineDB(getApplicationContext());
nameED = (EditText)this.findViewById(R.id.insertName);
surnameED = (EditText)this.findViewById(R.id.insertSurname);
Button buttonIns = (Button)this.findViewById(R.id.buttoninsert);
buttonIns.setWidth(100);
resize();
buttonIns.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
if(!nameED.getText().toString().equals("") && !surnameED.getText().toString().equals("") ){
db.insert(nameED.getText().toString(), surnameED.getText().toString());
nameED.setText("");
surnameED.setText("");
nameED.requestFocus();
}
}
});
}
public void resize(){
int wd = getWindowManager().getDefaultDisplay().getWidth();
nameED.setWidth(wd-100);
surnameED.setWidth(wd-100);
}
}
The second step is to define the view objects in an xml file and put it in the layer directory of the Android project ( in my example I use a file called tabview.xml). Declare the following objects into the xml file: the tabWidget and the FrameLayout Objects within a LinerLayout with vertical orientation as show below.
<?xml version="1.0" encoding="utf-8"?> <TabHost android:id="@android:id/tabhost" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="wrap_content"> </FrameLayout> <Button android:id="@+id/closebutton" android:layout_width="100px" android:layout_height="wrap_content" android:text="@string/close" android:drawableLeft="@drawable/closeicon"> </Button> </LinearLayout> </TabHost>
Now create the Activity for the TabView. The Android’s SDK provides us a particular type of Activity for manage the tab View: the TabActivity class.We can extend the TabActivity class:
package com.comtaste.android;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TabHost;
import android.view.View.OnClickListener;
/***
*
* @author Luca Florido
*
* In this Activity there are all the configurations of the TabHost Object
*/
public class MenuView extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.tabview);
/***
* Resource
*/
Resources res = getResources();
/***
* Create and Initialize a TabHost Object with two TabSpec
*/
TabHost tab = getTabHost();
TabHost.TabSpec spec;
/***
* Create an Intent for the Activity in the first tab
*/
Intent intent;
intent = new Intent().setClass(this, SelectView.class);
/***
* Creation of the first tab
*/
spec = tab.newTabSpec("List").setIndicator("List",res.getDrawable(R.drawable.cancelicon));
spec.setContent(intent);
/***
* Adding of the first tab to the TabHost Object
*/
tab.addTab(spec);
/***
* Container of the Activity in the second tab
*/
intent = new Intent().setClass(this, InsertView.class);
/***
* Creation of the second tab
*/
spec = tab.newTabSpec("Insert").setIndicator("Insert",res.getDrawable(R.drawable.inserticon));
spec.setContent(intent);
/***
* Adding of the second tab to the TabHost Object
*/
tab.addTab(spec);
/***
* Add a Listener to the Close Button
*/
Button closeB = (Button)findViewById(R.id.closebutton);
closeB.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
finish();
}
});
}
}
In the onCreate() method we have to create an instance of the TabHost class with the method getTabHost() of the TabActivity object.
.
Then, for each tab, a TabHost.TabSpec has to be created to define the tab properties such as title,icon and content.
With the newTabSpec(String) method we create a new TabHost.TabSpec identified by the given string tag and with the setIndicator(CharSequence, Drawable)method we can set the text and icon for the tabs. In order to add the View Activity to each tabs it’s necessary to use the setContent(Intent) method where the argument Intent is a particular object that help us to call the appropriate Activity for each tabs.
Now in the next step you'll add the tabs to our TabHost by calling the method addTab(TabHost.TabSpec).
Notice that the TabWidget object has never been istantiated. This is because a TabWidget must always be a child of a TabHost, which is what you use for almost all interaction with the tabs.
So when a tab is added to the TabHost, it's automatically added to the child TabWidget.
ListView
A ListView is a ViewGroup that creates a list of scrollable items. The list items are automatically added to the list using a ListAdapter.
In this example I'm going to show you how to create a ListView using a custom ListAdapter.
Suppose that we have to represent a particular type of Data inside our List. For example we can use a DTO like this:
package com.comtaste.android.dataVO;
/***
*
* @author Luca Florido
*
*/
public class Person {
public Person(){
}
public Person(String nameValue,String surnameValue ){
this.name = nameValue;
this.surname = surnameValue;
}
public String name;
public String surname;
}
Now we have to define a custom ListAdapter that is able to show the parameters of Person’s Objects inside a List Collection (for example an ArrayList).
We still need two elements to show data within a Person object
in a right way.
First we need a View Container (in our example PersonView) to draw a view where we can put the values, and a button for making operations in the Collection ( for example to delete the selected data from the listcollection).
Second, we need a custom ListAdapter to fill the listView with PersonView Objects filled with the items inside our Collection.
Define a Container for the Data view. The personView object is a simple LinearLayout class where we define the view’s objects (as you can see in its constructor ) and a Person object filled by the PersonListAdapter.
package com.comtaste.android.components;
import com.comtaste.android.R;
import com.comtaste.android.dataVO.Person;
import android.content.Context;
import android.content.res.Resources;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
/***
*
* @author Luca Florido
*
* View that contains objects to show in the list all the properties of a Person Object
*/
public class PersonView extends LinearLayout {
public Button buttonDel;
public Person person;
/***
*
* @param context Context of the application
* @param p Person object
* @param displayWidth Width of the screen
*/
public PersonView(Context context, Person p,int displayWidth){
super(context);
this.setOrientation(HORIZONTAL);
person = p;
TextView titleName = new TextView(context);
TextView valueName = new TextView(context);
TextView titleSurName = new TextView(context);
TextView valueSurName = new TextView(context);
titleName.setText("NAME:");
titleName.setWidth(200);
valueName.setText(p.name);
titleSurName.setText("SURNAME");
valueSurName.setText(p.surname);
LinearLayout main = new LinearLayout(getContext());
titleName.setWidth(displayWidth-100);
main.setOrientation(VERTICAL);
main.addView(titleName, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
main.addView(valueName, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
main.addView(titleSurName, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
main.addView(valueSurName, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
addView(main, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
buttonDel = new Button(context);
buttonDel.setText("Delete");
buttonDel.setWidth(100);
Resources res = getResources();
buttonDel.setBackgroundDrawable(res.getDrawable(R.drawable.cancelicon));
addView(buttonDel,new LinearLayout.LayoutParams(100,LayoutParams.WRAP_CONTENT));
}
}
Now create a ListAdapter. The PersonListAdapter is an extension of BaseAdapter class that contains all the methods required by theListActivity to draw a List of Object. Below you can see the code of the PersonListAdapter.
package com.comtaste.android.components;
import java.util.ArrayList;
import java.util.List;
import com.comtaste.android.dataVO.Person;
import com.comtaste.android.datamanage.EngineDB;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.view.View.OnClickListener;
/***
*
* @author Luca Florido
*
*/
public class PersonListAdapter extends BaseAdapter {
private Context myContext;
public List personList;
private Person person;
private EngineDB db;
private int dWidth;
public PersonListAdapter (Context context,int displayWidth){
myContext = context;
dWidth = displayWidth;
db = new EngineDB(myContext);
personList = new ArrayList();
personList = db.selectList();
}
public int getCount(){
return personList.size();
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
/***
* Create the View Objects to show in the UI
*/
public View getView(int position,View convertView, ViewGroup parent){
person = personList.get(position);
//Create a new PersonView object
PersonView personView = new PersonView(myContext, person,dWidth);
//Define a method to delete a Person object from the List Collection
personView.buttonDel.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
EngineDB db = new EngineDB(myContext);
PersonView per= (PersonView)v.getParent();
db.delete(per.person);
refresh();
}
});
return personView;
}
public void refresh(){
personList = new ArrayList();
personList = db.selectList();
notifyDataSetChanged();
}
}
In the constructor of the class we call a method that is able to create a List of Persons from a SQLLite database. In the getView() method a PersonView Object is created and filled with an object of the Person Collection.
For each position from 0 to the integer value of getCount() method ( the value of this method is the size of the Collection of Persons) the getView() method is called.
Then define the ListActivity.
Here is the ListActivity class that we configure as a tab of the TabHost of the section about the tabbed UI (see above)
Note that in the onResume() method of that Activity I've put some operations to refresh the Person Objects Collection and the List.
Doing that I can refresh my List every time a user clicks on the List Tab.
That’s all.
Regards
