The simplest way to include icons in a ListView

Screenshot of the final result

Did you know you don’t have to fiddle with custom layouts to get such a result?

At my current job, I have been asked to merge my application with a legacy project, already approved by marketing. During normal use, the application would display a navigation ListView at launch.

This post will explain how I set up such a list, to act as a reminder whenever I need to quickly implement it again.

To achieve this result quickly and painlessly, I used a combination of compound drawables, and Android’s built-in list layouts.

How it works

  1. Create a structure which represents the menu items;
  2. Create a list of these menu items, and populate it;
  3. Place a ListView in one of your layouts;
  4. Make the link between the item list and the ListView, using an Adapter;
  5. Implement the navigation and UX.

Represent the menu items

A “menu” item is a combination of a picture (drawable) and a text. This information is represented as an ImageMenuItem entity.

In accordance with Android’s best coding practices, text is stored as a string resource, easily translatable and maintainable.

Create a list of menu items

In the Activity, create an ArrayList of these items:

private final ArrayList<ImageMenuItem> menuItems = new ArrayList<>();

In the Activity’s onCreate method, populate this list using ArrayList.add:

static final int ITEM_FIRST = 0;
static final int ITEM_SECOND = 1;

menuItems.add(ITEM_FIRST, new ImageMenuItem(R.drawable.ic_first, R.string.menuitem_first));
menuItems.add(ITEM_SECOND, new ImageMenuItem(R.drawable.ic_second, R.string.menuitem_second));

Place a ListView

(And make sure you know its id.)

<?xml version="1.0" encoding="utf-8"?>
<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Link the data to the ListView using an adapter

final ListView listView = (ListView)findViewById(R.id.listView);
listView.setAdapter(new ImageMenuAdapter(this, menuItems));

All the magic happens in the ImageMenuAdapter:

  1. Tell the Adapter to use Android’s default simple_list_item_1, and
  2. Set the text, and set a compound drawable to the list item.

Implement the navigation

The reason we previously declared constants for the menu items, is to properly handle navigation:

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
        switch (position) {
            case ITEM_SECOND:
                // Do whatever you want here
                break;
            default:
                Log.w("ImageMenu", "Menu item at position #" + position + " not yet implemented");
        }
    }
});

For those who would rather read actual code:

“The simplest way to include icons in a ListView” was last updated on 2017-08-19.

This page is open source. You may improve it on GitHub.