The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Tutorial #7 - Setting Up the Action Bar

Next up is to configure the action bar to our EmPubLite application.

This is a continuation of the work we did in the previous tutorial.

You can find the results of the previous tutorial and the results of this tutorial in the book’s GitHub repository:

Starting in this tutorial, we will now begin editing Java source files. Some useful Android Studio shortcut key combinations are (Windows/Linux syntax shown):

Step #1: Adding Some Icons

We are going to need a couple of icons for our action bar items. Nowadays, the preferred approach for doing this is to start with vector drawables.

Right-click over the res/ directory and choose New > “Vector Asset” from the context menu. This brings up the first page of the vector asset wizard:

Android Studio Vector Asset Wizard, As Initially Launched
Figure 237: Android Studio Vector Asset Wizard, As Initially Launched

Click on the Icon button and sift through the grid of available “material icons”, looking for the icon that is an “i” in a circle:

Android Studio Vector Asset Wizard, Material Icon Selector
Figure 238: Android Studio Vector Asset Wizard, Material Icon Selector

Click “OK”. This will update the name of the asset to ic_info_outline_black_24dp.

Click Next, then Finish, to add that icon as an XML file in res/drawable/.

Unfortunately, Android Studio’s vector asset wizard lacks a standard help icon. We can download the proper icon by visiting the Material Design icons page, choosing the “help outline” icon, and clicking the “SVG” download button, saving that file somewhere on your development machine.

Then, go back into the Vector Asset wizard. This time, click on the “Local file” radio button, and choose the downloaded SVG file by clicking on the “…” button to the right of the Path field:

Android Studio Vector Asset Wizard, For Local SVG File
Figure 239: Android Studio Vector Asset Wizard, For Local SVG File

Click Next, then Finish, to save this new vector drawable to res/drawable/.

Step #2: Defining Some Options

Next, we will add a couple of low-priority action items, for a help screen and an “about” screen.

Right click over the res/ directory in your project, and choose New > “Android resource directory” from the context menu. This will bring up a dialog to let you create a new resource directory:

Android Studio New Resource Directory
Figure 240: Android Studio New Resource Directory

Change the “Resource type” drop-down to be “menu”, then click OK to create the directory.

Then, right-click over your new res/menu/ directory and choose New > “Menu resource file” from the context menu. Fill in options.xml in the “New Menu Resource File” dialog:

Android Studio New Menu Resource Dialog
Figure 241: Android Studio New Menu Resource Dialog

Then click OK to create the file. It will open up into a menu editor:

Android Studio Menu Resource Editor
Figure 242: Android Studio Menu Resource Editor

Unfortunately, the drag-and-drop capabilities of this editor have many bugs. It will be simpler for you to switch to the Text sub-tab of the editor, into which you can paste the following content:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:id="@+id/help"
    android:icon="@drawable/ic_help_outline_black_24px"
    android:title="@string/help">
  </item>
  <item
    android:id="@+id/about"
    android:icon="@drawable/ic_info_outline_black_24dp"
    android:title="@string/about">
  </item>

</menu>

If you prefer, you can view this file’s contents in your Web browser via this GitHub link.

Also, you will need to add string resources for help and about, by adding appropriate <string> elements to your existing res/values/strings.xml file:

<resources>
  <string name="app_name">EmPub Lite</string>
  <string name="hint">Enter notes here</string>
  <string name="help">Help</string>
  <string name="about">About</string>
</resources>

If you prefer, you can view this file’s contents in your Web browser via this GitHub link.

Step #3: Loading and Responding to Our Options

The preview of this section was stepped on by Godzilla.

Step #4: Supporting Older Devices

The preview of this section took that left turn at Albuquerque.

Step #5: Trying It Out

The preview of this section was the victim of a MITM ('Martian in the middle') attack.

In Our Next Episode…

The preview of this section left for Hollywood to appear in a reality TV show.