Lesson Tuesday

The bar with the ‘MyRestaurants’ text at the top of our app is called the App Bar, App Toolbar, or Action Bar. It is a toolbar used for branding, navigation, search, and actions. Now that we have multiple activities to travel between, let's add some additional navigational functionality to this app bar. When we travel from our MainActivity to our RestaurantsActivity, we should also be able to navigate back to the MainActivity using the App Bar.

The Android Manifest

To do this, we will need to make the MainActivity the hierarchical parent of our RestaurantsActivity. This informs our application that RestaurantsActivity is a "child" of MainActivity (essentially, that RestaurantsActivity should be accessed by travelling through MainActivity).

We'll open our project's Android Manifest and add the following meta-data to the RestaurantsActivity entry in the manifest:

app/manifests/AndroidManifest.xml
...
<activity
    android:name=".RestaurantsActivity">
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.epicodus.myrestaurants.MainActivity">
        </meta-data>
</activity>
...

Meta-data is simply data about data. In this case, we've provided additional data about RestaurantActivity by declaring MainActivity as its hierarchical parent. Declaring MainActivity as the parent of RestaurantActivity will allow our App Bar to contain a button that can navigate back to MainActivity from RestaurantActivity!

The Up Button

If we launch our application and visit our RestaurantsActivity we can see a new arrow button on the left side of the app bar:

up-button-hierarchical-parent-myrestaurants

This is called the up button. It is used to navigate within an app based on the hierarchical relationships between screens. Within our manifest we established that MainActivity is the hierarchical parent of RestaurantsActivity. Therefore, this button will navigate from RestaurantsActivity to its hierarchical parent MainActivity when clicked. (But since MainActivity doesn’t have a hierarchical parent, it won't have an up button.)

Additionally know that the up button differs from the device's back button. The back button is used to reverse the chronological order of any screens the user has recently visited. This includes traveling between different apps, or the home screen.

The up button only navigates to the parent of the current screen within the application.

Removing the App Bar and Android Themes

Application-Wide Themes

But, what if we didn’t want an App Bar at all? The App Bar in our MainActivity does not have any functionality. Instead, it simply displays the name of the application. This is alright, but our MainActivity's layout already displays the application name in a nice, custom font.

If we revisit the manifest, we see the following:

AndroidManifest.xml
<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/app_name"
   android:supportsRtl="true"
   android:theme="@style/AppTheme">

Here, the line android:[email protected]/AppTheme points to a pre-existing theme inside the style file in the values folder within in our res directory. If we navigate to this file, we can change this theme's parent theme from DarkActionBar to NoActionBar. These are two of the many built-in themes in Android.

res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

This will remove the App Bar from all of the activities in our app. We can save this change and run our application in the emulator to see the result:

no-app-bar-example

Activity-Specific Themes

It's valuable to know how to apply a theme to the entire app in this fashion. However, in the case of our App Bar, we really only want to remove it from the MainActivity where it's unnecessary. We still want our App Bar and its up button present in our RestaurantsActivity. Let's create a new theme that inherits from the built-in NoActionBar theme, and apply it only to the Main Activity.

Creating a Theme

First, we'll create a new theme within styles.xml and name it ''NoActionBarTheme". We'll also give this new theme a parent value of Theme.AppCompat.Light.NoActionBar:

res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="NoActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>

</resources>

If we wanted to add additional styles to this theme, we could do so within these <style> XML tags. For example, we can see the colors we previously defined in the theme preceding this one. However, we'll stick to simply removing that app bar in this lesson. Feel free to experiment with themes on your own!

Applying a Theme

Now we need to apply this theme to our MainActivity and only our MainActivity. Back in the Android Manifest, add our ‘NoActionBarTheme’ to MainActivity's entry, like so:

AndroidManifest.xml
...
<activity
   android:name=".MainActivity"
   android:theme="@style/NoActionBarTheme">
...

Now, if we run the app again the app bar should only appear on the RestaurantsActivity. Perfect!


Example GitHub Repo for MyRestaurants

Terminology


  • Android manifest: File that presents essential information about an application , such as package name, component details, minimun level of API required to the Android system.

  • App bar: A toolbar used for branding, navigation, search and actions; also known as the App toolbar or Action bar.

  • Hierarchical relationship: A relationship between one screen and another that is navigated in "up" and "down" levels of parent and child. Example: the MainActivity is the hierarchical parent of the RestaurantsActivity.

  • Metadata: Data about other data.

  • Up button: Used to navigate within an app based on the hierarchical relationships between screens. A 'child' view will contain an up button back to its hierarchical parent.

Examples


app/manifests/AndroidManifest.xml
...
<activity
    android:name=".RestaurantsActivity">
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.epicodus.myrestaurants.MainActivity">
        </meta-data>
</activity>
...

This XML establishes MainActivity as the hierarchical parent of RestaurantsActivity in the Android Manifest.

res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Here, the line <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> is applying the built-in NoActionBar theme to the entire application.

res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="NoActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>

</resources>

Here, we create a new theme called "NoActionBarTheme" that inherits from the built-in NoActionBar theme.

AndroidManifest.xml
...
<activity
   android:name=".MainActivity"
   android:theme="@style/NoActionBarTheme">
...

We can apply specific themes defined in res/values/styles.xml to specific activities in the activity's entry of the Android Manifest.

Example GitHub Repo for MyRestaurants