Android Navigation Tutorial

Advertisements


In this chapter , we will see that how you can provide navigation forward and backward between an application. We will first look at how to provide up navigation in an application.

Providing Up Navigation

The up navigation will allow our application to move to previous activity from the next activity. It can be done like this.

To implement Up navigation, the first step is to declare which activity is the appropriate parent for each activity. You can do it by specifying parentActivityName attibute in an activity. Its sytnax is given below:

android:parentActivityName="com.example.test.MainActivity" 

After that you need to call setDisplayHomeAsUpEnabled method of getActionBar() in the onCreate method of the activity. This will enable the back button in the top action bar.

getActionBar().setDisplayHomeAsUpEnabled(true);

The last thing you need to do is to override onOptionsItemSelected method. when the user presses it, your activity receives a call to onOptionsItemSelected(). The ID for the action is android.R.id.home.Its syntax is given below:

public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
NavUtils.navigateUpFromSameTask(this);
return true;
}	
}

Handling device back button

Since you have enabled your back button to navigate within your application, you might want to put the application close function in the device back button.

It can be done by overriding onBackPressed and then calling moveTaskToBack and finish method. Its syntax is given below:

@Override
public void onBackPressed() {
   moveTaskToBack(true); 
   MainActivity2.this.finish();
}

Apart from this setDisplayHomeAsUpEnabled method, there are other methods availaible in ActionBar API class. They are listed below:

Sr.NoMethod & description
1addTab(ActionBar.Tab tab, boolean setSelected)
This method adds a tab for use in tabbed navigation mode
2getSelectedTab()
This method returns the currently selected tab if in tabbed navigation mode and there is at least one tab present
3hide()
This method hide the ActionBar if it is currently showing
4removeAllTabs()
This method remove all tabs from the action bar and deselect the current tab
5selectTab(ActionBar.Tab tab)
This method select the specified tab

Example

The below example demonstrates the use of Navigation. It crates a basic application that allows you to navigate withing your application.

To experiment with this example , you need to run this on an actual device or in an emulator .

StepsDescription
1You will use Eclipse IDE to create an Android application and name it as test under a package com.example.test. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add Activity code.
3Create a new activity with the name of MainActivity2 and edit it to add activity code.
4Modify layout XML file res/layout/activity_main.xml add any GUI component if required.
5Modify layout XML file res/layout/activity_main_activity2.xml add any GUI component if required.
6Modify res/values/string.xml file and add necessary string components.
7Modify AndroidManifest.xml to add necessary code.
8Run the application and choose a running android device and install the application on it and verify the results.

Here is the content of src/com.example.test/MainActivity.java.

package com.example.test;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

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


   public void activity2(View view){
      Intent intent = new Intent(this,com.example.test.MainActivity2.class);
      startActivity(intent);
   }
   @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;
   }

}

Here is the content of src/com.example.test/MainActivity2.java.

package com.example.test;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity2 extends Activity {

   @SuppressLint("NewApi")
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main_activity2);
      getActionBar().setDisplayHomeAsUpEnabled(true);
   }
   @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_activity2, menu);
      return true;
   }  
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
         // Respond to the action bar's Up/Home button
         case android.R.id.home:
         NavUtils.navigateUpFromSameTask(this);
         return true;
      }
      return super.onOptionsItemSelected(item);
   }
   @Override
   public void onBackPressed() {
      moveTaskToBack(true); 
      MainActivity2.this.finish();
   }

}

Here is the content of 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"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >

   <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="87dp"
      android:text="@string/test1"
      android:textAppearance="?android:attr/textAppearanceLarge" />

   <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:onClick="activity2"
      android:text="@string/go2" />

</RelativeLayout>

Here is the content of activity_main_activity2.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"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity2" >

   <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="125dp"
      android:text="@string/test2"
      android:textAppearance="?android:attr/textAppearanceLarge" />


</RelativeLayout>

Here is the content of Strings.xml.

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

   <string name="app_name">test</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Hello world!</string>
   <string name="test1">This is activity 1</string>
   <string name="test2">This is activity 2</string>
   <string name="go1">Go to activity 1</string>
   <string name="go2">Go to activity 2</string>
   <string name="title_activity_main_activity2">MainActivity2</string>

</resources>

Here is the content of AndroidManifest.xml.

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

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

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name="com.example.test.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="com.example.test.MainActivity2"
         android:label="@string/title_activity_main_activity2"
         android:parentActivityName="com.example.test.MainActivity" >
      </activity>
   </application>
</manifest>

Let's try to run your Navigation application. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window:

Anroid Navigation Tutorial

Now just press the go to activity2 button and the following screen will be shown to you.

Anroid Navigation Tutorial

Now at the top right corner , you will see the back button. Just press the back button and you will be brought to first activity.

Anroid Navigation Tutorial

Now again go to activity2 and this time press the device exit button. You will see your application will be closed. It is shown in the image below:

Anroid Navigation Tutorial

Advertisements
Advertisements