Android Tech

The more we share, the more we get

TabView (Part 1) – Simple tab control in Android


The structure of a typical activity has tab control like this:

So, to create a tab control, you will need these things:

– TabHost

– TabWidget

– Tab content (may be a custom layout with some content, in this case is a Frame Layout contains some other contents)

Now, we will create a simple Tab control in Android

1. Open file main.xml and replace by the following code:

<?xml version=”1.0″ encoding=”utf-8″?>

<TabHost android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/tabHost”
xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<TabWidget
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@android:id/tabs”/>

<FrameLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@android:id/tabcontent”>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@+id/tab1″
android:orientation=”vertical”
android:paddingTop=”60px”>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab1″
android:id=”@+id/txt1″/>

</LinearLayout>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/tab2″
android:orientation=”vertical”
android:paddingTop=”60px”>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab 2″
android:id=”@+id/txt2″/>

</LinearLayout>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/tab3″
android:orientation=”vertical”
android:paddingTop=”60px”>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab 3″
android:id=”@+id/txt3″/>

</LinearLayout>
</FrameLayout>

</TabHost>


We can see this file contain 3 linear layouts for 3 tabs

2. After that, we will attach these linear layout for each tab as follow

TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
//tabHost.setup();

TabSpec spec1=tabHost.newTabSpec(“Tab 1”);
spec1.setContent(R.id.tab1);
spec1.setIndicator(“Tab 1”);

TabSpec spec2=tabHost.newTabSpec(“Tab 2”);
spec2.setIndicator(“Tab 2”);
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec(“Tab 3”);
spec3.setIndicator(“Tab 3”);
spec3.setContent(R.id.tab3);

tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);

Note that if you use TabActivity as a base class to your activity, you do not need to call TabHost.Setup() method.

The final result will like this:

You can download the source code from here

You can also insert a view dynamically to these tab like this:

TabSpec spec1=tabHost.newTabSpec(“Tab 1”);
spec1.setContent(R.id.tab1);
TextView txt=new TextView(this);
txt.setText(“Tab 1”);
txt.setBackgroundColor(Color.RED);
spec1.setIndicator(txt);

and modify file “main.xml” by remove text view control:


This is the final result:

Here is the update source code

Advertisements

One response to “TabView (Part 1) – Simple tab control in Android

  1. saeid sisakhti (@saeidxplod) August 29, 2012 at 12:04 pm

    oxolonto 🙂 thnx bro. i just ask you to update this series for fragments ! keep on.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: