May 4, 2011

Android:Bottom Tabbar Control

Standard
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.  

Tabbar Control Screen Shots






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

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

            Package Name : com.kpbird.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
package com.kpbird.tabbarcontrol;

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


package com.kpbird.tabbarcontrol;

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.




24 comments:

  1. Hi Ketan
    nice article. you can also chek mine
    http://android-pro.blogspot.com/2010/08/iphone-like-tab-bar-in-android.html

    ReplyDelete
  2. Thank you so much for such a simple tab app that actually imports into eclipse with ease!!! Can I email you with few questions I have?

    ReplyDelete
  3. Hello Jeremey,

    Your questions are welcome. you can send me email any time or you can post your questions in comment section

    ReplyDelete
  4. can u plz say how to give name for the tabs..

    ReplyDelete
  5. hi,
    can u plz say how to give names for this tab..

    ReplyDelete
  6. can this hold multiple activities in single tab.. for example 3 activities in first tab 2 activities in second tab

    ReplyDelete
  7. Hello Dreamer,

    Sorry It can not hold more then 1 activity per tab.

    Thank

    ReplyDelete
  8. Dear Mukesh,

    You can use image that contain icon and text both.

    Thank you

    ReplyDelete
  9. how would i put a web view in the tabs?

    ReplyDelete
  10. Hello Ketan,
    i am currently working in an application which has tabs, but my one of my tab is having multiple views, so i would like to take some help of yours if you are free with ure time.

    ReplyDelete
  11. Hello Robbins,

    create one view say "MainView.xml", then create all views that you want to display in that.. say "A_View.xml" and "B_view.xml" then you can include both views in MainView.xml using or another option is

    Then provide MainView.xml to the Tabview.


    I hope it will resolve your problem.

    Regards,
    Ketan Parmar

    ReplyDelete
  12. Hello SmartAlec2300,

    It's very easy to put WebView in Tabs.
    1. Create one layout named "MyWebView.xml"
    2. Add Web View in MyWebView.xml
    3. set MyWebView.xml in tabs.

    I apologies for late reply..

    I hope it will help you..

    Regards,
    Ketan Parmar

    ReplyDelete
  13. Thank u so much.I have used this source code. I have some query...

    ReplyDelete
  14. I have used more then four tab, and i want to scroll it.. can please reply me how to do it....

    ReplyDelete
  15. Hello eWeby,

    As of know Tab Control does not support scrolling but you can modify it as per your requirement.

    It require major changes in TabView class.

    Soon I will update TabBar control as per your requirement.

    Thank You.

    ReplyDelete
  16. Manjeet Singh Goyal

    Hi Everybuddy,
    Great Tutorial without any confusion.
    Such a great example of tabview.

    ReplyDelete
  17. thanks for this post, I have some trouble in using this when I have more than one activity which extends MapActivity...could you please give me some clue in this ?

    ReplyDelete
  18. hey everyone i need a help.
    i am working on a app in which the main tabview consists 5 tabs. lets say 123,abc,pqr,xyz,lmn..
    in this on click of pqr i want to remove the main tabview and load another tab view which has 4 tabs.how can i do this.

    ReplyDelete
  19. Hi we can give tab name on the screen.
    Create one Linearlayout and add it image and textview to layout and this layout add to the view, so you will get both image and name.

    ReplyDelete
  20. We have one or more thatn one tabs at top and now we want iPhone like tab bar at bottom as menu but it is giving error .. What should be the issue? is it context related issue? Please help.

    ReplyDelete
  21. Move layouts up when soft keyboard is shown?

    ReplyDelete
  22. Hai,i want to send the double value to another activity using tab's(Android:Bottom Tabbar Control) any one have an idea,please help.

    ReplyDelete
  23. Nice post.Give it up. Thanks for share this article. For more visit:Web App Development

    ReplyDelete
  24. Madhava Jay12:35 PM

    For Android you probably want to use the Action Bar Tabs:

    http://developer.android.com/design/building-blocks/tabs.html

    Also we just released PortKit: UX Metaphor Equivalents for iOS & Android

    http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

    It has side by side comparisons of the native ui widgets and links to downloadable PSDs for designing.

    ReplyDelete