如何遵循Material Design规范设计含复选框与EditText的自定义Dialog？

Got it! Let's build that Material Design-compliant multi-select dialog with a custom input field at the bottom—here's a step-by-step solution that fits the spec:

We'll use Material Components for consistent styling, proper spacing, and adherence to Material Design guidelines. This layout includes a scrollable checkbox list, a custom input section, and standard action buttons:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingHorizontal="24dp"
    android:paddingTop="16dp"
    android:paddingBottom="8dp">

    <!-- Dialog Title (follows Material Design typography) -->
    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="选择选项"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginBottom="16dp"/>

    <!-- Scrollable Checkbox List (handles long option lists) -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="300dp"
        android:layout_marginBottom="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.checkbox.MaterialCheckBox
                android:id="@+id/checkbox_option1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="选项1"
                android:paddingVertical="8dp"/>

            <com.google.android.material.checkbox.MaterialCheckBox
                android:id="@+id/checkbox_option2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="选项2"
                android:paddingVertical="8dp"/>

            <com.google.android.material.checkbox.MaterialCheckBox
                android:id="@+id/checkbox_option3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="选项3"
                android:paddingVertical="8dp"/>

            <com.google.android.material.checkbox.MaterialCheckBox
                android:id="@+id/checkbox_option4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="选项4"
                android:paddingVertical="8dp"/>
        </LinearLayout>
    </ScrollView>

    <!-- Custom Input Section (Material Design text field) -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/custom_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="添加自定义选项"
        android:layout_marginBottom="16dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/custom_option_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>

    <!-- Action Buttons (follows Material Design button placement) -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="end">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:layout_marginEnd="8dp"
            app:backgroundTint="@android:color/transparent"
            app:textColor="?attr/colorOnSurface"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_confirm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确定"
            app:backgroundTint="?attr/colorPrimary"
            app:textColor="@android:color/white"/>
    </LinearLayout>

</LinearLayout>

Now connect the layout to your AlertDialog.Builder code, handle checkbox selections, and process the custom input:

public void onClick(View view) {
    AlertDialog.Builder mBuilder = new AlertDialog.Builder(AddData.this, R.style.Theme_Material3_Dialog_Alert);
    View mView = getLayoutInflater().inflate(R.layout.dialog_adding_data, null);

    // Get references to UI elements
    MaterialCheckBox option1 = mView.findViewById(R.id.checkbox_option1);
    MaterialCheckBox option2 = mView.findViewById(R.id.checkbox_option2);
    MaterialCheckBox option3 = mView.findViewById(R.id.checkbox_option3);
    MaterialCheckBox option4 = mView.findViewById(R.id.checkbox_option4);
    TextInputEditText customInput = mView.findViewById(R.id.custom_option_input);
    MaterialButton btnCancel = mView.findViewById(R.id.btn_cancel);
    MaterialButton btnConfirm = mView.findViewById(R.id.btn_confirm);

    // Build the dialog
    AlertDialog dialog = mBuilder.setView(mView).create();

    // Cancel button click
    btnCancel.setOnClickListener(v -> dialog.dismiss());

    // Confirm button click: collect selected options and custom input
    btnConfirm.setOnClickListener(v -> {
        List<String> selectedOptions = new ArrayList<>();

        // Add pre-defined selected options
        if (option1.isChecked()) selectedOptions.add(option1.getText().toString());
        if (option2.isChecked()) selectedOptions.add(option2.getText().toString());
        if (option3.isChecked()) selectedOptions.add(option3.getText().toString());
        if (option4.isChecked()) selectedOptions.add(option4.getText().toString());

        // Add custom option if not empty
        String customOption = customInput.getText().toString().trim();
        if (!customOption.isEmpty()) {
            selectedOptions.add(customOption);
        }

        // Do something with the selected options here
        // For example:
        Toast.makeText(AddData.this, "选中的选项: " + selectedOptions.toString(), Toast.LENGTH_SHORT).show();

        dialog.dismiss();
    });

    dialog.show();
}

• Component Choice: Use Material Components (MaterialCheckBox, TextInputLayout, MaterialButton) to ensure consistent styling with the rest of your app.
• Spacing: Follow Material Design's spacing guidelines (24dp horizontal padding, 16dp vertical spacing between sections) for a clean, professional look.
• Scrollable List: The ScrollView ensures the dialog doesn't get too tall if you add more options later.
• Button Placement: Cancel button on the left, confirm on the right—this is the standard Material Design action button order.

内容的提问来源于stack exchange，提问作者vesii