Custom Tabs

Custom Tabs

TabHost and TabWidget are used to create a tabbed user interface on Android screens. TabHost is the root node and TabWidget is for displaying the tabs. FrameLayout is used for displaying the content of the tab.

Tab content can be implemented in two ways: either Views of the tabs can be swapped within the same Activity or can use separate activities for each tab.

Customizing the tabs helps in changing the default TabWidget look in Android.

Creating Custom Tabs

In this example, the tabs are created without defining an xml layout. TabHost, TabWidget and the FrameLayout are defined via program code.

Also, tab content is implemented by swapping the Views within a single activity.

Icons are also added as the tab indicators along with the text content.

Ø    As the first step, create a CustomTabActivity class.

Ø    Define a LinearLayout and set the content of the Activity as this LinearLayout.

Ø    Then define a TabHost and add as the View of LinearLayout.

Ø    Define TabWidget and FrameLayout and set them the View of TabHost.

Ø    Then define the TextViews to be appeared on each tab and setup the same.

Ø    Choose tab options using TabSpec as the next step.

Ø    Here the tab content is chosen by calling a TabContentFactory interface. It helps in making the content of the tab when it is selected. This is used while activities are not going to be loaded as tab contents.

CustomTabActivity.class file

package com.ipsr.customtab;

import android.app.Activity;

import android.content.res.Resources;

import android.os.Bundle;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.LinearLayout;

import android.widget.TabHost;

import android.widget.TabHost.TabContentFactory;

import android.widget.TabHost.TabSpec;

import android.widget.TabWidget;

import android.widget.TextView;

public class CustomTabActivity extends Activity

  {

          int tabHeight = 40;

          @Override

          public void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

         

          LinearLayout main = new LinearLayout(this);

          main.setOrientation(LinearLayout.VERTICAL);

          setContentView(main);

          TabHost tabs = new TabHost(this);

          tabs.setId(android.R.id.tabhost);

          main.addView(tabs);

          TabWidget tabWidget = new TabWidget(this);

          tabWidget.setId(android.R.id.tabs);

          tabs.addView(tabWidget);

          FrameLayout tabContent = new FrameLayout(this);

          tabContent.setId(android.R.id.tabcontent);

          tabContent.setPadding(0, tabHeight, 0, 0);

          tabs.addView(tabContent);

          TextView content = new TextView(this);

          content.setText("Welcome To Music Store!!!!!");

          content.setPadding(10, 30, 100, 0);

          content.setId(100);

          tabs.setup();

         

          TextView content2 = new TextView(this);

          content2.setText("Welcome to the world of Books!!!!!");

          content2.setPadding(10, 30, 100, 0);

          content2.setId(100);

          tabs.setup();

         

          TextView content3 = new TextView(this);

          content3.setText("Welcome to Game World!!!!!!!");

          content3.setPadding(10, 30, 100, 0);

          content3.setId(100);

          tabs.setup();

                   

          Resources res = getResources();

         

          TabSpec tspec1 = tabs.newTabSpec("Tab1");

          tspec1.setIndicator("Songs",res.getDrawable(R.drawable.music));

          tspec1.setContent(new PreExistingViewFactory(content));

          tabs.addTab(tspec1);

          TabSpec tspec2 = tabs.newTabSpec("Tab2");

          tspec2.setIndicator("Books",res.getDrawable(R.drawable.books));

          tspec2.setContent(new PreExistingViewFactory(content));

          tabs.addTab(tspec2);

          TabSpec tspec3 = tabs.newTabSpec("Tab3");

          tspec3.setIndicator("Games",res.getDrawable(R.drawable.games));

          tspec3.setContent(new PreExistingViewFactory(content));

          tabs.addTab(tspec3);

          }

class PreExistingViewFactory implements TabContentFactory{

          private final View preExisting;

          protected PreExistingViewFactory(View view){

          preExisting = view;

          }

          public View createTabContent(String tag) {

          return preExisting;

          }

          }

          }