Everybody knows auto-completion can be fun! This handy and practical UI design concept is both practical affording the user less typing and the ability to preview the result in real-time. Android has built-in support for auto-completion.

In this tutorial, I wanted to show case Android’s auto-completion capabilities with a difference. In a recent project, I was faced with a problem of searching for items/entries, except that an item/entry can occur in more that a single category. I knew part of the solution ”the handy-old auto-completion facility” but I wanted to make the difference in categories immediately visible or apparent.

For example, the term Pain (in bold) occurs in both Symptoms category as well as Reactions category, but also text in the Notes category.

Symptoms – Pain, Depression, Weakness
Reactions – Pain, Inflammation, Itchiness
Notes – I had a pain in my buttocks.

The solution:
Visualize the Categories and Items to be searched simultaneously using Category Icons!