Android navigation tab on action bar

In this Android tip, I am going to show you how to display Navigation Tabs on the action bar so that the user can switch from one module to another module in your application easily. The tabs provided by ActionBar is displayed on the action bar when there is enough room, otherwise it is a separated action bar. Each module of your application can be represented by a fragment. When the user switches from a tab to another tab, the fragment for each tab is also switched.

To display tabs on the action bar, first you need a ViewGroup in your activity's layout file. Now in the activity_main.xml file add a FrameLayout as shown below. FrameLayout is a GroupView that you can place Fragments.

<RelativeLayout 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"
   tools:context="com.example.androidexample.MainActivity" >

   <FrameLayout
android:id="@+id/fragment_container1"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</RelativeLayout>




In this example, on the action bar we are going to show two tabs: Home and Users. You need to create Fragments. One Fragment (HomeTabFragment) is for the Home tab another Fragment (UserTabFragment) is for the Users tab. Each tab has its own layout file.

HomeTabFragment.java

 package com.example.androidexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeTabFragment extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
   View view=inflater.inflate(R.layout.fhomelayout, container, false);
   return view;
}
}


fhomelayout.xml file

<?xml version="1.0" encoding="utf-8"?>

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


fuserslayout.xml

<?xml version="1.0" encoding="utf-8"?>

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

</LinearLayout>



UserTabFragment.java

package com.example.androidexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class UserTabFragment extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
   View view=inflater.inflate(R.layout.fuserslayout, container, false);
   return view;
}
}

In the onCreate() method of the MainActivity class, you have to obtain the ActonBar object by calling the the getSupportActionBar() method. You create your tabs by using the Tab class. When creating a tab object, you can specify title of the tab using the setText() method. To handle tab selection event, you need to call setTabListener() method. You pass an object of a class that implements the ActionBar.TabListener interface setTabListener() method. To add a tab to the action bar, you call the addTab() method of the ActionBar.

MainActivity.java

package com.example.androidexample;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

   Fragment fragment;
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     // Setup action bar for tabs
     ActionBar actionBar = getSupportActionBar();
     // Enable navigation tab mode to the action bar
     actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
     // Hide title of the action bar
     actionBar.setDisplayShowTitleEnabled(false);

     Tab tab = actionBar.newTab()
                .setText("Home")
                .setTabListener(new TabListener());
     actionBar.addTab(tab);

     tab = actionBar.newTab()
               .setText("Users")
               .setTabListener(new TabListener());
     actionBar.addTab(tab);
   }

   private class TabListener implements ActionBar.TabListener{
   public void onTabSelected(Tab tab, FragmentTransaction ft) {
   // Handle tab switching
        if(tab.getText().toString().endsWith("Home")){
         //Home tab selected
         fragment=new HomeTabFragment();
           }
        else{
         //Users tab selected
         fragment=new UserTabFragment();
        }
        // Add fragment to the FragmentTransaction
       ft.add(R.id.fragment_container1,fragment);
     }

     public void onTabUnselected(Tab tab, FragmentTransaction ft) {
     // Remove the previous fragment when switching to new tab
       if(fragment!=null)
       ft.remove(fragment);
     }

     public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // User selected the already selected tab. Usually do nothing.
     }
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
     // Inflate the menu; this adds items to the action bar if it is present.
     getMenuInflater().inflate(R.menu.main, menu);
     return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
     // Handle action bar item clicks here. The action bar will
     // automatically handle clicks on the Home/Up button, so long
     // as you specify a parent activity in AndroidManifest.xml.
     int id = item.getItemId();
     if (id == R.id.action_settings) {
        return true;
     }
     return super.onOptionsItemSelected(item);
   }
}

Android-navigation-tab-on-action-bar

Posted by: Dara | post date: 10-04-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.