Learn Navigation ActionBar in Android

Introduction

 
This article explains ActionBar Navigation in Android.
 
A Navigation Drawer is a panel consisting of content that you want to show when the Navigation Drawer is opened. First, it is hidden by default but it can be opened by swiping from left to right or by touching the home icon.
 
In this, we will use a navigation drawer where we use a ListView that you want to show when the drawer is opened. So you need to open the navigation drawer on the home icon click. On opening, the navigation drawer list view will be displayed that contains several items. Set an item's click listener so that when an item of the list view is clicked it will do an exchange of fragments. So you will create an XML file that contains the TextView.
 
Step 1
 
Create an XML file and write the following.
 
This XML file contains a ListView and FrameLayout that will use the fragments at runtime.
  1. <android.support.v4.widget.DrawerLayout  
  2.  xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:id="@+id/drawer_layout"  
  4.      android:layout_width="match_parent"  
  5.      android:layout_height="match_parent">  
  6.      <!-- The main content view -->  
  7.      <FrameLayout  
  8.         android:id="@+id/content_frame"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent" />  
  11.      <!-- The navigation drawer -->  
  12.       <!-- should not be larger than 320 to show content -->  
  13.      <ListView android:id="@+id/left_drawer"  
  14.         android:layout_width="180dp"  
  15.         android:layout_height="match_parent"  
  16.         android:layout_gravity="start"  
  17.         android:choiceMode="singleChoice"  
  18.         android:divider="@android:color/transparent"  
  19.         android:dividerHeight="0dp"  
  20.         android:background="#111"/>  
  21. </android.support.v4.widget.DrawerLayout> 
Step 2
 
Create another XML file and write this:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android  
  3.              android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:orientation="vertical" >  
  6.     <TextView  
  7.             android:id="@+id/textView1"  
  8.             android:layout_width="wrap_content"  
  9.             android:layout_height="match_parent"  
  10.             android:text="Placeholder Text"  
  11.             android:layout_gravity="center"  
  12.             android:textAppearance="?android:attr/textAppearanceLarge" />  
  13.   
  14.  </LinearLayout> 
Step 3
 
Create a Java class file and write this:
  1. package com.myactionbarnavigation;  
  2. import android.annotation.TargetApi;  
  3. import android.app.ActionBar;  
  4. import android.app.Activity;  
  5. import android.app.Fragment;  
  6. import android.app.FragmentManager;  
  7. import android.content.res.Configuration;  
  8. import android.os.Build;  
  9. import android.os.Bundle;  
  10. import android.support.v4.app.ActionBarDrawerToggle;  
  11. import android.support.v4.widget.DrawerLayout;  
  12. import android.view.Menu;  
  13. import android.view.MenuItem;  
  14. import android.view.View;  
  15. import android.widget.AdapterView;  
  16. import android.widget.ArrayAdapter;  
  17. import android.widget.ListView;  
  18. import android.widget.Toast;   
  19.   
  20. public class MainActivity extends Activity {  
  21. private String[] Titles;  
  22.      private DrawerLayout Drawer;  
  23.      private ListView List;  
  24.      private ActionBarDrawerToggle Toggle;  
  25.      private CharSequence titles;   
  26.   
  27.     @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)  
  28.     @Override  
  29. public void onCreate(Bundle savedInstanceState) {  
  30.     super.onCreate(savedInstanceState);  
  31.     setContentView(R.layout.activity_main);  
  32.     ActionBar Bar = getActionBar();  
  33.    //     actionBar.setDisplayShowTitleEnabled(false);  
  34.   //      Bar.setDisplayShowHomeEnabled(false);  
  35.  //       actionBar.setDisplayShowCustomEnabled(true);   
  36.   
  37.      titles = getActionBar().getTitle();  
  38.   Titles = getResources().getStringArray(R.array.operating_systems);  
  39. System.out.println(Titles.length);  
  40.      Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);  
  41.      List = (ListView) findViewById(R.id.left_drawer);  
  42.      // Set the adapter for the list view  
  43.      List.setAdapter(new ArrayAdapter<String>(this,  
  44.      android.R.layout.simple_list_item_1,android.R.id.text1, Titles));  
  45.  // Set the list's click listener|  
  46.   
  47.      List.setOnItemClickListener(new DrawerItemClickListener());  
  48.      Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);  
  49.      Toggle = new ActionBarDrawerToggle(this,                  /* host Activity */  
  50.      Drawer,         /* DrawerLayout object */  
  51.      R.drawable.image,  /* nav drawer icon to replace 'Up' caret */  
  52.      R.string.drawer_open,  /* "open drawer" description */  
  53.      R.string.drawer_close  /* "close drawer" description */) {  
  54.      /** Called when a drawer has settled in a completely closed state. */  
  55.       public void onDrawerClosed(View v) {  
  56.      getActionBar().setTitle(titles);  
  57.             }  
  58.      /** Called when a drawer has settled in a completely open state. */  
  59.      public void onDrawerOpened(View drawerview) {  
  60.       getActionBar().setTitle("Open Drawer");  
  61.             }  
  62.         };  
  63.      // Set the drawer toggle as the DrawerListener  
  64.   Drawer.setDrawerListener(Toggle);  
  65.      getActionBar().setDisplayHomeAsUpEnabled(true);  
  66.      getActionBar().setHomeButtonEnabled(true);  
  67.     }  
  68.      private class DrawerItemClickListener implements ListView.OnItemClickListener {  
  69.       @Override  
  70.       public void onItemClick(AdapterView parent, View v, int i, long id) {  
  71.        selectItem(i);  
  72.        }  
  73.     }  
  74.     @Override  
  75.      protected void onPostCreate(Bundle savedInstanceState) {  
  76.     super.onPostCreate(savedInstanceState);  
  77.      // Sync the toggle state after onRestoreInstanceState has occurred.  
  78.      Toggle.syncState();  
  79.     }  
  80.     @Override  
  81.      public void onConfigurationChanged(Configuration Config) {  
  82.          super.onConfigurationChanged(Config);  
  83.          Toggle.onConfigurationChanged(Config);  
  84.   }  
  85. @Override  
  86.  public boolean onCreateOptionsMenu(Menu menu) {  
  87.          getMenuInflater().inflate(R.menu.main, menu);  
  88.         return super.onCreateOptionsMenu(menu);  
  89.     }  
  90.     @Override  
  91.      public boolean onOptionsItemSelected(MenuItem Item) {  
  92.         // the event to ActionBarDrawerToggle, if it returns  
  93.         // true, then it has handled the app icon touch event  
  94.         if (Toggle.onOptionsItemSelected(Item)) {  
  95.             return true;  
  96.         }  
  97. // Handle your other action bar items...  
  98.         switch (Item.getItemId()) {  
  99.             case R.id.action_settings:  
  100.                  Toast.makeText(this"Settings selected", Toast.LENGTH_LONG).show();  
  101.                 break;  
  102.             default:  
  103.                 break;  
  104.         }  
  105.         return super.onOptionsItemSelected(Item);  
  106.     }  
  107.     /** Swaps fragments in the main content view */  
  108.     @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
  109.      private void selectItem(int i) {  
  110. // Create a new fragment and specify the planet to show based on position  
  111.         Fragment fragment = new Second();  
  112.         Bundle args = new Bundle();  
  113.          args.putInt(Second.ARG, i);  
  114.          fragment.setArguments(args);        
  115.   // Insert the fragment by replacing any existing fragment  
  116.         FragmentManager fragmentManager = getFragmentManager();  
  117.          fragmentManager.beginTransaction().replace(R.id.framelayout, fragment).commit() ;  
  118.   
  119.         // Highlight the selected item, update the title, and close the drawer  
  120.         List.setItemChecked(i, true);  
  121.          getActionBar().setTitle((Titles[i]));  
  122.          Drawer.closeDrawer(List);  
  123.   
  124.     }  
  125.   
Step 4
 
Create a Java class file and write this:
  1. package com.myactionbarnavigation;  
  2. import android.annotation.TargetApi;  
  3. import android.app.Fragment;  
  4. import android.os.Build;  
  5. import android.os.Bundle;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.TextView;  
  10.   
  11.  @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
  12.   
  13. public class Second extends Fragment {  
  14.     public static final String ARG= "O";  
  15.      private String string;  
  16.     @Override  
  17.      public View onCreateView(LayoutInflater i, ViewGroup c,  
  18.                               Bundle savedInstanceState) {  
  19.         View view = i.inflate(R.layout.second, null);  
  20.         TextView textView = (TextView) view.findViewById(R.id.textView1);  
  21.          textView.setText(string);  
  22.         return view;  
  23.     }  
  24.     @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
  25.     @Override  
  26.      public void onActivityCreated(Bundle savedInstanceState) {  
  27.          super.onActivityCreated(savedInstanceState);  
  28.     }  
  29.   
  30.     @Override  
  31.      public void setArguments(Bundle a) {  
  32.         string = a.getString(ARG);  
  33.     }  
Step 5
 
Write this inside the String.Xml file:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3. <string name="app_name"></string>  
  4.      <string name="action_settings">Settings</string>  
  5.      <string name="action_update">Update</string>  
  6.      <string name="drawer_open">Open Drawer</string>  
  7.      <string name="drawer_close">Close Drawer</string>  
  8.      <string name="hello_world">Hello world!</string>  
  9.      <string-array name="operating_systems">  
  10.         <item >Android</item>  
  11.         <item >iPhone</item>  
  12.         <item >Windows Mobile</item>  
  13.      </string-array>  
  14. </resources> 
Step 6 
 
Clipboard02.jpg
 
Step 7
 
 
When you click on the home icon:
 
Clipboard04.jpg