Hierarchical up navigation in pre Honeycomb versions using Sherlock library

August 3, 2012
By

Hierarchical screen navigation is a useful feature added in Android 3.0 ( Honeycomb ) . Suppose our application’s target is Android 3.0 (Honeycomb) and above, then we can easily enable the navigation as described in the article “Hierarchical screen navigation by enabling up navigation in Action bar“.

But for the pre Honeycomb versions, we can use Action bar Sherlock library  ( ABS ) as described in this article.

This demo application is developed in Eclipse ( 3.7.2 ) with ADT plugin ( 20.0.2 ) and Android SDK ( R20.0.1 ) .


1. Setup Action bar Sherlock library in the Eclipse IDE

Please see the article titled “Setting up Sherlock library for action bar in pre Honeycomb Android Applications


2. Create new Android application project namely “ActionBarSherlockUpNav”

Create new Android Project

Figure 1 : Create new Android Project


3. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


4. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


5. Enter Main Activity Details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details


6. Delete default backward support library file from the project

Delete default backward support library

Figure 5 : Delete default backward support library


7. Add Action Bar Sherlock library to this project

  • Open Project Explorer
  • Right click the project
  • Open Properties
  • Select “Android” tab from the Properties Window
  • Then the given below screen will be appeared
  • Using Add button, add the Sherlock library to this project
Add Action Bar Sherlock library to this project

Figure 6 : Add Action Bar Sherlock library to this project


8. Update the file res/values/strings.xml


<resources>

    <string name="app_name">ActionBarSherlockUpNav</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>

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

</resources>


9. Update the layout file res/layout/activity_main.xml


<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" >

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

</RelativeLayout>


10. Create a layout file res/layout/second_layout.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:id="@+id/tv_lbl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/second"

    />

</LinearLayout>


11. Create an Activity class file for the  “SecondActivity”.  src/in/wptrafficanalyzer/actionbarsherlockupnav/SecondActivity.java


package in.wptrafficanalyzer.actionbarsherlockupnav;

import android.content.Intent;
import android.os.Bundle;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.MenuItem;

public class SecondActivity extends SherlockActivity{

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

        /** Enabling Up navigation for this activity */
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        /** Setting up layout for this activity */
        setContentView(R.layout.second_layout);
    }

    /** This callback method will be invoked when the user selects up navigation icon from the action bar */
    @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 super.onOptionsItemSelected(item);
    }
}


12.  Update the MainActivity class . src/in/wptrafficanalyzer/actionbarsherlockupnav/MainActivity.java


package in.wptrafficanalyzer.actionbarsherlockupnav;

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

import com.actionbarsherlock.app.SherlockActivity;

public class MainActivity extends SherlockActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        OnClickListener listener = new OnClickListener() {

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

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

    }

    @Override
    public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {
        getSupportMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}


13. Update the file AndroidManifest.xml to include the activity “SecondActivity” and change the theme to Theme.Sherlock


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarsherlockupnav"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="15" />

        <application
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/Theme.Sherlock.ForceOverflow" >

            <activity
                android:name=".MainActivity"
                android:label="@string/title_activity_main" >
                <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.actionbarsherlockupnav.second" />
                    <category android:name="android.intent.category.DEFAULT" />
                </intent-filter>
            </activity>
    </application>

</manifest>


14. Application Screenshot

MainActivity Screen

Figure 7 : MainActivity Screen

Second Activity Screen with Up Navigation

Figure 8 : Second Activity Screen with Up Navigation


15. Download


16. 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 up navigation in pre Honeycomb versions using Sherlock library

  1. Wyllyam on June 5, 2013 at 11:05 pm

    very good tutorial friend, but when I’m on the second screen and press the button (icon) to return to the home screen it does not match my command. even clicking it continues on the same screen ie screen 2 what might be happening?

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