UI for Multi Select View items in Android App

I have been working on an Android app where we were trying to implement a multi select for List View items (interaction similar to the messages or contacts app in android) like below:

Whatsapp gallery select

 

I created a similar interface for our own app and the two basic building blocks for such an interaction are:

  1. A context menu – It appears when the user performs a long-click on an element. It provides actions that affect the selected content or context frame.
  2. Enabling contextual action mode on a listview or a gridview through a MultiChoiceModeListener.

 

We inflate the context menu that we’d want to show in the  onCreateActionMode(ActionMode mode, Menu menu)  method.  The  onActionItemClicked(ActionMode mode, MenuItem item)  method is finally called when a menu item in our context menu is clicked. I have thrown in a Switch statement that would make implementation easier. The code snippet above should help you trigger a context action menu on “Long Press” by default.

Pro Tip – I spent hours trying to implement this listener on a gridView and it can be a massive pain in the rear. Make sure you add  android:descendantFocusability="blocksDescendants"  on the top level container in your XML layout.

Now that we have the functionality in place, let’s work on the look and feel of the items as per the image shared above. So, ideally we’d want a check mark next to the item selected. We’ll accomplish this by using a selector. A selector let’s us modify the drawable resource (with a certain constraints) based on the state of a View.

The View for my list item looked like :

PS: The foreground attribute on view is available on FrameLayout. It is not available on RelativeLayout. Applying a foreground on other view containers might not be as straight forward.

The   card_item_background  drawable is simply a selector containing a layer of views (one containing the background color and other containing the check mark we wanted to draw on selected items):

I implemented this selector and listener for a gridview in our app and the results were pretty satisfying:

Tinker App home screen

I am learning to tinker around with Android and will be sharing my two cents in building an Android app or particularly making parts of it simpler.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">