How to add an icon before each item in alert dialog?

0 votes
asked Oct 13, 2010 by umar

I am using an AlertDialog (see the below code) and would like to put an image before each text.

For example, email icon then text "Email", Facebook icon then text "Facebook", etc.

Using the following code, how to add an icon before each text value?

final CharSequence[] items = { "Email", "Facebook", "Twitter", "LinkedIn" };
AlertDialog.Builder builder = new AlertDialog.Builder(More.this);
builder.setTitle("Share Appliction");
builder.setItems(items, new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int item) {
        if (item == 0) {

        } else if (item == 1) {

        } else if (item == 2) {

        } else if(item == 3) {

        }
    }
});
AlertDialog alert = builder.create();
alert.show();

4 Answers

0 votes
answered Jan 13, 2010 by barmaley

Do something like this:

ViewGroup layout=new LinearLayout(context);
TextView tv=new TextView(context); //your text
tv.setText("my text"); 
ImageView imageView=new ImageView(context); //your icon
//filling image view with icon bitmap (in this case from resource)
imageView.setImageBitmap(BitmapFactory.decodeStream(context.getResources().openRawResource(resourceId)));
//ensuring that icon size will be more or less like text height
imageView.setAdjustViewBounds(true);
imageView.setMaxHeight((int )(tv.getLineHeight()*1.5));
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
layout.addView(imageView); //adding icon
tv.setGravity(Gravity.BOTTOM|Gravity.LEFT);
layout.addView(tv); //adding text

Total idea is to create layout/viewgroup and add icon+text+whatever you want into viewgroup

0 votes
answered Jan 15, 2011 by tom-esterez

You must use a custom ListAdapter to add your image. On way is to subclass the ArrayAdapter (used by default by the AlertDialog). Here is an example:

final Item[] items = {
    new Item("Email", android.R.drawable.ic_menu_add),
    new Item("Facebook", android.R.drawable.ic_menu_delete),
    new Item("...", 0),//no icon for this one
};

ListAdapter adapter = new ArrayAdapter<Item>(
    this,
    android.R.layout.select_dialog_item,
    android.R.id.text1,
    items){
        public View getView(int position, View convertView, ViewGroup parent) {
            //Use super class to create the View
            View v = super.getView(position, convertView, parent);
            TextView tv = (TextView)v.findViewById(android.R.id.text1);

            //Put the image on the TextView
            tv.setCompoundDrawablesWithIntrinsicBounds(items[position].icon, 0, 0, 0);

            //Add margin between image and text (support various screen densities)
            int dp5 = (int) (5 * getResources().getDisplayMetrics().density + 0.5f);
            tv.setCompoundDrawablePadding(dp5);

            return v;
        }
    };


new AlertDialog.Builder(this)
    .setTitle("Share Appliction")
    .setAdapter(adapter, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int item) {
            //...
        }
    }).show();

Here is the Item class

public static class Item{
    public final String text;
    public final int icon;
    public Item(String text, Integer icon) {
        this.text = text;
        this.icon = icon;
    }
    @Override
    public String toString() {
        return text;
    }
}
0 votes
answered Jan 9, 2014 by geltrude

To scale images:

//Put the image on the TextView
int dp50 = (int) (50 * getResources().getDisplayMetrics().density + 0.5f);
Drawable dr = getResources().getDrawable(R...YOUR_DRAWABLE);
Bitmap bitmap = ((BitmapDrawable) dr).getBitmap();
Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, dp50, dp50, true));
tv.setCompoundDrawablesWithIntrinsicBounds(d, null, null, null);

// Add margin between image and text (support various screen densities)
int dp10 = (int) (10 * getResources().getDisplayMetrics().density + 0.5f);
tv.setCompoundDrawablePadding(dp10);
0 votes
answered Jan 11, 2014 by barina

I like Tom Esterez's solution but recommend using the relative function instead for RTL support.

So use this:

tv.setCompoundDrawablesRelativeWithIntrinsicBounds(items[position].iconID, 0, 0, 0);

instead of this:

tv.setCompoundDrawablesWithIntrinsicBounds(items[position].iconID, 0, 0, 0);
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...