Android ActionBar Tab Navigation Example

This example will show you how to use android ActionBar to implement Tab navigation. When you click one tab, it will show different content view.

The system will adjusts the TAB to accommodate the different sizes of the screen. When the screen is wide enough, the navigation TAB is placed in the main action bar. When the screen is too narrow, the TAB is placed in a separate bar.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/7k5hswb-b4o

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/IrYCnskHXYY

1. Activity Java File.

ActionBarTabActivity.java

package com.dev2qa.example;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class ActionBarTabActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_action_bar_tab);

        // Get ActionBar.
        ActionBar actionBar = getSupportActionBar();
        // Set tab navigation mode.
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Set below attributes to add logo in ActionBar.
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setDisplayUseLogoEnabled(true);
        actionBar.setLogo(R.drawable.icon_tech_32);

        actionBar.setTitle("dev2qa.com - Tab Example");

        // Listen to action bar tab select event.
        ActionBar.TabListener tabListener = new ActionBar.TabListener(){
            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                String tabText = (String)tab.getText();
                tabText = tabText.trim().toLowerCase();
                switch (tabText)
                {
                    // If select Java tab.
                    case "java":
                        List<String> javaListData = new ArrayList<String>();
                        javaListData.add("Java Core");
                        javaListData.add("Java EE");
                        javaListData.add("Servlet");
                        javaListData.add("JSP");
                        javaListData.add("JDBC");

                        setContentListView(javaListData, android.R.layout.simple_list_item_multiple_choice);
                        break;

                    // If select C++ tab.
                    case "c++":
                        List<String> cListData = new ArrayList<String>();
                        cListData.add("Unix C");
                        cListData.add("MFC");
                        cListData.add("Object C");

                        setContentListView(cListData, android.R.layout.simple_list_item_multiple_choice);
                        break;


                    // If select .Net tab.
                    case ".net":
                        List<String> dotNetListData = new ArrayList<String>();
                        dotNetListData.add("ODBC");
                        dotNetListData.add("Visual Studio");
                        dotNetListData.add("Sql Server");

                        setContentListView(dotNetListData, android.R.layout.simple_list_item_multiple_choice);
                        break;
                }
            }

            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
                String tabText = (String)tab.getText();
                Toast.makeText(ActionBarTabActivity.this, "You unselect tab " + tabText, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
                String tabText = (String)tab.getText();
                Toast.makeText(ActionBarTabActivity.this, "You reselect tab " + tabText, Toast.LENGTH_SHORT).show();
            }

            // This is a common method which will be used to display list data for different tab content view.
            private void setContentListView(List<String> listData, int itemLayout)
            {
                // Use the tab data list view layout. There is only one ListView widget in it.
                setContentView(R.layout.activity_action_bar_tab_data_list_view);

                // Get the ListView widget.
                ListView listViewJava = (ListView)findViewById(R.id.listViewData);
                // Create and set array data adapter to the ListView object.
                ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(ActionBarTabActivity.this, android.R.layout.simple_list_item_multiple_choice, listData);
                listViewJava.setAdapter(arrayAdapter);

                // Listen to ListView item click event.
                listViewJava.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> adapterView, View view, int index, long l) {
                        Object clickItemObj = adapterView.getAdapter().getItem(index);
                        Toast.makeText(ActionBarTabActivity.this, "You clicked " + clickItemObj.toString(), Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };

        // Create and add tab1.
        ActionBar.Tab tab1 = actionBar.newTab();
        tab1.setText("C++");
        tab1.setTabListener(tabListener);
        actionBar.addTab(tab1, 0);

        // Create and add tab2.
        ActionBar.Tab tab2 = actionBar.newTab();
        tab2.setText("Java");
        tab2.setTabListener(tabListener);
        actionBar.addTab(tab2, 1);

        // Create and add tab3.
        ActionBar.Tab tab3 = actionBar.newTab();
        tab3.setText(".Net");
        tab3.setTabListener(tabListener);
        actionBar.addTab(tab3, 2);
    }
}

2. Tab Content View Layout Xml File.

When user click a Tab, it will load below content view layout xml file to shown. There is only one ListView widget in it.

activity_action_bar_tab_data_list_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/listViewData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/holo_blue_light"
        android:dividerHeight="5dp"
        android:clickable="true"
        android:choiceMode="multipleChoice" />

</LinearLayout>

3. Activity Layout Xml File.

activity_action_bar_tab.xml

This activity layout xml file do not contain any widget. Only a default root Layout element.