Action Bars and Toolbars

Android Toolbars: 1 2 3 4 5 6

One thing you will have noticed, because it's on just about every Android app you download and use, is the App Bar. The App Bar, which is also called the Action Bar, sits at the top of the screen. It's where you place shortcut icons, back arrows, share button, search bars, and lots more besides.

Whenever you create an Empty Activity in Android Studio, you get an App Bar at the top, with no extra effort on your part. Here is an App Bar from an earlier project we created:

Android Activity showing an App Bar

This App Bar has some white text on a blue background. It also has an arrow pointing to the left. (Quite strangely, this left-pointing arrow is called the UP arrow.)

However, this is the fairly new App Bar, and may not work properly on older devices. What's common is to remove this App Bar and replace it with something called the Toolbar instead. The Toolbar can look and act just like a modern App Bar but will work on almost all devices. What we'll do in this section, then, is to remove the default App Bar and replace it with our own custom Toolbar.

Create a new Empty Activity project for this section. Call it Custom Toolbar. When your project loads, click on the activity_main.xml tab and take a look at the default Activity in Design view:

Default layout in Android Studio for a layout

You can see the default App Bar at the top, the one with the white text that says, "Custom Toolbar". We need to get rid of this App Bar so that we can create our own. This is easy enough to do.

Open up the AndroidManifest.xml file. (This file is in the app > manifest folder, which can be opened from the explorer window on the left of Android Studio.) Locate the following line, which is in the application tag:

android:theme="@style/AppTheme">

Change it to the following:

android:theme="@style/Theme.AppCompat.Light.NoActionBar">

By specifying NoActionBar at the end you're telling Android not to use the built-in Action Bar.

(NOTE: If you're copying and pasting the above line into Android Studio, you may get red warning text. This is because you're copying the quote marks over from HTML, which may be in the wrong format. Simply delete your quote marks in Android Studio and type them again.)

If you run your app now, you should see that the default App Bar has gone:

Removing the Action Bar in Android Studio

(NOTE: If you can still see the blue App Bar in Design view, close your project down and open it back up again. Your Design view should look like this:

Design view in Android Studio showing a layout with no Action Bar

If you have a look in the Palette, you'll see that there is a section called AppCompat. Click on this section to see a Toolbar item:

Drag one of these onto your layout. It's easier to drag one onto the Component Tree, though, just below the ConstraintLayout item:

Dragging a Toolbar from the Palette to the Component Tree

Your Component Tree will then look like this:

Component Tree showing a Toobar under a ConstraintLayout

And your layout will look like this:

A layout with a Toolbar at the top

If you study the top of the image above, you'll see that there are gaps between the left and right edges of the toolbar. We can set a layout height and width to fix that.

With your toolbar selected, have a look at the properties area on the right. First, change the ID to myToolbar. Now change the layout_width to 0dp and the layout_height to wrap_content. You need to do this because you are using a ConstraintLayout, and a ConstraintLayout will keep resetting the width to something like 368dp.

Your properties area should look like this:

Android Studio properties area for a Toolbar

Notice that your toolbar has shrunk a bit, though. Drag the right middle circle to the right of the screen to add a constraint:

Adding Constraints for a Toolbar

Do the same with the left middle circle of the toolbar, but to the left edge of the screen. In the properties area, set the margins to 0:

Removing margins for a Toolbar

To add the top constraint, click the Infer Constraints icon in the Design view toolbar:

Android Studio Infer Constraints icon

Your properties area will then look like this, at the top:

Constraints added to a Toolbar

You should now have a toolbar that stretches all the way across the screen, and to the top:

Layout for an Toolbar with  constraints added

We can keep the default TextView. We'll use it as a display area. When a toolbar button is clicked, we'll add some text here.

Change the property of the TextView to displayText. For the text, instead of "Hello World", we'll add a string.

Double click your strings.xml file to open it (it's in the res > values folder. You should already see one string set up:

<resources>

<string name="app_name">Custom Toolbar</string>

</resources>

The value for the string called app_name is Custom Toolbar. Change this to something else, anything you like.

Now go back to your activity_main.xml file. Click on your toolbar to select it. In the properties area on the right, scroll down and click on View all properties. From the new list of properties, locate the title property. Click the Pick a Resource button:

Setting a title for a Toolbar

From the Resources dialogue box, select your app_name string:

Resources dialogue box showing a string value

When you click OK, the title will appear on your toolbar:

A new title added to a Toolbar

While we have the strings.xml file open, let's set up some more strings. Set up the following strings, as we can make use of them later:

The strings.xml file showing some  values added

You can now set one of your strings as the text for the TextView. In place of your Hello World default text, then, replace it with your Display Area text from the string resource file. (You should know how to do this by now.)

 

In the next lesson, we'll start adding some icons to the Toolbar.