ArrayAdapter and AlertDialog for single choice items
I thought this was pretty cool…I used the AlertDialog.Builder, an ArrayAdapter along with the View Holder Android UI pattern to build an AlertDialog containing a list of choices with images for each entry.
Here’s a screen shot from the emulator of my dog/cat/bird selection AlertDialog.
![]() |
By using a simple TextView as the widget in the animal_row.xml layout file for the ArrayAdapter the image comes for free as the compound drawable. Each row in the selection list is defined by a POJO holding the string to display, the image and the value to get when if the selection is chosen. Hopefully the rest of the code is documented well enough to understand. I would change the code a bit for performance by defining the AlertDialog in onCreate() then calling dialog.show() when the button is pressed.
public class HelloWorld extends Activity
{
private static final String TAG = "HelloWorld";
Animal[] _animals;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
loadAnimals();
}
/**
* Create all the choices for the list
*/
private void loadAnimals() {
_animals = new Animal[3];
// define the display string, the image, and the value to use
// when the choice is selected
_animals[0] = new Animal( getString( R.string.dog ),
getImg( R.drawable.dog ),
getString( R.string.dog_val ) );
_animals[1] = new Animal( getString( R.string.cat ),
getImg( R.drawable.cat ),
getString( R.string.cat_val ) );
_animals[2] = new Animal( getString( R.string.bird ),
getImg( R.drawable.bird ),
getString( R.string.bird_val ) );
}
private Drawable getImg( int res )
{
Drawable img = getResources().getDrawable( res );
img.setBounds( 0, 0, 48, 48 );
return img;
}
/**
* Handle the event to display the AlertDialog with the list
*/
public void handlePush( View target ) {
// define the list adapter with the choices
ListAdapter adapter = new AnimalAdapter( this, _animals );
final AlertDialog.Builder ad = new AlertDialog.Builder(this);
// define the alert dialog with the choices and the action to take
// when one of the choices is selected
ad.setSingleChoiceItems( adapter, -1, new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// a choice has been made!
String selectedVal = _animals[which].getVal();
Log.d(TAG, "chosen " + selectedVal );
dialog.dismiss();
}
});
ad.show();
}
/**
* Definition of the list adapter...uses the View Holder pattern to
* optimize performance.
*/
static class AnimalAdapter extends ArrayAdapter {
private static final int RESOURCE = R.layout.animal_row;
private LayoutInflater inflater;
static class ViewHolder {
TextView nameTxVw;
}
public AnimalAdapter(Context context, Animal[] objects)
{
super(context, RESOURCE, objects);
inflater = LayoutInflater.from(context);
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ViewHolder holder;
if ( convertView == null ) {
// inflate a new view and setup the view holder for future use
convertView = inflater.inflate( RESOURCE, null );
holder = new ViewHolder();
holder.nameTxVw =
(TextView) convertView.findViewById(R.id.animal_name_txtvw);
convertView.setTag( holder );
} else {
// view already defined, retrieve view holder
holder = (ViewHolder) convertView.getTag();
}
Animal cat = getItem( position );
if ( cat == null ) {
Log.e( TAG, “Invalid category for position: ” + position );
}
holder.nameTxVw.setText( cat.getName() );
holder.nameTxVw.setCompoundDrawables( cat.getImg(), null, null, null );
return convertView;
}
}
/**
* POJO for holding each list choice
*
*/
class Animal {
private String _name;
private Drawable _img;
private String _val;
public Animal( String name, Drawable img, String val ) {
_name = name;
_img = img;
_val = val;
}
public String getName() {
return _name;
}
public Drawable getImg() {
return _img;
}
public String getVal() {
return _val;
}
}
}
dog icon from Mac OS X iChat icons


June 10th, 2010 at 2:03 pm
[…] UI pattern to build an AlertDialog containing a list of choices with images for each entry. (more…) All, […]
July 25th, 2010 at 4:56 pm
fyi this post is pretty useless w/o the accompanying xml.
July 25th, 2010 at 10:22 pm
All the layout xml is is a single TextView item defining the row in the ArrayAdapter. By using the supplied Compound Drawable feature of the TextView it’s relatively easy to show an image beside the text.
January 14th, 2011 at 9:56 am
I have to agree with #2… I just googled my way here, and have (to my surprise) managed to get an app with this up and running… But I don’t get any images, and I don’t get any buttons. (The latter means that the OnClickListener never gets called, so I cannot even use the dialog without images… *sigh*) As a new Android app writer, this xml/view/layout-thingy is *the* major obstacle, so it doesn’t actually help when exactly that part of the method is not published here…
May 13th, 2011 at 11:06 pm
Appreciate your work! Thanks for the blog, keep it up