AppCompat v7 (21.+) Toolbar for Pre-Lollipop

Short note for self reference on how to use the AppCompat v21 Toolbar for Pre-Lollipop android application with the following starting point:

• create a new Android Project from the Android Studio (1.0 RC 4)
• choose Blank Activity

Let’s start

1. Disable the default ActionBarEdit app/src/main/res/values/styles.xml by adding the following lines (highlighted)

   <resources>
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light">
           <!-- to remove the default action -->
           <item name="android:windowNoTitle">true</item>
           <item name="windowActionBar">false</item> <!-- For 2.x version -->
   
       </style>
   </resources>
   

2. Add app/src/main/res/layout/appbar.xml file

   <?xml version="1.0" encoding="utf-8"?>
   <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary">
   </android.support.v7.widget.Toolbar>
   

3. Remember to remove the hightlighted lines in the app/src/main/res/layout/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">
   

   or else your will see the padding like this
   

4. Now includes the appbar.xml into layout file app/src/main/res/layout/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"
       tools:context=".MainActivity">
   
       <include
           android:id="@+id/app_bar"
           layout="@layout/appbar"/>
   
       <TextView
           android:layout_below="@id/app_bar"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/hello_world" />
   
   </RelativeLayout>
   

5. Set the newly added toolbar to act as your ActionBar by adding the highlighted lines into MainActivity class

   public class MainActivity extends ActionBarActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           Toolbar toolbar = (Toolbar) findViewById(R.id.app_bar);
           setSupportActionBar(toolbar);
   
       }
   

The final result…

I just noticed the font in the toolbar title in landscape mode look smaller than the potrait mode. In fact, I did a check by running Google Play and this seems to be the default styling for google.

References

• http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

Updated on 20th Feb 2015:
– fixed the missing highlight in Step 4 according to comment by Polmabri