On my previous post, we learn some basic characteristics  for Action bar : Leveraging action bar in Android. This post is the extension of the same. Here we implement Tab navigation for action bar items in android

One of the primary navigation mode of the action bar is tab navigation. In this mode, a secondary bar for tabs is displayed below the action bar when the device is in portrait orientation. In landscape orientation, the tabs move up into the main action bar. In both cases, however, if there are more tabs than the screen can display at once, the tab section of the bar can be horizontally scrolled to reveal the remaining tabs. In addition, as tabs are selected, they scroll themselves into a more centered location of the view, allowing the user to discover the remaining tabs.

Note: The implementation here is implemented using AppCompat  Support Library v7 , but it can be easily modified to work with native API’s . The only changes are that each activity must extend Activity instead of ActionBarActivity, and each call to getSupportActionBar() should be replace to getActionBar(). 

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “ActionBarApplicationTest”. 

Implementation objective:

To show the tab navigation mode for Action bar items when the view is in Portrait orientation but will move in action bar when the device is in Landscape orientation 

Code Implementation: 

First of all update your activity_main. xml as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity"> 
    <TextView 
        android:text="@string/hello_world" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/txt" 
        android:textSize="28dp" /> 
</LinearLayout>

Now navigate to MainActivity.java and add this code:

package com.example.msclient010.actionbarapplicationtest;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity implements android.support.v7.app.ActionBar.TabListener { 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //getting action bar instance;
        android.support.v7.app.ActionBar actionbar = getSupportActionBar();
        //Enables taps on the home logo 
        actionbar.setHomeButtonEnabled(true);
        //Display home with the "up" arrow indicator
        actionbar.setDisplayHomeAsUpEnabled(true);
        //create tabs
        android.support.v7.app.ActionBar.Tab newTab0 = actionbar.newTab();
        newTab0.setText("Tab 0 title");
        android.support.v7.app.ActionBar.Tab newTab1 = actionbar.newTab();
        newTab1.setText("Tab 1 title");
        android.support.v7.app.ActionBar.Tab newTab2 = actionbar.newTab();
        newTab2.setText("Tab 2 title"); 
        //set tab listener to new tabs
        newTab0.setTabListener((android.support.v7.app.ActionBar.TabListener) this);
        newTab1.setTabListener((android.support.v7.app.ActionBar.TabListener) this);
        newTab2.setTabListener((android.support.v7.app.ActionBar.TabListener) this); 
        //add tabs to action bar
        actionbar.addTab(newTab0);
        actionbar.addTab(newTab1);
        actionbar.addTab(newTab2);
        //apply navigation tab mode to action bar
        actionbar.setNavigationMode(android.support.v7.app.ActionBar.NAVIGATION_MODE_TABS);     } 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true; 
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) { 
        if (item.getItemId() == android.R.id.home) {
            int current = getSupportActionBar().getSelectedTab().getPosition();
            //select the next tab, or first if we at the end currently
            if (++current >= getSupportActionBar().getTabCount()) {
                current = 0; 
            }
            getSupportActionBar().selectTab(getSupportActionBar().getTabAt(current));             return true;
        }
        return super.onOptionsItemSelected(item);
    }
   /* Tab Listener Callback methods */
    @Override
    public void onTabSelected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) { 
        //getting text view reference
        TextView txt = (TextView)findViewById(R.id.txt);
        //setting tabs title to the text view
        txt.setText(tab.getText()); 
    } 
    @Override
    public void onTabUnselected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) { 
    }
    @Override
    public void onTabReselected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) { 
    }
}

Code Explanation:

·         Our application can react to user tab selections by implementing an ActionBar.TabListenerand passing that instance to each created tab. This interface provides the following methods

§  onTabReselected: Called when a tab is selected again

§  onTabSelected: Called when a tab is selected the first time

§  onTabUnselected: Called when a tab is no longer selected 

·         First of all we need to create tab instances, there is a factory method on ActionBar called newTab() and set the text using setText() method.

·         Now we need to register for callback event i.e. set listeners for each tab using setTabListener()

·         Next, we use addTab() methods to add three tab in our action bar

·        Finally we set tab navigation mode to action bar using setNavigationMode()method and passing NAVIGATION_MODE_TABS

·        It is also possible to programmatically select a tab.Here, we override onOptionsItemSelected() to react to the user tapping the Home/Up button in the action bar. Each time the button is pressed, we find the next tab in line based on the position of the currently selected tab (accessed via the getSelectedTab() method) and select it by using selectTab().

·         Implement the onTabSelected()  to show the tabs title in the main content when the title is selected

Running the Application:

Hit on Run button, the Emulators screen will be default showed in Portrait orientation consists of three tabs:

Click on to the next tab and UI text will be changed. We can also navigate through tabs using up button from the action bar :

Now change the orientation of the emulator to Landscape mode, the tabs goes up to action bar:

   Next, we are going to learn how to implement list navigation in action bar : Leveraging Action bar in android : List Navigation

Thanks for reading this post.

Happy Coding!! J