Custom Dialog with setMultiChoiceItems

Question

I want to create a way users can select options like the image below

Right now am doing the following

public static class CategoriesDialogFragment extends SherlockDialogFragment {

    public static CategoriesDialogFragment newInstance(int title) {
        CategoriesDialogFragment frag = new CategoriesDialogFragment();
        Bundle args = new Bundle();
        args.putInt("title", title);
        frag.setArguments(args);
        return frag;
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        int title = getArguments().getInt("title");

        return new AlertDialog.Builder(getActivity())
                .setIcon(R.drawable.alert_dialog_icon)
                .setTitle(title)
                .setMultiChoiceItems(_categories, _selections,
                        new DialogSelectionClickHandler())
                .setPositiveButton(R.string.alert_dialog_ok,
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog,
                                    int whichButton) {
                                ((MainActivity) getActivity())
                                        .doPositiveClick();
                            }
                        }).create();

        /*
         * .setNegativeButton(R.string.alert_dialog_cancel, new
         * DialogInterface.OnClickListener() { public void
         * onClick(DialogInterface dialog, int whichButton) {
         * ((MainActivity) getActivity()) .doNegativeClick(); } })
         */
    }

    public class DialogSelectionClickHandler implements
            DialogInterface.OnMultiChoiceClickListener {
        public void onClick(DialogInterface dialog, int clicked,
                boolean selected) {
            // Log.i("ME", _options[clicked] + " selected: " + selected);
        }
    }

}

But i want to add ALL option like the image. So i think i will have to build a custom Dialog. Can i still extend the native setMultiChoiceItems so that it will reduce my handling of the code.

Tanh

The Builder has a setCustomTitle(View) method. – Menarche

@Luksprog it needs to have a check box. like shown in the image. so that when i click that i want to check or uncheck all the content inside the dialog content. – Tanh

Well provide a View to that method that contains a TextView(the actual title) and the all CheckBox. – Menarche

@Luksprog oh okay. can u share any resources for the same where i can see how it can be done. i thought we need to build a custom dialog – Tanh

Answer 1

You could probably use the setCustomTitle() method of the AlertDialog.Builder class and construct your own title which has the title text and also the all CheckBox, something like this:

new AlertDialog.Builder(getActivity())
                .setIcon(R.drawable.alert_dialog_icon)
                .setTitle(title)
                .setCustomTitle(getLayoutInflater().inflate(R.layout.custom_title, null));

where R.layout.custom_title is:

<?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" >

    <TextView
        android:id="@+id/textView1"
        style="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Dialog title"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="All"
        android:textColor="#ffffff" />

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Other style tweaks should be made to make it look better. But seeing the entire dialog layout you may want to go with a custom Dialog class, for which the setMultiChoice() method will not be available(but in the end it will be easy to replicate).

Menarche

The method getLayoutInflater(Bundle) in the type DialogFragment is not applicable for the arguments () – Tanh

@HarshaMV getActivity().getLayoutInflater() – Menarche

I did the above and I implemented my custom title but how can I get the values from the objects ? the findViewById doesn't work :/ – Gentoo

@AlexanderFragotsis Inflate the custom title and store a reference to it and modify it from there. View title = getLayoutInflater().inflate(R.layout.custom_title, null); ....setCustomTitle(title); title.findViewById(etc). – Menarche

Answer 2

I have achieved the thing which you are displaying in image. what i have used was Custom Dialogue as you are thinking to Use. i had used Listview inside the xml file.

First of all Define initialize the below arraylist.

// Catagory Selection
    public static ArrayList<String> acceptpositionwhoesNearMe = new ArrayList<String>();
    public static String AcceptCatagotyIDWhoesNearMe = "";

Below is the Code showDialog() i have Used.

public void showDialog() {
        Log.i(TAG, "Inside Show Dialog");
        final Dialog warning = new Dialog(logout_dialogue.this);
        warning.requestWindowFeature(Window.FEATURE_NO_TITLE);
        warning.setContentView(R.layout.YOUR_XML);
        warning.setCancelable(false);
        warning.getWindow().setGravity(Gravity.CENTER);

        WindowManager mWinMgr;
        mWinMgr = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        int displayWidth = mWinMgr.getDefaultDisplay().getWidth();

        warning.getWindow().setLayout(displayWidth - 75,
                LayoutParams.WRAP_CONTENT);
        warning.setOnDismissListener(new OnDismissListener() {
            public void onDismiss(DialogInterface dialog) {
                Log.i(TAG, "Inside Dialog interface");
                // test = true;
                warning.dismiss();
            }
        });
        ListView listinterest = (ListView) warning
                .findViewById(R.id.list_catagory);
        /*
         * ArrayList<String> count = new ArrayList<String>(); count.clear();
         * count.add("Hotels"); count.add("Restaurants"); count.add("Gardens");
         * count.add("Theater");
         */
        CatagorySummaryAdapter adapter;
        adapter = new CatagorySummaryAdapter(YOUR_ACTIVITY.this,
                YOUR_ARRAYLIST_OF_CATAGORY, true);

        listinterest.setAdapter(adapter);

        Button btnOk = (Button) warning.findViewById(R.id.btn_close);
        btnOk.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                // TODO Auto-generated method stub

                String Catagory = "";
                int count = HomeActivity.acceptpositionwhoesNearMe.size();

                if (count > 0) {
                    for (int i = 0; i < HomeActivity.acceptpositionwhoesNearMe
                            .size(); i++) {

                        int pos = Integer
                                .parseInt(HomeActivity.acceptpositionwhoesNearMe
                                        .get(i));
                        if (Catagory.equals("")) {
                            Catagory = GetUserDetailsJsonParser.CategoryName
                                    .get(pos);
                            HomeActivity.AcceptCatagotyIDWhoesNearMe = GetUserDetailsJsonParser.CategoryID
                                    .get(pos);
                        } else {

                            Catagory = Catagory
                                    + ","
                                    + GetUserDetailsJsonParser.CategoryName
                                            .get(pos);
                            HomeActivity.AcceptCatagotyIDWhoesNearMe = HomeActivity.AcceptCatagotyIDWhoesNearMe
                                    + ","
                                    + GetUserDetailsJsonParser.CategoryID
                                            .get(pos);
                        }

                    }

                    Log.i(TAG, "Accept Catagory IDs WhoseNear Me"
                            + HomeActivity.AcceptCatagotyIDWhoesNearMe);

                    GetUserDetailsJsonParser.InterestedIn = HomeActivity.AcceptCatagotyIDWhoesNearMe;
                    UpdateMap = true;
                    /*
                     * startActivity(new Intent(WhosNearMe.this,
                     * BuildInukshk_4.class));
                     */
                    new GetUsersInRadiusAsyncTask().execute();

                    warning.dismiss();

                } else {
                    Toast.makeText(WhosNearMe.this,
                            "Please Select One or More Catagory", 3).show();
                }
                // test = true;

            }
        });

        warning.show();
    }

Here is My logout_dialogue.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/edittext_back_final"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <com.inukshk.CustomTextViewBold
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:text="Interested in"
                android:textColor="#3C3C3C"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>

        <ListView
            android:id="@+id/list_catagory"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:cacheColorHint="#00000000"
            android:divider="@android:color/transparent" >
        </ListView>

        <Button
            android:id="@+id/btn_close"
            android:layout_width="99dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/btn_back_final"
            android:text="CLOSE"
            android:textColor="#ffffff"
            android:textSize="16dp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

here is My CatagorySummaryAdapter.java :

package com.inukshk.adapter;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.inukshk.HomeActivity;
import com.inukshk.R;
import com.inukshk.CreateInukshk.BuildInukshk_3;
import com.inukshk.WhosNearMe.WhosNearMe;

public class CatagorySummaryAdapter extends BaseAdapter {

    public Activity context;
    String TAG = "CatagorySummaryAdapter";
    public LayoutInflater inflater;
    public ArrayList<String> Count;
    boolean Dialogue;

    public CatagorySummaryAdapter(Activity context, ArrayList<String> Count,
            boolean Dialogue) {
        super();
        this.context = context;
        this.inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        this.Count = Count;

        this.Dialogue = Dialogue;

        // TODO Auto-generated constructor stub
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return Count.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return Count.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public int getItemViewType(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    public class ViewHolder {
        RelativeLayout lsummary_row;
        TextView txtinterestname;
        CheckBox chkinterest;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        int pos = position;
        ViewHolder holder;

        if (convertView == null) {
            holder = new ViewHolder();

            if (Dialogue) {
                convertView = inflater.inflate(
                        R.layout.listview_summary_dialogue_row, null);
            } else {
                convertView = inflater.inflate(R.layout.listview_summary_row,
                        null);
            }

            holder.txtinterestname = (TextView) convertView
                    .findViewById(R.id.txtinterestname);
            holder.lsummary_row = (RelativeLayout) convertView
                    .findViewById(R.id.lsummary_row);
            holder.chkinterest = (CheckBox) convertView
                    .findViewById(R.id.chkinterest);
            holder.chkinterest.setEnabled(true);

            holder.chkinterest.setTag(position);

            if (Dialogue) {

                for (int i = 0; i < HomeActivity.acceptpositionwhoesNearMe.size(); i++) {
                    int index = Integer
                            .parseInt(HomeActivity.acceptpositionwhoesNearMe
                                    .get(i));
                    // Log.i(TAG, "Inside for Loop of Accept Positions");
                    if (index == position) {
                        // Log.i(TAG, "Matched for index" + index);
                        holder.chkinterest.setChecked(true);
                        holder.chkinterest
                                .setButtonDrawable(R.drawable.checkbox_checked);
                    }

                }

            } else {
                for (int i = 0; i < BuildInukshk_3.acceptposition.size(); i++) {
                    int index = Integer.parseInt(BuildInukshk_3.acceptposition
                            .get(i));
                    // Log.i(TAG, "Inside for Loop of Accept Positions");
                    if (index == position) {
                        // Log.i(TAG, "Matched for index" + index);
                        holder.chkinterest.setChecked(true);
                        holder.chkinterest
                                .setButtonDrawable(R.drawable.checkbox_checked);
                    }

                }
            }

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.chkinterest
                .setOnCheckedChangeListener(new OnCheckedChangeListener() {

                    @Override
                    public void onCheckedChanged(CompoundButton buttonView,
                            boolean isChecked) {
                        // TODO Auto-generated method stub
                        // Log.i(TAG, "ISChecked is " + isChecked);
                        if (isChecked) {
                            // Log.i(TAG, "ISChecked is true");
                            buttonView
                                    .setButtonDrawable(R.drawable.checkbox_checked);
                            int position = Integer.parseInt(buttonView.getTag()
                                    .toString());
                            if (Dialogue) {
                                HomeActivity.acceptpositionwhoesNearMe.add(String
                                        .valueOf(position));

                                Log.i(TAG, "Accept ID of Dialogue"
                                        + HomeActivity.acceptpositionwhoesNearMe);
                            } else {
                                BuildInukshk_3.acceptposition.add(String
                                        .valueOf(position));

                                Log.i(TAG, "Accept ID"
                                        + BuildInukshk_3.acceptposition);
                            }

                        } else {
                            // Log.i(TAG, "ISChecked is false");
                            buttonView
                                    .setButtonDrawable(R.drawable.checkbox_unchecked);
                            int position = Integer.parseInt(buttonView.getTag()
                                    .toString());

                            if (Dialogue) {
                                if (HomeActivity.acceptpositionwhoesNearMe
                                        .contains(String.valueOf(position))) {
                                    // Log.i(TAG,
                                    // "Inside Already present position");
                                    HomeActivity.acceptpositionwhoesNearMe
                                            .remove(String.valueOf(position));
                                    Log.i(TAG,
                                            "Accept ID Dialogue***"
                                                    + HomeActivity.acceptpositionwhoesNearMe);
                                }
                            } else {
                                if (BuildInukshk_3.acceptposition
                                        .contains(String.valueOf(position))) {
                                    // Log.i(TAG,
                                    // "Inside Already present position");
                                    BuildInukshk_3.acceptposition.remove(String
                                            .valueOf(position));
                                    Log.i(TAG, "Accept ID ***"
                                            + BuildInukshk_3.acceptposition);
                                }
                            }
                            //
                        }

                    }
                });

        holder.txtinterestname.setText(Count.get(pos));

        return convertView;
    }

}

try to go through it might help you.

Teasley

isnt it possible to use setMultiChoiceItems with DialogFragments ? – Tanh

@HarshaMV: I do not have use SherlockDialogFragment yet. so not able to give you correct suggestion. really sorry. – Teasley

no problem. Can you share the code do to the select all and uncheck all also. Just that u mentioned u have achieved this. i think we can easily port ur code to DialogFragment – Tanh

i have edited my answer. take a look at it. and let me know if you are finding any difficulties. – Teasley

Answer 3

I also wanted to keep using setMultiChoiceItems() with my dialog, so instead of creating a custom dialog, I did this:

Don't return the AlertDialog immediately. Create the AlertDialog.Builder it first like this:

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

Set your builder parameters:

builder.setTitle(listTitle)
.setMultiChoiceItems(allTagsArray, containsTag,
            new DialogInterface.OnMultiChoiceClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which, boolean isChecked){

Then create the AlertDialog itself calling create(). This will not show the dialog yet.

AlertDialog dialog = builder.create();

Then get the ListView, add a header and/or footer, and return it.

ListView dialogList = dialog.getListView();
dialogList.addFooterView(yourHeader);
return dialog;

This also works with @Luksprog's setCustomTitle() giving you a total of three customizable spaces without having to implement a custom adapter. The only possible downside to this for some is that the headers and footers scroll with the list (which is only problematic if the list is longer than the screen, obviously).

Hope this helps.

Important Update: Do not use headers in a checkbox list. It causes AlertController.java to miscalculate which checkbox is ticked, rendering it useless. A footer can still be used, which is useful in this case, but not in my case, so I'm building a custom dialog.

Denunciate