Tab type navigation is a common design pattern in android applications. Android tabs make it easy for user to switch between different views or functional aspects of an application. Fragments will be used to display Tabs in an Android activity. In this lesson, we are going to explain you about how to create a tab layout.
The procedure is as follows:
• Set the ActionBar navigation mode to 
ActionBar.NAVIGATION_MODE_TABS.
• Get Tab instances from ActionBar.
• Let the activity implement TabListener and set it to the Tab instance.
• Create a custom Fragment class along with a custom layout.
• onTabSelected, instantiate the custom Fragment instance and replace the content.
First, create MainActivity.java under src/<your packagename>.
MainActivity.java:
[java]
public class MainActivity extends Activity {
// Declaring our tabs and the corresponding fragments.
ActionBar.Tab actiontab1, actiontab2, actiontab3;
Fragment tab1 = new Tab1();
Fragment tab2 = new Tab2();
Fragment tab3 = new Tab3();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Asking for the default ActionBar element that our platform supports.
ActionBar actionBar = getActionBar();
// Screen handling while hiding ActionBar icon.
actionBar.setDisplayShowHomeEnabled(false);
// Screen handling while hiding Actionbar title.
actionBar.setDisplayShowTitleEnabled(false);
// Creating ActionBar tabs.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Setting custom tab icons.
actiontab1 = actionBar.newTab().setText("Tab1");
actiontab2 = actionBar.newTab().setText("Tab2");
actiontab3 = actionBar.newTab().setText("Tab3");
// Setting tab listeners.
actiontab1.setTabListener(new TabListener(tab1));
actiontab2.setTabListener(new TabListener(tab2));
actiontab3.setTabListener(new TabListener(tab3));
// Adding tabs to the ActionBar.
actionBar.addTab(actiontab1);
actionBar.addTab(actiontab2);
actionBar.addTab(actiontab3);
}
}
[/java]
Create TabListener.java uder src/<your packagename> which extends TabListener.
TabListener.java:
[java]
public class TabListener implements ActionBar.TabListener {
private Fragment fragment;
// The constructor.
public TabListener(Fragment fragment) {
this.fragment = fragment;
}
// When a tab is tapped, the FragmentTransaction replaces
// the content of our main layout with the specified fragment;
// that's why we declared an id for the main layout.
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
ft.replace(R.id.activity_main, fragment);
}
// When a tab is unselected, we have to hide it from the user's view.
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
// Nothing special here. Fragments already did the job.
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
}
[/java]
Create Tab1.java, Tab2.java, Tab3.java Fragment class under src/<your package name>.
Tab1.java:
[java]
public class Tab1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.tab1, container, false);
return rootView;
}
}
[/java]
Tab2.java:
[java]
public class Tab2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.tab2, container, false);
return rootView;
}
}
[/java]
Tab3.java:
[java]
public class Tab3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.tab3, container, false);
return rootView;
}
}
[/java]
Create activity_main.xml under res/layout folder.
activity_main.xml:
[xml]
[/xml]
Create tab1.xml, tab2.xml, tab3.xml under res/layout folder.
tab1.xml:
[xml]
[/xml]
tab2.xml:
[xml]
[/xml]
tab3.xml:
[xml]
[/xml]
AndroidManifest.xml:
[xml]
[/xml]
Output: