Is there a way to customize Android default tabs

Is there a way to customize Android default tabs?

https://ezmobile.wordpress.com/2009/02/02/customized-android-tabs/

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”

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”

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”

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”

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”

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.

This entry was posted on February 2, 2009 at 12:53 pm and is filed under Android. Tagged: Android, Layout, dynamically load XML layout, code example Android, TabHost, Customized Android Tabs, change Android Default Tabs, Android customize tab, Android tab example, customize tab indicator. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.