Sunlight 1.01.01 – Toolbar vs. ActionBar

The Toolbar is one of the new things that came with Android L. In short terms: It’s a flexible alternative or rather a more versatile expansion of what was known as ActionBar.

[*Caution: Outdated content. My sunlight project has been discontinued. It refers to earlier versions of the v7 appcompat Library (21.0.3) and Android Studio (1.1).  I’ll keep the posts online for reference but with the current version of appcompat Library things may be different / easier today, so please refer to more up-to-date sources.]

This article is part of the Sunlight project and refers to the first half of Lesson 1 of Googles Udacity Course “Developing Android Apps”.

The artifact formerly known as ActionBar

In the Design Documentation Google states

“The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.”.

Two things:

  1. “ActionBar”? So 80s. “App Bar” is the new star on the horizon.
  2. Consider at App Bar as one possible inkarnation of a Toolbar

Is ActionBar deprecated?

So far I wasn’t able to figure out a valid statement regarding this question. If you have one, please let me know in the comments.

Google encourages the use of the Toolbar in Lollipop and though a simple replacement of the original ActionBar behaviour in an existing app does not justify the effort, we will do it in the Sunlight project. As a replacement in first place, but maybe we will make use of some extended features in later chapters.

What’s it all about?

Many blog posts have been written and videos recorded about the Toolbar. I will not repeat all the basics in this post, instead refer to these sources:

You like to read? Read this post by Chris Banes and/or that post by David Mann.

If you prefer watching videos, watch this witty introduction by slidenerd (just 11 minutes).

Oh, and of course the Google Developer docs and the Design Guide.

Now in Sunlight

Setting theme to drop the old ActionBar

In styles.xml we change

into

You might want to check the result in the emulator – it’s simply gone…

Create a toolbar layout

Now we create a file res/layout/main_toolbar.xml containing this definition

Include toolbar in the main layout

In activity_main.xml we replace the FrameLayout by LinearLayout (otherwise the content would overlap the toolbar), add vertical orientation and insert <include layout="@layout/main_toolbar" />.

Let toolbar behave as an ActionBar

To make the title and the menu come up, we have to tell the toolbar to behave as an ActionBar – oh, sorry: App Bar!

We’ll do so in the onCreate method of the MainActivity:

And this is what it looks like on KitKat and Lollipop:

Compare to what we got with the ActionBar and AppCompat:

Hmm – two things are different: Colors and the shadow, missing in pre Lollipop and too small in the 5.x device.

Setting colors and theme

While using the ActionBar, the Sunshine App was equipped with the “Light with dark action bar” – Theme. At this moment the toolbar uses the Light-Theme. To change this:

In main_toolbar.xml we add the themes and a little more elevation (shadow) with these four additional lines:

And some color in styles.xml (using build in color definitions – we´ll change them to custom colors later):

and here we are

Wait. Something is missing!

Yes, the shadow, Peter Pan. In pre Lollipop Android. There are some workarounds, but Peter and I hope that an updated version of AppCompat will bring it back. So let’s decide to wait…

Find the source code in my GitHub Repo.

We’ll continue with the second part of Lesson 1 “Create Project Sunshine” of the Udacity Course in the next post.

Leave a Reply

Your email address will not be published. Required fields are marked *