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.

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView android:id="@+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Step 2

Create another XML file and write this:

<?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:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Placeholder Text"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

Step 3

Create a Java class file and write this:

package com.myactionbarnavigation;
import android.annotation.TargetApi;
import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private String[] Titles;
private DrawerLayout Drawer;
private ListView List;
private ActionBarDrawerToggle Toggle;
private CharSequence titles;
@TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar Bar = getActionBar();
// actionBar.setDisplayShowTitleEnabled(false);
// Bar.setDisplayShowHomeEnabled(false);
// actionBar.setDisplayShowCustomEnabled(true);
titles = getActionBar().getTitle();
Titles = getResources().getStringArray(R.array.operating_systems);
System.out.println(Titles.length);
Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
List = (ListView) findViewById(R.id.left_drawer);
// Set the adapter for the list view
List.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,android.R.id.text1, Titles));
// Set the list's click listener|
List.setOnItemClickListener(new DrawerItemClickListener());
Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
Toggle = new ActionBarDrawerToggle(this, /* host Activity */
Drawer, /* DrawerLayout object */
R.drawable.image, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View v) {
getActionBar().setTitle(titles);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerview) {
getActionBar().setTitle("Open Drawer");
}
};
// Set the drawer toggle as the DrawerListener
Drawer.setDrawerListener(Toggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View v, int i, long id) {
selectItem(i);
}
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
Toggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration Config) {
super.onConfigurationChanged(Config);
Toggle.onConfigurationChanged(Config);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem Item) {
// the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (Toggle.onOptionsItemSelected(Item)) {
return true;
}
// Handle your other action bar items...
switch (Item.getItemId()) {
case R.id.action_settings:
Toast.makeText(this, "Settings selected", Toast.LENGTH_LONG).show();
break;
default:
break;
}
return super.onOptionsItemSelected(Item);
}
/** Swaps fragments in the main content view */
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void selectItem(int i) {
// Create a new fragment and specify the planet to show based on position
Fragment fragment = new Second();
Bundle args = new Bundle();
args.putInt(Second.ARG, i);
fragment.setArguments(args);
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.framelayout, fragment).commit() ;
// Highlight the selected item, update the title, and close the drawer
List.setItemChecked(i, true);
getActionBar().setTitle((Titles[i]));
Drawer.closeDrawer(List);
}
}

Step 4

Create a Java class file and write this:

package com.myactionbarnavigation;
import android.annotation.TargetApi;
import android.app.Fragment;
import android.os.Build;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class Second extends Fragment {
public static final String ARG= "O";
private String string;
@Override
public View onCreateView(LayoutInflater i, ViewGroup c,
Bundle savedInstanceState) {
View view = i.inflate(R.layout.second, null);
TextView textView = (TextView) view.findViewById(R.id.textView1);
textView.setText(string);
return view;
}
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
@Override
public void setArguments(Bundle a) {
string = a.getString(ARG);
}
}

Step 5

Write this inside the String.Xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name"></string>
<string name="action_settings">Settings</string>
<string name="action_update">Update</string>
<string name="drawer_open">Open Drawer</string>
<string name="drawer_close">Close Drawer</string>
<string name="hello_world">Hello world!</string>
<string-array name="operating_systems">
<item >Android</item>
<item >iPhone</item>
<item >Windows Mobile</item>
</string-array>
</resources>

Step 6

Step 7

When you click on the home icon: