Suman’s Blog

Android Application Development

Customized Android Tabs

Posted by Suman on February 2, 2009

Is there a way to customize Android default tabs?

I love Android

As we know Android TabHost is buggy and default tabs don’t look good, below listed are some of the issues:

  1. There is no method to change TabHost Indicator once it’s been created, that’s why the only way to change the icon is to call setupTabs().
  2. AdapterView throws Exception.

Suppose I want to show small size tab header with icons as shown below.

To show a selected tab, I can simply change its background in onClickListener()

ImageView home = (ImageView) findViewById(R.id.home_icon);

home.setBackgroundDrawable(R.drawable.gray);


First I tried to make changes in TabHost, but no success. Finally I wrote code to implement tab like functionality that seems to work fine for me.

Here is a sample code example to write your own TabActivity.

tab_holder.xml is the file which contains the tab header view. This example is for three tabs. Next I have three XML files (named as itest1.xml, itest2.xml and itest3.xml) each corresponds to one tab.

tab_holder.xml

<?xml version=“1.0″ encoding=“UTF-8″?>

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:orientation=“vertical”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

android:paddingRight=“4px”

android:paddingLeft=“4px” >

<!– –>

<TextView android:id=“@+id/tab1″

android:layout_width=“70px”

android:layout_height=“40px”

android:layout_alignParentLeft=“true”

android:layout_marginTop=“1px”

android:layout_marginLeft=“10px”

android:background=“@drawable/white” />

<TextView android:id=“@+id/text_tab1″

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentLeft=“true”

android:layout_marginTop=“10px”

android:layout_marginLeft=“20px”

android:textStyle=“bold”

android:textSize=“17px”

android:textColor=“@color/orange”

android:text=“Tab1″ />

<TextView android:id=“@+id/tab2″

android:layout_width=“70px”

android:layout_height=“40px”

android:layout_alignParentLeft=“true”

android:layout_marginTop=“1px”

android:layout_marginLeft=“83px”

android:background=“@drawable/white” />

<TextView android:id=“@+id/text_tab2″

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentLeft=“true”

android:layout_marginTop=“10px”

android:layout_marginLeft=“100px”

android:textStyle=“bold”

android:textSize=“17px”

android:textColor=“@color/blue”

android:text=“Tab2″ />

<TextView android:id=“@+id/tab3″

android:layout_width=“70px”

android:layout_height=“40px”

android:layout_alignParentLeft=“true”

android:layout_marginTop=“1px”

android:layout_marginLeft=“156px”

android:background=“@drawable/white” />

<TextView android:id=“@+id/text_tab3″

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_marginTop=“10px”

android:layout_marginLeft=“170px”

android:textStyle=“bold”

android:textSize=“17px”

android:textColor=“@color/green”

android:text=“Tab3″ />

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:id=“@+id/box_1″

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_below=“@+id/tab1″ >


</LinearLayout>


</RelativeLayout>

As per my previous post, it has a placeholder (box_1) at the end. In this placeholder we will place the view for selected tab. If you have not read Nesting XML Layouts, please read that first, because we are going to use same technique here.

Itest1.xml has the view corresponding to Tab1.

<?xml version=“1.0″ encoding=“UTF-8″?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:id=“@+id/box”

android:orientation=“horizontal”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent” >


<TextView android:id=“@+id/box_0″

android:layout_width=“fill_parent”

android:layout_height=“266px”

android:background=“@drawable/red”

android:textColor=“@color/solid_black”

android:text=“This is tab1″ />

</LinearLayout>

Itest2.xml has the view corresponding to Tab2.

<?xml version=“1.0″ encoding=“UTF-8″?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:id=“@+id/box”

android:orientation=“horizontal”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent” >

<TextView android:id=“@+id/box_0″

android:layout_width=“fill_parent”

android:layout_height=“266px”

android:background=“@drawable/blue”

android:text=“This is tab2″/>

</LinearLayout>

Itest3.xml has the view corresponding to Tab3.

<?xml version=“1.0″ encoding=“UTF-8″?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:id=“@+id/box”

android:orientation=“horizontal”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent” >

<TextView android:id=“@+id/box_0″

android:layout_width=“fill_parent”

android:layout_height=“266px”

android:background=“@drawable/green”

android:text=“This is tab3″ />

</LinearLayout>

Here come the Java code which will make all this work.

Java Code

// tab_holder is passed to setContentView(int resId)

public void onCreate(Bundle bundle) {

super.onCreate(bundle);

setContentView(R.layout.tab_holder);

generateScreen(1);

}

/* generateScreen(int tabNo) is a method which will append the view for pressed tab to tab_holder. It take an Integer, which is the tab number. By default I want to show tab1, that’s why generateScreen(1)is called in onCreate. */

private void generateScreen(int tabNum) {

LinearLayout ll = (LinearLayout) findViewById(R.id.box_1);

if (tabNum == 1) {

View vv = View.inflate(PrivacySettings.this, R.layout.itest1, null);

ll.addView(vv, new LinearLayout.LayoutParams(ll.getLayoutParams().width, ll.getLayoutParams().height));

} else if (tabNum == 2) {

View vv = View.inflate(PrivacySettings.this, R.layout.itest2, null);

ll.addView(vv, new LinearLayout.LayoutParams(ll.getLayoutParams().width, ll.getLayoutParams().height));

} else {

View vv = View.inflate(PrivacySettings.this, R.layout.itest3, null);

ll.addView(vv, new LinearLayout.LayoutParams(ll.getLayoutParams().width, ll.getLayoutParams().height));

}

setListeners();

}

private
void setListeners() {

TextView tab1 = (TextView) findViewById(R.id.tab1);

tab1.setOnClickListener(onClickListener);

TextView tab2 = (TextView) findViewById(R.id.tab2);

tab2.setOnClickListener(onClickListener);

TextView tab3 = (TextView) findViewById(R.id.tab3);

tab3.setOnClickListener(onClickListener);

}

private OnClickListener onClickListener = new OnClickListener() {

public void onClick(final View v) {

LinearLayout ll = (LinearLayout) findViewById(R.id.box_1);


switch (v.getId()) {

case R.id.tab1:

System.out.println(“tab1″);

ll.removeAllViews();

generateScreen(1);

break;

case R.id.tab2:

System.out.println(“tab2″);

ll.removeAllViews();

generateScreen(2);

break;

case R.id.tab3:

System.out.println(“tab3″);

generateScreen(3);

break;

}

}

};

Screen shot


This concludes our solution for personalized Android tabs.

About these ads

2 Responses to “Customized Android Tabs”

  1. pinkgom said

    hi !
    I study custom android tab, and I try this exercise but fail….

    would you give me a sample file ?

    my e-mail pppplqqqq@hanmail.net

    please answer for me.

  2. Jorgesys said

    Good aproach! but can you put a class inside like the tabhost widget?
    .setContent(intent);

Leave a Reply

Fill in your details below or click an icon to log in:

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

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: