Hierarchical screen navigation by enabling up navigation in Action bar

July 19, 2012
By

The up navigation in action bar facilitates users to traverse from one activity to another activity in a specific hierarchical order. This is especially useful when the activity is opened from another application. In this article we will see how to enable and implement up navigation in action bar.

If you want you to enable up navigation in pre Honeycomb ( API Level <  3.0 ) versions, see the article titled “Hierarchical up navigation in pre Honeycomb versions using Sherlock library“.

This application is developed in Eclipse 3.7.2 and tested in Android virtual device of API level 14.


1. Create a new Android application namely “ActionBarUpNav”

Create new Android Application

Figure 1 : Create new Android Application


2. Select build target for this application

Select Android Build Target

Figure 2 : Select Android Build Target


3. Enter application details

Enter application Details

Figure 3 : Enter application Details


4. res/values/strings.xml


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

    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">ActionBarUpNav</string>

    <string name="second">Second Activity</string>
    <string name="txt_btn">Open Second Activity</string>

</resources>


5. Create a new layout file called “second_layout.xml” in the folder res/layout


<?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/tv_lbl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/second"
    />
</LinearLayout>


6. Create a class namely “SecondActivity” in the folder src/in/wptrafficanalyzer/actionbarupnav

package in.wptrafficanalyzer.actionbarupnav;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;

public class SecondActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        setContentView(R.layout.second_layout);
    }

    /** The event listener for the Up navigation selection */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch(item.getItemId()){
            case android.R.id.home:
                Intent intent = new Intent(this,MainActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
                startActivity(intent);
        }
        return true;
    }
}
  • The highlighted code enables the Up navigation for the activity

7. Update res/layout/main.xml to include a button, which opens the SecondActivity


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/txt_btn" />

</LinearLayout>


8. Update MainActivity class ( src/in/wptrafficanalyzer/actionbarupnav/MainActivitiy.java) to define button click listener which opens the SecondActivity


package in.wptrafficanalyzer.actionbarupnav;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        OnClickListener listener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent("in.wptrafficanalyzer.actionbarupnav.second");
                startActivity(intent);
            }
        };

        Button btn = (Button) findViewById(R.id.btn);
        btn.setOnClickListener(listener);

    }
}


9. Update AndroidManifest.xml to include SecondActivity to this application


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarupnav"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="14" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".SecondActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="in.wptrafficanalyzer.actionbarupnav.second" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

    </application>

</manifest>


10. Execute the application

Action Bar with Up navigation enabled

Figure 4 : Action Bar with Up navigation enabled

  •  On clicking the application icon, the current screen would be navigated to MainActivity screen.

11. Download


12. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: ,

One Response to Hierarchical screen navigation by enabling up navigation in Action bar

  1. swetha on September 24, 2014 at 3:13 pm

    Hi in this example the previous activity will start from onCreate(),may i know how to avoid this

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner