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:
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:
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:
Change it to the following:
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:
(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:
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:
Your Component Tree will then look like this:
And your layout will look like this:
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:
Notice that your toolbar has shrunk a bit, though. Drag the right middle circle to the right of the screen to add a constraint:
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:
To add the top constraint, click the Infer Constraints icon in the Design view toolbar:
Your properties area will then look like this, at the top:
You should now have a toolbar that stretches all the way across the screen, and to the top:
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:
<string name="app_name">Custom Toolbar</string>
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:
From the Resources dialogue box, select your app_name string:
When you click OK, the title will appear on your 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:
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.