Wednesday, 21 May 2014

Action bar - Back to the home screen

In the action bar, native or ActionBar Sherlock, there are several way to create the up button and set it to come back to the previous screen. Here I have listed them.

Mainly there are two groups: natives and not natives. For each one of them, there could be static back and dynamic back

1. Native Back to home
For new version of Android, it comes with native action bar. It appears from Android 3.0.x HoneyComb (API 11). All the version of Android which is previous to HoneyComb cannot use the native ActionBar.

1.1 Dynamic Back to home
To add dynamically the back to home function, no extra manifest code need to be added. Instead, the java code should be used:

First of all, the home button must be called in the onCreate method

// Display the up button
getActionBar().setDisplayHomeAsUpEnabled(true);

Then, the code must override the method onOptionsItemSelected when the item id is android.R.id.home:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        // Back to the previous activity
       onBackPressed();
       return true;
    } else {
        return super.onOptionsItemSelected(item);
    }
}


Note I have used the notation @SuppressLint("NewApi") to avoid the error of new api because the min API of the example is 8, so the user cannot use this function on devices with API previous to 11, even when you can install this app on it.

1.2 Static Back to home
To create the static back to home the coder just have to add the follow code in the Android manifest file, following by the declaration of the activity.

            android:parentActivityName=""parentActivityName"

For example, if my activity is called "NativeStaticBackActivity" and the home activity is called "HomeActivity", this would be the code in the manifest.

<activity
    android:name="com.jiahaoliuliu.backtohome.NativeStaticBackActivity"
    android:label="@string/app_name"
    android:parentActivityName="com.jiahaoliuliu.backtohome.HomeActivity" ></activity>

Check this example for more information:

2. Not native Back to home
The problem about the native back to home is the minimum API required is 11. If you want your app to run on devices of previous versions, you must use an externa action bar.

For this example, I have used the ActionBarSherlock, a wonderful lib created by Jake Wharton, from Square.

2.1 Dynamic Back to home
The case of dynamic back to home is the same as the dynamic back to home for native action bar. First you should ask the action bar to show the up icon by adding the follow code into onCreate method:

// Display the up button
getActionBar().setDisplayHomeAsUpEnabled(true);

And then, override the method onOptionsItemSelected as follow:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        // Back to the previous activity
       onBackPressed();
       return true;
    } else {
        return super.onOptionsItemSelected(item);
    }
}

You can find an example here:

2.2 Static Back to home
In this case, both XML code in Android Manifest file and java code should be added.

2.2.1 Android manifest
The first thing to add is the same as the native action bar: The parent activity name.

android:parentActivityName="com.jiahaoliuliu.backtohome.HomeActivity" 

The second thing is a metadata before close the activity of where the parent is

<meta-data
    android:name="android.support.PARENT_ACTIVITY"
    android:value="com.jiahaoliuliu.backtohome.HomeActivity" />

2.2.2 Java code
First, the code must ask the action bar to show the up button for devices with API lower than 11:

// Display the up button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Second, the method onOptionsItemSelected must be overridden again. Note that this time the code is using the method navigateUpFromSameTask of the class android.support.v4.app.NavUtils. This is what the android developer page states:

To navigate up when the user presses the app icon, you can use the NavUtils class's static method,navigateUpFromSameTask(). When you call this method, it finishes the current activity and starts (or resumes) the appropriate parent activity. If the target parent activity is in the task's back stack, it is brought forward as defined by FLAG_ACTIVITY_CLEAR_TOP.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
        NavUtils.navigateUpFromSameTask(this);
        return true;
    }
    return super.onOptionsItemSelected(item);
}

You can find an example here:
Manifest:

Activity

Conclusion:
The action bar has stablished as a pattern for mobile apps, such as Drawer or Sliding menus. It is very important to provide a clean up navigation to not confuse the user.

The use of static back to home method is good if from one activity it just goes to one specific activity. Other wise, if one activity is called by several different activities, it is better use the dynamic back to home method because it is impossible to do it with static back to home method.

Also the minimum API supported by the native action bar is 11, which means if you want to reach most of the people (at the time of writing there are still nearly 17% of the users who has a device with API lower than 11), an external library must be used. I have used ActionBarSherlock, but the new ActionBar compat could be used too.

You can find the example here:

For more information:

No comments:

Post a Comment