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 = ne         


        

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>

Answer 2

You basically will have to create your own ListAdapter by subclassing one of the available Adapter classes and supply that to the dialog (using builder.setAdapter(...)). If you have an array or list of items/objects, subclassing ArrayAdapter is probably what you'll want to look into.

In your Adapter subclass, you override the getView(...) method (amongst others) and fill the views of your custom layout with data for the supplied position in the list. More specifically, you'll want to set an image against an ImageView and text to a TextView.

A fairly nice tutorial that demonstrates how to implement a custom ArrayAdapter, and happens to be close to what you're trying to accomplish, can be found here. It also shows how to use the ViewHolder/RowWrapper concept.

Answer 3

You basically will have to create your own ListAdapter by subclassing one of the available Adapter classes and supply that to the dialog (using builder.setAdapter(...)). If you have an array or list of items/objects, subclassing ArrayAdapter is probably what you'll want to look into.

In your Adapter subclass, you override the getView(...) method (amongst others) and fill the views of your custom layout with data for the supplied position in the list. More specifically, you'll want to set an image against an ImageView and text to a TextView.

 Create class `MySimpleArrayAdapter` extending from  `ArrayAdapter`. 

Using ListView.setOnItemClickListener() method we get selected value of CheckTextView

#dialog.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/whitebox_bg"
    android:orientation="horizontal" >

        <CheckedTextView
            android:id="@+id/textDialog"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:checkMark="?android:attr/listChoiceIndicatorSingle"
            android:gravity="center_vertical"
            android:maxLines="10"
            android:singleLine="false"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000000" />

</LinearLayout>

To create a custom dialog box

        String [] view_location = {"Red", "Green", "Blue"};
              TextView label = (TextView) findViewById(R.id.selected_dept);
              AlertDialog.Builder builder = new AlertDialog.Builder(this);
              builder.setTitle("Select Location");
              ListView listview = new ListView(this);
              listview.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                      LayoutParams.WRAP_CONTENT));
              listview.setCacheColorHint(0);
              listview.setBackgroundColor(Color.WHITE);


              if (view_location != null) {

                  MySimpleArrayAdapter choice_arrayAdapter = new MySimpleArrayAdapter(this, view_location,label.getText().toString());
                  listview.setAdapter(choice_arrayAdapter);
                  builder.setView(listview);

                  listview.setOnItemClickListener(new OnItemClickListener() {
                      @Override
                      public void onItemClick(AdapterView<?> arg0, View arg1,
                              int arg2, long arg3) {
                          // TODO Auto-generated method stub
                          TextView label = (TextView) findViewById(R.id.selected_dept);
                          label.setText(view_location[arg2]);
                          survedObjectId = view_location_id[arg2];
                          dInterface.dismiss();

                      }
                  });


              }
              Dialog dialog = builder.create();
              dInterface = dialog;
              dialog.getWindow().setLayout(200, 400);
              dialog.show();'

    // `Extends From ArrayAdapter

     'public class MySimpleArrayAdapter extends ArrayAdapter<String> {
             private final Context context;
             private final String[] values;
             private final String  selectedText;
             public MySimpleArrayAdapter(Context context, String[] values, String  selectedText) {
               super(context, R.layout.dialog_text, values);
               this.context = context;
               this.values = values;
               this.selectedText = selectedText;
             }

             @Override
             public View getView(int position, View convertView, ViewGroup parent) {
               LayoutInflater inflater = (LayoutInflater) context
                   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
               View rowView = inflater.inflate(R.layout.dialog_text, parent, false);
               CheckedTextView textView = (CheckedTextView) rowView.findViewById(R.id.textDialog);

               textView.setText(values[position]);
               if(textView.getText().toString().equals(selectedText))
               {
                 textView.setChecked(true);
               }
               else
               {
                 textView.setChecked(false);
               }

               return rowView;
             }
           }'