[Android] Adding a toolbar to a settings activity

I want to describe how i added a toolbar to a settings activity.

First approach: Add a new Style

My app used navigation drawer activities, which add a custom toolbar to the activity in the layout.xml. The settings activity doesn’t have a layout file by default. A look in the res/values/styles.xml file showed that the used style has something like “Theme.AppCompat.Light.NoActionBar” as a parent. So for settings, we add a new style in the styles.xml which has a parent with a actionbar.

<style name="AppThemeWithActionBar" 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>

Then replace the used theme or add the new theme in the android manifest for the settings activity: (replace the name and label with your used names)

<activity
    android:theme="@style/AppThemeWithActionBar"
    android:name="SettingsActivity"
    android:label="@string/Settings">
</activity>

This works and is pretty easy. But i maybe want to change the background color of my toolbar / background so there is another way to do so.

Second approach: Add a custom layout.xml

I added my own layout.xml for the settings to customize the colors and stuff:

<RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      tools:context="com.yourname.app">

     <android.support.design.widget.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:id="@+id/appBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

   </android.support.design.widget.AppBarLayout>

<!-- Settings are shown in the following listView, so don't change the id -->

 <ListView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@android:id/list"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/appBar"
 android:layout_alignParentBottom="true" />

</RelativeLayout>

Then just add this layout in the settings activity onCreate() method and you can use the toolbar to do stuff:

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.settings);                                                                  //add your settings layout

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);                         //get the toolbar
        setSupportActionBar(toolbar);                                                                          //important to show the activity name in the toolbar

        ActionBar actionBar = getSupportActionBar();

        if (actionBar != null) {                                                                                          //set a nice back arrow in the action bar (handle the click in onOptionsItemSelected())
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

       //other stuff from your onCreate method....
}

Thanks to the relativeLayout in the settings layout, the toolbar doesn’t overlap the settings list. But on pre Lolipop Android devices, there is no shadow under the toolbar. One way to fix this is to add a custom view with a shadow as a background described here: http://blog.grafixartist.com/add-a-toolbar-elevation-on-pre-lollipop/

So i added the shadow drawable like described there and added this under the listView block from the settings layout:

<!--  Shows a little shadow under the toolbar -->
<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:background="@drawable/shadow"
    android:layout_below="@+id/appBar"
    android:layout_alignParentLeft="true" />

Like described in the linked post, it’s not worth the work to hide this shadow on post Lolipop Android devices, so just use it there too.