ZOFTINO.COM android and web dev tutorials

Android App UP Navigation Implementation

It would be helpful for users to be able to navigate from current screen in your app and go up in the hierarchy of screens till main screen. To provide this functionality, you need to enable up button on action bar and define parent activities for each activity. The goal of providing up button is to enable user to move to previous activities in the current flow.

Android up navigation

There is a back button functionality provided by android system. Back button takes user to previously visited screens. Whereas up button should take user to parent screens till main screen in the current flow. So up navigation may not necessarily take user back to all previously visited screens in reverse chronological order.

UP navigation implementation

Android system provides frame work for up navigation. The system frame work which provides up navigation uses action bar, NavUtils and back stack. In order to have UP button in your app, all you need to do is to enable up button and define parent activities for each activity in your app.

You can configure parent activity for all activities of your app in AndroidManifest.xml file within activity element by setting android:parentActivityName attribute. Up button can be enabled using action bar in your activity onCreate call back method like below.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

When up button on action bar is clicked, activity’s onOptionsItemSelected() gets called passing MenuItem. Default implementation of onOptionsItemSelected() processes Up events and shows parent screen defined in manifest file.

You can override onOptionsItemSelected() and handle up event (android.R.id.home) to provide custom behavior as shown in one of the activities below.

Below example app shows how to setup up navigation.

MainActivity.java

package com.zoftino.upnavigationapp;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    public void getStores(View view){
        Intent intent = new Intent(this, ViewStoresActivity.class);
        startActivity(intent);
    }
}

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="com.zoftino.upnavigationapp.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save A Lot on Shopping Using Coupons"
        android:id="@+id/mTitle"></TextView>

    <Button
        android:text="View Stores"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/mTitle"
        android:layout_alignRight="@+id/mTitle"
        android:layout_alignEnd="@+id/mTitle"
        android:layout_marginRight="34dp"
        android:layout_marginEnd="34dp"
        android:layout_marginTop="88dp"
        android:onClick="getStores"
        android:id="@+id/viewStores"></Button>
</RelativeLayout> 

ViewStoresActivity.java

package com.zoftino.upnavigationapp;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;


public class ViewStoresActivity extends AppCompatActivity {

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

        Toolbar stToolbar =
                (Toolbar) findViewById(R.id.store_toolbar);
        setSupportActionBar(stToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    public void getCoupons(View view){
        Intent intent = new Intent(this, ViewCouponsActivity.class);
        startActivity(intent);

    }
}

view_store.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        layout="@layout/toolbar">
    </include>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="StoreOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/storeOne"
            android:layout_weight="1"></TextView>
        <Button
            android:text="View Coupons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="getCoupons"
            android:id="@+id/so_cpns"
            android:layout_weight="1"></Button>


    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="StoreTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/storeTwo"
            android:layout_weight="1"></TextView>
        <Button
            android:text="View Coupons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="getCoupons"
            android:id="@+id/st_cpns"
            android:layout_weight="1"></Button>
    </LinearLayout>
</LinearLayout> 

ViewCouponsActivity.java

 package com.zoftino.upnavigationapp;

import android.app.TaskStackBuilder;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;


public class ViewCouponsActivity extends AppCompatActivity {

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

        Toolbar stToolbar =
                (Toolbar) findViewById(R.id.store_toolbar);
        setSupportActionBar(stToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                Intent upIntent = NavUtils.getParentActivityIntent(this);
                if (NavUtils.shouldUpRecreateTask(this, upIntent)) {

                    TaskStackBuilder.create(this)
                            .addNextIntentWithParentStack(upIntent)
                            .startActivities();
                } else {
                    NavUtils.navigateUpTo(this, upIntent);
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

view_coupons.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        layout="@layout/toolbar">
    </include>
    <TextView
        android:text="Get upto 30% off"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cpnon"></TextView>

    <TextView
        android:text="Site wide sale upto 80% off"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cpntw"></TextView>

    <TextView
        android:text="Get 40% off on top brands"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cpnth"></TextView>
</LinearLayout> 

AndroidManifest.xml

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zoftino.upnavigationapp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".ViewStoresActivity"
            android:parentActivityName=".MainActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />
        </activity>
        <activity android:name=".ViewCouponsActivity"
            android:parentActivityName=".ViewStoresActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".ViewStoresActivity" />
        </activity>
    </application>

</manifest>