Creating a nice looking List dialog with images and text

This tutorial, will demonstrate how you can create a great looking selectiondialog, containing both text and images.

This list can then be used either directly in an Activity, Fragment, or as an Activity looking like a dialog. In this example, I will go with the latter, and create an activity that looks like a selection dialog window, that, in this case will be used to choose a country.

Creating such a selection list is easy if it should contain text only, but a bit more complicated if you also want to include images.

What we need:

Note: This entire example app is available for download on my Github page, see the last chapter.

A few images. here I will be using flag icons. Put the images in the res/drawables folder (create it if it does'n exist).

String array resources that contain the texts and image references

Two activities: MainActivity, that is the default activity, and CountrycodeActivity to display the list as a dialog.

One custom list adapter that we use to connect the resources to the ListView

Two simple layouts; one for the MainActivity and one that represents a list item, with the flag and country name.

Setup

First, create a new android app project. Then create the following files:

MainActivity.java

The MainActivity is the main screen we see after opening the app, this is just used to demonstrate the CountrycodeActivity selection dialog.

This activity registers a click listener on a button, which starts the CountrycodeActivity via an Intent.

The CountrycodeActivity is started with the startActivityForResult method, which expects a result back. The result is the selection which the user made, in onActivityResult.

CountrycodeActivity.java

The CountrycodeActivity class is a ListActivity that renders a list of countries, based on data from string.xml resources; names, values and images. We use the inner class called Country as a helper to hold the data from the resources.

The CountrycodeActivity uses a custom ListAdapter called CountryListArrayAdapter to render the custom list itself, we just pass it the data it should render.

The list is hooked up with a click listener, so we can detect when the user clicks an item.

Since this activity was started from the MainActivity, and is expected to return with a result, we will return the value of the selected country, when the user clicks on a list item, we do this by calling setResult() and then finish().

res/values/strings.xml

This is where we define our string resources, and where we will put our country data.

We use string arrays to hold the country data.

The first string array holds the display names of the countries, what will be shown in the dialog.

The second array holds the values that will be returned to the MainActivity, so we know which country was selected. We could ofcourse drop this, and return the country display name instead, but then we would have to extract the countrycode or name from that string.

The last array contains references to the images that are shown for each country.

Note: The order of these arrays are important, as all three arrays correlate.

Result

Alternatives

This is just one way to make such a list dialog.

Instead of keeping the country data in the strings.xml file as string arrays, you could ofcourse put the data directly in the code or in a database and use a cursor, but I wanted to show how you could get this kind of data from the strings.xml file.

The code is small and simple to implement, and in my case, contains few items

It is easier to update the list of countries with new country elements, compared to using a database to hold the country list. (*)

The country_names can now easily be translated.

I also tried using dialogfragments, but couldn't quite get it working the way I wanted.

(*) on the other hand, if you were using a database, you could add new countries by downloading the strings and images from your server, but it would make it more difficult to manage and translate, and you would need permission to do network requests.

In this example, strings have been included inline in the code, for demonstration purpose, they should normally reside in the strings.xml file. You can easily extract and format string resources.