How to design dialog to have Checkboxes and one EditText box?

Question

I'm trying to design the dialog xml file. It's a bit hard to follow the Material Design guidelines. Basically I want the dialog window to allow users to multi-check the checkboxes and on the bottom to have an option to add custom option (one EditText). For example:

Choose the options

[x] Option1
[] Option2
[x] Option3
[] Option4

Add custom options:
__________

       [Cancel] [Ok]

The code I have:

public void onClick(View view) {
    AlertDialog.Builder mBuilder = new AlertDialog.Builder(AddData.this);
    View mView = getLayoutInflater().inflate(R.layout.dialog_adding_data,null);
    // More code here
    mBuilder.show();
}

As I understand I'm using a custom dialog layout. But in the material design guidelines I didn't see an option to do something like that. Also I'm not sure how to to design the dialog_adding_data file. How can I design the dialog_adding_data so it will follow the material design guidelines and have the same functionality?

score 1 · Accepted Answer · answered May 30 '20 at 13:55

1

To achieve your UI requirements, you need to set a custom view to your dialog. The key point here is to use the following:

mBuilder.setView(mView);

If you are not using view/data binding, when referencing the views, make sure to use mView.findViewById and not findViewById like the following:

EditText editText = mView.findViewById(R.id.edit_text);
// Add your code logic, etc.

Concerning dialog_adding_data.xml that you have created, it will simply be like any other layout. Its hierarchy, depending on your exact needs, may look something like this:

<ScrollView>

    <LinearLayout>

        <CheckBox />

        <CheckBox />

        <!-- This one controls the EditText below. -->
        <CheckBox android:text="Add custom options" />

        <EditText />

    </LinearLayout>

</ScrollView>

If the check boxes count are dynamic, then you might need to use a RecyclerView with 2 view types (one for a normal option, and the other for the custom options) instead.

answered May 30 '20 at 13:55

Hussein El Feky

6,627
5
44
57

I see, thank you. Is it possible to expand your answer on the dynamic part? The checkboxes strings are "hardcoded" but I prefer to use some kind of a loop to iterate over a list of options and add them to the checkboxes somehow. Also, my question is on the Material design - does it considered a material design the layout I suggested? – vesii May 30 '20 at 14:05
@vesii Implementing a `RecyclerView` with multiple view types will require you to write more code, but it is especially useful in case the check boxes count might differ in certain times, or the check boxes count can get too large that will need the user to scroll. You can refer to https://stackoverflow.com/questions/26245139/how-to-create-recyclerview-with-multiple-view-type to check for an example of its implementation. – Hussein El Feky May 30 '20 at 14:12
Should I use `RadioGroup` to wrap the checkboxes? – vesii May 30 '20 at 14:13
@vesii Concerning Material Design, it depends you use which app theme. If you are not using MaterialComponents theme and use the AppCompat one, then your layout follows the old Material Design. If you want to use MaterialComponents, you need to add Material library as a dependency, and follow this guide: https://material.io/develop/android/components/dialogs/ – Hussein El Feky May 30 '20 at 14:15
@vesii No, do not use RadioGroup, you only use RadioGroup in case you want to use RadioButton that implements a single choice list. On the other hand, using CheckBox wrapped by a LinearLayout or any other applicable ViewGroup will implement a multi choice list. – Hussein El Feky May 30 '20 at 14:20
@vesii Please do not forget to mark the answer as correct if it went well with you, and let me know if you have any other inquiry. :) – Hussein El Feky Jun 01 '20 at 10:48

How to design dialog to have Checkboxes and one EditText box?

1 Answers1