Alert Dialog with a list of Text and Image options.

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;
  }
 }
}

cat icon source

bird icon source

dog icon from Mac OS X iChat icons