Customize the tab in Android

First we are going to see about First example

CustomTabActivity.java

package com.customs.tabs;

import com.customs.tabs.R;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

public class CustomTabActivity extends TabActivity{
 private TabHost tabHost;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setTabs();
    }
    
  private void setTabs() {
  tabHost = getTabHost();
  
  addTab(R.string.tab_1, R.drawable.info);
  addTab(R.string.tab_2, R.drawable.info);
  addTab(R.string.tab_3, R.drawable.info);
 }
 
 private void addTab(int labelId, int drawableId) {
  Intent intent = new Intent(this, TabAct.class);
  TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);  
  
  View tabIndicator = LayoutInflater.from(this).inflate(R.layout.indicator, getTabWidget(), false);
  
  TextView title = (TextView) tabIndicator.findViewById(R.id.title);
  title.setText(labelId);
  ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
  icon.setImageResource(drawableId);
  
  spec.setIndicator(tabIndicator);
  spec.setContent(intent);
  tabHost.addTab(spec);
  
 }
}

The class extends TabActivity and the header of the tab is provided in seperate activity which is called on the addTab method. The selection / unselection / active colors are mentioned in the indicator xml file in the layout

indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"    
    android:layout_weight="1"
    android:orientation="vertical"
    android:background="@drawable/indicator"
    android:padding="5dp">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />    
</RelativeLayout>

Now we can see the Second example of Tab

Here we are not going to extend the tabactivity, instead of that we can set the tab headers through setting background images or colors using xml and without using xml

CustomTabs.java

package com.customized.tabs;

import com.customized.tabs.R;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.TabContentFactory;
import android.widget.TabHost.TabSpec;

public class CustomTabs extends Activity {

 private TabHost mTabHost;
 private TextView mTabLayout;

 private void setupTabHost() {
  mTabHost = (TabHost) findViewById(android.R.id.tabhost);
  mTabHost.setup();
  mTabLayout = (TextView) findViewById(R.id.taber);
  mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
   
   @Override
   public void onTabChanged(String tabId) {
    mTabHost.getTabWidget().getChildAt(0)
    .setBackgroundResource(R.drawable.m2);
    if ("Tab 1".equals(tabId)) {
     mTabHost.getTabWidget().getChildAt(0)
       .setBackgroundResource(R.drawable.m1);
     mTabLayout.setText("This is Tab 1");
    } else if("Tab 2".equals(tabId)) {
     mTabLayout.setText("This is Tab 2");
    } else {
     mTabLayout.setText("This is Tab 3");
    }
   }
  });
 }

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // construct the tabhost
  setContentView(R.layout.main);

  setupTabHost();
  
  //mTabHost.getTabWidget().setDividerDrawable(R.drawable.divider);

  setupTab(new TextView(this), "Tab 1");
  setupTab(new TextView(this), "Tab 2");
  setupTab(new TextView(this), "Tab 3");
 }

 private void setupTab(final View view, final String tag) {
  View tabview = createTabView(mTabHost.getContext(), tag);
  
  TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
   public View createTabContent(String tag) {return view;}
  });
  mTabHost.addTab(setContent);
  if ("Tab 1".equals(tag))
   mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(
     R.drawable.m1);
  

 }

 private static View createTabView(final Context context, final String text) {
  View view = LayoutInflater.from(context).inflate(R.layout.bg, null);
  TextView tv = (TextView) view.findViewById(R.id.tabsText);
  tv.setText(text);
  return view;
 }
}

In the above code i had commented the divider between each header, if you need means you can uncomment and i had set a different image for the Tab 1 alone, if you need you can set different images for each tab like that. Then in the bg_selector.xml i had commented the xml files for background color and i had set images for that

Thanks 

akm from cdacians(www.cdacians.com)

http://www.cdacians.com/CdaciansBlog.aspx