In this sample we are going to create an application which includes two tabs under with two custom listview for each tabs.
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.TabHost;
public class TabListActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen);
TabHost mTabHost = getTabHost();
final ListView one=(ListView)findViewById(R.id.listOne);
final ListView two=(ListView)findViewById(R.id.listTwo);
String[] listItemsone = new String[] {"one","two","three"};
String[] listItemstwo = new String[] {"A","B","C"};
//Typed array which contains array values be stored in an separate xml file
TypedArray itemsOneIcons = getResources().obtainTypedArray(R.array.listOneicons);
TypedArray itemsTwoIcons = getResources().obtainTypedArray(R.array.listTwoicons);
one.setAdapter(new ImageAndTextAdapter(getApplicationContext(), R.layout.listrow, listItemsone, itemsOneIcons));
two.setAdapter(new ImageAndTextAdapter(getApplicationContext(), R.layout.listrow, listItemstwo, itemsTwoIcons));
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("Tab1").setContent(R.id.tab1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Tab ").setContent(R.id.tab2));
//Used to reduce the height of the Tabs
mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height /=2;
mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height /=2;
mTabHost.setCurrentTab(0);
one.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> myAdapter, View myView, int myItemInt, long mylng) {
//Used to get selected Item
String selectedFromList = (String) ( one.getItemAtPosition(myItemInt));
//Navigation
Intent selectedItem = new Intent (CurrentActivity, Navigation Activity);
//Sending value to next screen
selectedItem.putExtra("Choice", selectedFromList);
startActivity( selectedItem);
}
}
);
two.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> myAdapter, View myView, int myItemInt, long mylng) {
//Used to get selected Item
String selectedFromList = (String) ( two.getItemAtPosition(myItemInt));
//Navigation
Intent selectedItem = new Intent (CurrentActivity, Navigation Activity);
//Sending value to next screen
selectedItem.putExtra("Choice", selectedFromList);
startActivity( selectedItem);
}
}
);
}
}
Custom Image and Text List adapter
import android.content.Context;
import android.content.res.TypedArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class ImageAndTextAdapter extends ArrayAdapter<String> {
private LayoutInflater mInflater;
private String[] mStrings;
private TypedArray mIcons;
private int mViewResourceId;
public ImageAndTextAdapter(Context ctx, int viewResourceId,
String[] strings, TypedArray icons) {
super(ctx, viewResourceId, strings);
mInflater = (LayoutInflater)ctx.getSystemService(
Context.LAYOUT_INFLATER_SERVICE);
mStrings = strings;
mIcons = icons;
mViewResourceId = viewResourceId;
}
@Override
public int getCount() {
return mStrings.length;
}
@Override
public String getItem(int position) {
return mStrings[position];
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = mInflater.inflate(mViewResourceId, null);
ImageView iv = (ImageView)convertView.findViewById(R.id.option_icon);
iv.setImageDrawable(mIcons.getDrawable(position));
TextView tv = (TextView)convertView.findViewById(R.id.option_text);
tv.setText(mStrings[position]);
return convertView;
}
}
homescreen.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/quickkal" >
<RelativeLayout
android:id="@+id/home_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/background_gradient"
>
<Button
android:id="@+id/map_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:padding="5dp"
android:text="Map"
android:textColor="#fff"
android:background="@drawable/btn_custom" />
<ImageView
android:id="@+id/maestro_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:src="@drawable/header"
/>
</RelativeLayout>
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dip"
android:foreground="@null">
<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"
android:tabStripEnabled="false"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp">
<ListView android:id="@+id/animals"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
<ListView android:id="@+id/birds"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
Icons.xml file ------- Used to store typed array
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name=" listTwoicons">
<item>@drawable/icon</item>
<item>@drawable/icon</item>
<item>@drawable/icon</item>
</array>
<array name=" listOneicons">
<item>@drawable/icon</item>
<item>@drawable/icon</item>
<item>@drawable/icon</item>
</array>
</resources>
listrow.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/option_icon"
android:layout_width="48dp"
android:layout_height="fill_parent"/>
<TextView
android:id="@+id/option_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</LinearLayout>
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.TabHost;
public class TabListActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen);
TabHost mTabHost = getTabHost();
final ListView one=(ListView)findViewById(R.id.listOne);
final ListView two=(ListView)findViewById(R.id.listTwo);
String[] listItemsone = new String[] {"one","two","three"};
String[] listItemstwo = new String[] {"A","B","C"};
//Typed array which contains array values be stored in an separate xml file
TypedArray itemsOneIcons = getResources().obtainTypedArray(R.array.listOneicons);
TypedArray itemsTwoIcons = getResources().obtainTypedArray(R.array.listTwoicons);
one.setAdapter(new ImageAndTextAdapter(getApplicationContext(), R.layout.listrow, listItemsone, itemsOneIcons));
two.setAdapter(new ImageAndTextAdapter(getApplicationContext(), R.layout.listrow, listItemstwo, itemsTwoIcons));
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("Tab1").setContent(R.id.tab1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Tab ").setContent(R.id.tab2));
//Used to reduce the height of the Tabs
mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height /=2;
mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height /=2;
mTabHost.setCurrentTab(0);
one.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> myAdapter, View myView, int myItemInt, long mylng) {
//Used to get selected Item
String selectedFromList = (String) ( one.getItemAtPosition(myItemInt));
//Navigation
Intent selectedItem = new Intent (CurrentActivity, Navigation Activity);
//Sending value to next screen
selectedItem.putExtra("Choice", selectedFromList);
startActivity( selectedItem);
}
}
);
two.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> myAdapter, View myView, int myItemInt, long mylng) {
//Used to get selected Item
String selectedFromList = (String) ( two.getItemAtPosition(myItemInt));
//Navigation
Intent selectedItem = new Intent (CurrentActivity, Navigation Activity);
//Sending value to next screen
selectedItem.putExtra("Choice", selectedFromList);
startActivity( selectedItem);
}
}
);
}
}
Custom Image and Text List adapter
import android.content.Context;
import android.content.res.TypedArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class ImageAndTextAdapter extends ArrayAdapter<String> {
private LayoutInflater mInflater;
private String[] mStrings;
private TypedArray mIcons;
private int mViewResourceId;
public ImageAndTextAdapter(Context ctx, int viewResourceId,
String[] strings, TypedArray icons) {
super(ctx, viewResourceId, strings);
mInflater = (LayoutInflater)ctx.getSystemService(
Context.LAYOUT_INFLATER_SERVICE);
mStrings = strings;
mIcons = icons;
mViewResourceId = viewResourceId;
}
@Override
public int getCount() {
return mStrings.length;
}
@Override
public String getItem(int position) {
return mStrings[position];
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = mInflater.inflate(mViewResourceId, null);
ImageView iv = (ImageView)convertView.findViewById(R.id.option_icon);
iv.setImageDrawable(mIcons.getDrawable(position));
TextView tv = (TextView)convertView.findViewById(R.id.option_text);
tv.setText(mStrings[position]);
return convertView;
}
}
homescreen.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/quickkal" >
<RelativeLayout
android:id="@+id/home_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/background_gradient"
>
<Button
android:id="@+id/map_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:padding="5dp"
android:text="Map"
android:textColor="#fff"
android:background="@drawable/btn_custom" />
<ImageView
android:id="@+id/maestro_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:src="@drawable/header"
/>
</RelativeLayout>
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dip"
android:foreground="@null">
<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"
android:tabStripEnabled="false"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp">
<ListView android:id="@+id/animals"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
<ListView android:id="@+id/birds"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
Icons.xml file ------- Used to store typed array
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name=" listTwoicons">
<item>@drawable/icon</item>
<item>@drawable/icon</item>
<item>@drawable/icon</item>
</array>
<array name=" listOneicons">
<item>@drawable/icon</item>
<item>@drawable/icon</item>
<item>@drawable/icon</item>
</array>
</resources>
listrow.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/option_icon"
android:layout_width="48dp"
android:layout_height="fill_parent"/>
<TextView
android:id="@+id/option_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</LinearLayout>
