Customize dialog which has single-choice list items

Question

I created a Dialog with single-choice list items:

final CharSequence[] items = {"Red", "Green", "Blue"};

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Colors");
builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dialog, int item) {
                Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show();
            }
        });
AlertDialog alert = builder.create();
alert.show();

How can I customize the layout of this dialog so that each list item in the dialog consists of a icon and a text. How to create custom layout for the list on the dialog?

Answer 1

Steps for Creating customize dialog:

1. Create the dialog box layout files, like:

   <RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "wrap_content"
   android:layout_height = "wrap_content">
   <!-- The Title Bar -->
   <LinearLayout
       android:id="@+id/dlg_priority_titlebar"
       android:orientation="horizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentTop="true">
   
       <ImageView
           android:src="@drawable/image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="5dip" />
   
       <TextView
           android:layout_width = "wrap_content"
               android:layout_height = "wrap_content"
               android:text = "Select Task Priority"
               android:layout_gravity = "center_vertical" />
   </LinearLayout>
   <ListView 
       android:id="@+id/dlg_priority_lvw"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/dlg_priority_titlebar"
       android:background="@drawable/layout_home_bg">
   </ListView>
   

2. Because the layout in the ListView custom, so to create a layout file for the ListView:

   <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" 
       android:orientation = "horizontal" 
       android:layout_width = "fill_parent" 
       android:layout_height = "fill_parent"> 
   
   <ImageView 
         android:id = "@+id/list_priority_img" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:layout_gravity = "center_vertical" 
         android:layout_margin = "5dip" /> 
   <TextView 
        android:id = "@+id/list_priority_value" 
        android:layout_width = "wrap_content" 
        android:layout_height = "wrap_content" 
        android:layout_gravity = "center_vertical" 
        android:textsize = "28dip" 
        android:textColor = "@drawable/ black" /> 
   </LinearLayout>
   

3. Create a custom Dialog class PriorityDlg inherited from Dialog

        public class PriorityDlg extends Dialog {
   
       private Context context;
       private ListView dlg_priority_lvw = null;
       public PriorityDlg(Context context) {
           super(context);
           this.context = context;
           // TODO Auto-generated constructor stub
       }
       public PriorityDlg(Context context, int theme) {
           super(context, theme);
           this.context = context;
       }
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           // TODO Auto-generated method stub
           super.onCreate(savedInstanceState);
           this.setContentView(R.layout.dlg_priority);
           dlg_priority_lvw = (ListView) findViewById(R.id.dlg_priority_lvw);
           // ListView
           SimpleAdapter adapter = new SimpleAdapter(context, getPriorityList(),
                   R.layout.lvw_priority, new String[] { "list_priority_img",
                           "list_priority_value" }, new int[] {
                           R.id.list_priority_img, R.id.list_priority_value });
           dlg_priority_lvw.setAdapter(adapter);
           //ListView
           dlg_priority_lvw
                   .setOnItemClickListener(new AdapterView.OnItemClickListener() {
   
                       @Override
                       public void onItemClick(AdapterView<?> arg0, View arg1,
                               int arg2, long arg3) {
   
                       }
                   });
       }
       private List<HashMap<String, Object>> getPriorityList() {
           List<HashMap<String, Object>> priorityList = new ArrayList<HashMap<String, Object>>();
           HashMap<String, Object> map1 = new HashMap<String, Object>();
           map1.put("list_priority_img", R.drawable.priority_not_important);
           map1.put("list_priority_value", context.getResources().getString(
                   R.string.dlg_priority_not_important));
           priorityList.add(map1);
           HashMap<String, Object> map2 = new HashMap<String, Object>();
           map2.put("list_priority_img", R.drawable.priority_general);
           map2.put("list_priority_value", context.getResources().getString(
                   R.string.dlg_priority_general));
           priorityList.add(map2);
           HashMap<String, Object> map3 = new HashMap<String, Object>();
           map3.put("list_priority_img", R.drawable.priority_important);
           map3.put("list_priority_value", context.getResources().getString(
                   R.string.dlg_priority_important));
           priorityList.add(map3);
           HashMap<String, Object> map4 = new HashMap<String, Object>();
           map4.put("list_priority_img", R.drawable.priority_very_important);
           map4.put("list_priority_value", context.getResources().getString(
                   R.string.dlg_priority_very_important));
           priorityList.add(map4);
   
           return priorityList;
       }
   
   }
   

4. To create a custom dialog box

   PriorityDlg dlg = new PriorityDlg (SimpleTaskActivity.this, R.style.dlg_priority); 
   dlg.show();
   

Where R.style.dlg_priority set the dialog box uses the style file, just let the dialog box to remove the title bar, and of course you can code to complete this effect:

<? Xml version = "1.0" encoding = "utf-8"?> 
<resources> 
    <style name="dlg_priority" parent="@android:Theme.Dialog"> 
        <item name = "android: windowNoTitle"> true </ item> 
    </ style> 
</ resources>