Creating Delightful User Experience with Contextual Action Mode in your Action Bar

Action Bar is a great place to provide the user with certain set of interactions. It is the de facto place for developers to expose functionalities in a much predictable way. It also can be used for branding your app and giving it an identity. But, Action Bar can be so much more than that.

Action Bar can also be used to provide temporary context to enhance an experience of a sub-task. Let's look at an example -

Contextual Action Mode

Contextual Action Mode

The above example illustrates a Contextual Action Mode. The Contextual Action Mode is provoked when the user long-clicks on a list view item in order to select multiple items and perform certain actions such as deleting selected items. It's a great way to expose additional contextual actionable sub-tasks with Contextual Action Mode.

Now, let's look at how the code works. Firstly, create a new menu item inside your res/menu/ folder.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_delete"
        android:title="@string/action_delete"
        android:icon="@android:drawable/ic_menu_delete"/>
</menu>

Secondly, attach the code to start Action Mode in any event. For example, let's say I would like the Action Mode to be provoked upon tapping a text field -

myEditText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            mActionMode = startActionMode(new ActionMode.Callback() {
                @Override
                public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                    mode.setTitle("Selected");

                    MenuInflater inflater = mode.getMenuInflater();
                    inflater.inflate(R.menu.action_mode, menu);
                    return true;
                }

                @Override
                public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                    return false;
                }

                @Override
                public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_delete:
                          deleteClicked();
                          return true;
                        default:
                            doneClicked();
                            return false;
                    }
                }

                @Override
                public void onDestroyActionMode(ActionMode mode) {
                    doneClicked();
                }
            });
        }
    }
});

That's it. It's extremely easy to set it up. Furthermore, you can also theme your Contextual Action Bar using a stylesheet.  For example - 

<item name="android:actionModeBackground">@color/primary_color</item>

We think these Action Modes are an integral part of polishing your app's experience. It can certainly be useful in creating forms and exposing list view actions. Capitaine Train is one of the apps that makes the best use of Contextual Action Mode.