Bottom TabBar control

Introduction

In this tutorial, You will learn how to create application with bottom TabBar Control. Tab Bar control is present in Android UI component but It always displays at top of screen. Many times we required to display Tabs at bottom of screen, just like iPhone, Unfortunately Android native TabBar control does not provide facility to display Tabs at bottom of the screen.  

Let's develop Tabbar Control.
I assume that you know basic of Android application development.
Before start the project you required images for tabbar control. Suppose you want to create four tab then you need eight images for tabs (selected and unselected images) and one image for background.
This control is not robust enough to display icon and text but It is possible using design.  design your tab image with icon and text.
Step 1 : Create Android Project using eclipse with following parameter.
            Project Name : TabbarControl
            Activity Name : FirstTab
Step 2 : Create package named "com.tabwidget". create following classes in com.tabwidget package
             1. Tab.java
             2. TabView.java
             3. TabHostProvider.java
(Download source code and copy this package in your source code)

Step 3: Create class file TabBarView. This class extends TabHostProvider.java class. TabHostProvider class has abstract method getTabHost. we are going to implement getTabHost method.  We are going to create all tabs in this method. as illustrate I am going to create four tabs. I also required four Activities. Using this TabBar control we can bind Activity with each tab.

1. TabView.java

 

import android.app.Activity;

import android.content.Intent;

 

import com.tabwidget.Tab;

import com.tabwidget.TabHostProvider;

import com.tabwidget.TabView;

 

public class TabbarView extends TabHostProvider {

 

 private Tab firstTab;

 private Tab secondTab;

 private Tab thirdTab;

 private Tab fourTab;

 private TabView tabView;

 public TabbarView(Activity context) {

 super(context);

 // TODO Auto-generated constructor stub

 }

 

 @Override

 public TabView getTabHost(String category) {

 tabView = new TabView(context);

 tabView.setBackgroundID(R.drawable.tab_background_55);

  

 firstTab = new Tab(context, "One");

 firstTab.setIntent(new Intent(context,FirstTab.class));

 firstTab.setIcon(R.drawable.help);

 firstTab.setIconSelected(R.drawable.help_selected);

  

 secondTab = new Tab(context, "Two");

 secondTab.setIntent(new Intent(context,SecondTab.class));

 secondTab.setIcon(R.drawable.help);

 secondTab.setIconSelected(R.drawable.help_selected);

 

 thirdTab = new Tab(context, "Three");

 thirdTab.setIntent(new Intent(context,ThirdTab.class));

 thirdTab.setIcon(R.drawable.help);

 thirdTab.setIconSelected(R.drawable.help_selected);

 

 fourTab = new Tab(context, "Four");

 fourTab.setIntent(new Intent(context,FourTab.class));

 fourTab.setIcon(R.drawable.help);

 fourTab.setIconSelected(R.drawable.help_selected);

 

 tabView.addTab(firstTab);

 tabView.addTab(secondTab);

 tabView.addTab(thirdTab);

 tabView.addTab(fourTab);

 

 tabView.setCurrentView(R.layout.firsttab);

 return tabView;

}

 

}

Let's understand above code.
1. Create object of Tab class. suppose you want to create four Tabs then create four object of Tab class
2. Create object of TabView class. TabView is base class we are going to add Tabs object in TabView class. you can set tab background using setBackgroundID method.
3. Tab required two objects context and tag name, you can pass context variable directly and Tag name is just for reference. it does not have any relation with behavior of tab control.
4. now set Intent , set Icon and set selected icon for the tab. apply same process for all tabs.
5. add tabs in TabView. tabview.setCurrentView is used to set the default selected tab.
Step 4 : Now we are ready to implement our tabs in activity. We already have on activity FirstTab. We need to create three more activities.
Activity
             1. FirstTab.java
             2. SecondTab.java
             3. ThirdTab.java
             4. FourthTab.java
1. FirstTab.java
import android.app.Activity;

import android.os.Bundle;

import com.tabwidget.TabHostProvider;

import com.tabwidget.TabView;

public class FirstTab extends Activity{

private TabHostProvider tabProvider;

private TabView tabView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

tabProvider = new TabbarView(this);

tabView = tabProvider.getTabHost("main");

tabView.setCurrentView(R.layout.firsttab);

setContentView(tabView.render(0));

}

}

Normally we can pass XML layout name in setContentView method but for tab bar you required to write above coding.  

        setContentView(tabView.render(0));

In above method tabview.render(0). Here 0 represent the tab number. starting from zero (0). suppose you  have four tab. it required four activity then you need to write 0 activity which you want to call when user presse first tab. write 1 in activity that you want to display second. and so on...

XML Layout, For Tabbar control we do not need to write any tags/component.  you can design XML as per your requirement. No extra care required for tabbar control. All tabs will generate dynamically from the TabView and TabHostProvider class.

             1. firsttab.xml
             2. secondtab.xml
             3. thirdtab.xml
             4. fourthtab.xml
Step 5: Finally do not forget to register activities in AndroidManiFest.xml file.

Download Source Code from Here : Click 
[Note: Click On File-> Download To download source code zip file]