The following is the first few sections of a chapter from Exploring Android, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Filtering Our Items

It is entirely possible that a user of this app will have a lot of to-do items. Rather than force the user to have to scroll through all of them in the list, we could offer some options for working with a subset of those items. In this tutorial, we will add a “filter” feature, to allow the user to work with either the outstanding to-do items, the completed items, or all of the items.

This is a continuation of the work we did in the previous tutorial. The book’s GitHub repository contains the results of the previous tutorial as well as the results of completing the work in this tutorial.

Step #1: Adding a Checkable Submenu

We have added quite a few action bar items in these tutorials. This time, we need to add one to allow the user to filter the list of items. To do that, we will use an action bar item that has a submenu of radio buttons, so the user can toggle between the different filter modes.

But, first, we need another icon.

Right-click over res/drawable/ in the project tree and choose “New” > “Vector Asset” from the context menu. This brings up the Vector Asset Wizard. There, click the “Icon” button and search for filter:

Android Studio Vector Asset Selector, Showing filter Options
Figure 186: Android Studio Vector Asset Selector, Showing “filter” Options

Choose the “filter list” icon and click “OK” to close up the icon selector. Then, click “Next” and “Finish” to close up the wizard and set up our icon.

Next, open up the res/menu/actions_roster.xml resource file, and switch to the “Design” sub-tab. Drag an “Item” from the Palette view into the Component Tree, slotting it before the existing “add” item:

Android Studio Graphical Menu Editor, Showing New Item
Figure 187: Android Studio Graphical Menu Editor, Showing New Item

In the Attributes view for this new item, assign it an ID of filter. Then, choose both “ifRoom” and “withText” for the “showAsAction” option. Next, click on the “…” button next to the “icon” field. This will bring up an drawable resource selector. Click on ic_filter_list_black_24dp in the list of drawables, then click OK to accept that choice of icon.

Then, click the “…” button next to the “title” field. As before, this brings up a string resource selector. Click on “Add new resource” > “New string Value” in the drop-down towards the top. In the dialog, fill in menu_filter as the resource name and “Filter” as the resource value. Click OK to close the dialog and complete the configuration of this action bar item:

Android Studio Menu Editor, Showing Configured MenuItem
Figure 188: Android Studio Menu Editor, Showing Configured MenuItem

That gives the user something to click on, but now we need to set up a submenu. Unfortunately, at this point, the drag-and-drop functionality of the menu editor has a bug — we cannot create a submenu this way.

Instead, switch over to the “Text” sub-tab and add a <menu> element as a child of the “filter” <item> element manually:

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

  <item
    android:id="@+id/filter"
    android:icon="@drawable/ic_filter_list_black_24dp"
    android:showAsAction="ifRoom|withText"
    android:title="@string/menu_filter">
    <menu>

    </menu>
  </item>
  <item
    android:id="@+id/add"
    android:icon="@drawable/ic_add_black_24dp"
    android:showAsAction="ifRoom|withText"
    android:title="@string/menu_add" />
</menu>

If you then switch back to the “Design” sub-tab, you should see the “menu” entry below our “filter” item in the Component Tree, though you may have to expand the tree yourself:

Android Studio Menu Editor, Showing New Submenu
Figure 189: Android Studio Menu Editor, Showing New Submenu

Then, from the Palette, drag a “Group” into the new “menu” in the Component Tree:

Android Studio Menu Editor, Showing New Group
Figure 190: Android Studio Menu Editor, Showing New Group

In the Attributes pane, give the group an ID of filter_group and set the “checkableBehavior” to “single”.

Then, from the Palette, drag a “Menu Item” into the new group in the Component Tree:

Android Studio Menu Editor, Showing New MenuItem in the Group
Figure 191: Android Studio Menu Editor, Showing New MenuItem in the Group

Drag two more “Menu Item” entries from the Palette and drop them in the group in the Component Tree, to give you a total of three items in the group.

Select the first of the three submenu items in the Component Tree. In the Attributes pane, give it an ID of all. Switch the Attributes pane to show all attributes (if it is not doing so already), and check the “checked” checkbox, so that it contains a checkmark. Then, click the “…” button next to the “title” field. As before, this brings up a string resource selector. Click on “Add new resource” > “New string Value” in the drop-down towards the top. In the dialog, fill in menu_filter_all as the resource name and “All” as the resource value. Click OK to close the dialog and complete the configuration of this submenu item.

Select the second submenu item in the Component Tree. In the Attributes pane, give it an ID of completed. Then, for the “title”, use the “…” button to assign it a new string resource, named menu_filter_completed, with a value of “Completed”.

Select the third submenu item in the Component Tree. In the Attributes pane, give it an ID of outstanding. Then, for the “title”, use the “…” button to assign it a new string resource, named menu_filter_outstanding, with a value of “Outstanding”.

At this point, in the “Text” sub-tab, your menu resource XML should resemble:

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

  <item
    android:id="@+id/filter"
    android:icon="@drawable/ic_filter_list_black_24dp"
    android:showAsAction="ifRoom|withText"
    android:title="@string/menu_filter">
    <menu>
      <group
        android:id="@+id/filter_group"
        android:checkableBehavior="single">
        <item
          android:id="@+id/all"
          android:checked="true"
          android:title="@string/menu_filter_all" />
        <item
          android:id="@+id/completed"
          android:title="@string/menu_filter_completed" />
        <item
          android:id="@+id/outstanding"
          android:title="@string/menu_filter_outstanding" />
      </group>
    </menu>
  </item>
  <item
    android:id="@+id/add"
    android:icon="@drawable/ic_add_black_24dp"
    android:showAsAction="ifRoom|withText"
    android:title="@string/menu_add" />
</menu>

And, if you run your app, you should see the new filter action bar item. Clicking it will expose the submenu, although clicking on the submenu items will have no effect.

ToDo App, Showing Checkable Submenu
Figure 192: ToDo App, Showing Checkable Submenu

Step #2: Getting Control on Filter Choices

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

Step #3: Defining a Filter Action and Result

The preview of this section was lost in the sofa cushions.

Step #4: Emitting and Controlling the Filter Action

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

Step #5: Updating the ViewState

The preview of this section was stepped on by Godzilla.

Step #6: Filtering the Items

The preview of this section is presently indisposed.

Step #7: Using the Filtered Items

The preview of this section is en route to Mars.

Step #8: Fixing the Empty Text

The preview of this section was stepped on by Godzilla.

What We Changed

The preview of this section was traded for a bag of magic beans.