Tabs make it easy to explore and switch between different views. Tabs content is organised at a high level, such as data sets or functional aspects of an app. There are two types of Tabs in android one is TabHost and other one is Swipeable Tab. Here we will learn which approach is best TabHost vs Swipeable Tab for android Tabs layout. To understand the different types of tab layout in android first we need to understand the difference between Activity and Fragment because both play important role to create tab layout.
Activity:- Activity is a part of application that provides a User Interface. An application have many activities that are bound to each other. In android application we have one main activity that is used for main screen user interface.
Fragment:- Fragment is a portion of an Activity. We can use multiple fragments in an Activity to build multi layers user interface. A fragment can be reuse from multiple activities.
In TabHost many activities are used but in Swipeable Tab many fragments are used in a single activity to swipe the tabs. Here we will demonstrate which should be implemented between TabHost or Swipeable Tab in android.
TabHost vs Swipeable Tab in android
Layout of TabHost:-
<?xmlversion="1.0"encoding="utf-8"?><TabHostxmlns:android="http://schemas.android.com/apk/res/android"android_id="@android:id/tabhost"android_layout_width="fill_parent"android_layout_height="fill_parent"><LinearLayoutandroid_orientation="vertical"android_layout_width="fill_parent"android_layout_height="fill_parent"><TabWidgetandroid_id="@android:id/tabs"android_layout_width="fill_parent"android_layout_height="wrap_content"/><FrameLayoutandroid_id="@android:id/tabcontent"android_layout_width="fill_parent"android_layout_height="fill_parent"><include your layout for tab1/> <include your layout for tab2/> <include your layout for tab3/></FrameLayout></LinearLayout></TabHost>
As shown above XML file Tabhost, TabWidget and FrameLayout are used. In FrameLayout add the layouts as per requirement. For different layout add different activities as shown below.
Initialization of TabHost:-
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
tabHost.setup();
Bundle intentExtras = getIntent().getExtras();
// Create an Intent to launch an Activity for the tab (to be reused)
Intent firstActvity = new Intent(this, FirstActivity.class);
Intent secondActivity = new Intent(this, SecondActivity.class);
Intent thirdActivity = new Intent(this, ThirdActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
TabSpec tabFirst = tabHost.newTabSpec(getString(R.string.tab_first)).setIndicator("first", getResources().getDrawable(R.drawable.tab_first)).setContent(intentfirstActivity);
TabSpec tabSecond = tabHost.newTabSpec(getString(R.string.tab_second)).setIndicator("second", getResources().getDrawable(R.drawable.tab_second)).setContent(intentsecondActivity);
TabSpec tabThird = tabHost.newTabSpec(getString(R.string.tab_third)).setIndicator("third", getResources().getDrawable(R.drawable.tab_third)).setContent(intentthirdActivity);
tabHost.addTab(tabFirst);
tabHost.addTab(tabSecond);
tabHost.addTab(tabThis);
tabHost.setCurrentTabByTag(getTag(intentExtras));
As shown above all tabs contain different activity means new activity will be open when user press any tab.
Now implement Tab with Swipeable view. Here material tabs library is used for swipeable tab view. So first add the library in gradle-
dependencies {
compile 'io.karim:materialtabs:2.0.5'
}
After add the library add the view in the XML file.
Layout of Tab with swipeable view:-
<io.karim.materialtabs android_id="@+id/tabsSwipeableView" android_layout_width="match_parent" android_layout_height="48dp" android_textColor="@color/white" android_layout_below="@+id/toolbar" /> <android.support.v4.view.viewpager android_id="@+id/pager" android_layout_width="match_parent" android_layout_height="match_parent" android_layout_below="@+id/tabHost" />
For this library tabs are initialized in activity as shown below.
pager = (ViewPager) this.findViewById(R.id.pager); // init view pager adapter=new ViewPagerAdapter(getSupportFragmentManager()); pager.setAdapter(adapter); tabSwipeableView = (MaterialTabs) this.findViewById(R.id.tabSwipeableView); tabSwipeableView.setViewPager(pager);
After initilize the tabs an adapter is created as shown below.
private class ViewPagerAdapter extends FragmentStatePagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
public Fragment getItem(int tab) {
if (getPageTitle(tab).equals(getString(R.string.tab_fist))) {
return First_Fragment;
} else if(getPageTitle(tab).equals(getString(R.string.tab_second))){
return Second_Fragment;
}else if(getPageTitle(tab).equals(getString(R.string.tab_third))){
return Third_Fragment;
}
}
@Override
public int getCount() {
return 3;
}
@Override
public String getPageTitle(int position) {
switch (position) {
case 0 :
return getString(R.string.tab_first);
case 1:
return getString(R.string.tab_second);
case 2:
return getString(R.string.tab_third);
default:
return null;
}
}
}
Three fragments are used for different tabs. So multiple fragments are used in one activity. Tabs and fragments can be used as per requirement.
Conclusion:
Tabhost vs swipeable tab, which is better? This Article gives the perfect solution for this problem. In Tabhost the problem is with using multiple activities which force to open new layout every time. In Swipeable view only one activity is used with more than one fragments. So it is better to use Swipeable Tab in android instead of TabHost. There are many apps like SocialAPI, Flipkart, WhatsApp which have used the Swipeable Tab.
References:
Swipeable Tab
