We use Dialog for a different purpose for example, we use to inform users about their tasks, require a decision or involve multiple tasks.

We have already example about Alert Dialog. You can also read about Alert dialog. We should use dialog for the following purpose

  • Block an app for normal operation or different mandatory information about errors.
  • Critical information which we require for specific task, acknowledgment or any decisions.

Now we discuss Anatomy of Material Dialog. Material Dialog has five Anatomy which are

1- Container: Container is the body of Dialog. Container contains Button, title and supporting the message of Material Dialog.
2- Title: You can say heading of Material Dialog.
3- Message: This is the supporting message for users which provides more information about the task, decision or acknowledgement.
4- Button: Material Dialog contains three types of Button which are NegativeButton, Positive Button and Neutral Button.
5- Scrim: Such as we know, Material Dialog is a modal window when it displays then rest of the UI disabled. The UI is disabled behind the Dialog called scrim.

In this tutorial, we shall display three types of Material Dialog, and I hope, you will understand about Material Dialog concepts. The first Dialog which I am going to display is Confirmation Dialog. The code of Confirmation Dialog is

   private void showConfirmationDialog() {
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_simple_title))
                .setMessage(getString(R.string.dialog_simple_msg))
                .setPositiveButton("YES", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "Thanks", Toast.LENGTH_SHORT).show();

                    }
                })
                .setNegativeButton("NO", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

2nd example is a single choice Material Dialog. In this example, we shall ask from the user about feedback.

 private void showSingleChoiceDialog() {
        String[] singleChoiceArr = getResources().getStringArray(R.array.becody_single_choice_feedback);
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_single_choice_title))
                .setSingleChoiceItems(singleChoiceArr, 0, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, singleChoiceArr[i], Toast.LENGTH_SHORT).show();
                    }
                })
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

3rd and last example is multi-choice Material Dialog. In this example, the user will make multi-selection using Material Dialog.

   private void showMultiChoiceDialog() {
        String[] multiChoiceArr = getResources().getStringArray(R.array.becody_multi_choice_feedback);
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_multi_choice_title))
                .setMultiChoiceItems(multiChoiceArr, null, new DialogInterface.OnMultiChoiceClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i, boolean b) {
                        if (b) {
                            Toast.makeText(MainActivity.this, "You have selected " + multiChoiceArr[i], Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(MainActivity.this, "You have unselected " + multiChoiceArr[i], Toast.LENGTH_SHORT).show();
                        }
                    }
                })
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

Complete code of XML file is

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnDialog"
        android:layout_width="276dp"
        android:layout_height="54dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="128dp"
        android:layout_marginEnd="8dp"
        android:text="@string/dialog_simple_btn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.451"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnMultiChoice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="@string/dialog_multi_choice_btn"
        app:layout_constraintEnd_toEndOf="@+id/btnDialog"
        app:layout_constraintStart_toStartOf="@+id/btnDialog"
        app:layout_constraintTop_toBottomOf="@+id/btnDialog" />

    <Button
        android:id="@+id/btnSingleChoice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="@string/dialog_single_choice_btn"
        app:layout_constraintEnd_toEndOf="@+id/btnMultiChoice"
        app:layout_constraintStart_toStartOf="@+id/btnMultiChoice"
        app:layout_constraintTop_toBottomOf="@+id/btnMultiChoice" />


</androidx.constraintlayout.widget.ConstraintLayout>

Here is the full code of MainActivity Java file

package com.becody.alertdialogmaterialexample;

import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.material.dialog.MaterialAlertDialogBuilder;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btnDialog = findViewById(R.id.btnDialog);
        btnDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showConfirmationDialog();
            }
        });

        Button btnSingleChoice = findViewById(R.id.btnSingleChoice);
        btnSingleChoice.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showSingleChoiceDialog();
            }
        });

        Button btnMultiChoice = findViewById(R.id.btnMultiChoice);
        btnMultiChoice.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showMultiChoiceDialog();
            }
        });

    }

    private void showConfirmationDialog() {
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_simple_title))
                .setMessage(getString(R.string.dialog_simple_msg))
                .setPositiveButton("YES", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "Thanks", Toast.LENGTH_SHORT).show();

                    }
                })
                .setNegativeButton("NO", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

    private void showSingleChoiceDialog() {
        String[] singleChoiceArr = getResources().getStringArray(R.array.becody_single_choice_feedback);
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_single_choice_title))
                .setSingleChoiceItems(singleChoiceArr, 0, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, singleChoiceArr[i], Toast.LENGTH_SHORT).show();
                    }
                })
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

    private void showMultiChoiceDialog() {
        String[] multiChoiceArr = getResources().getStringArray(R.array.becody_multi_choice_feedback);
        new MaterialAlertDialogBuilder(this, R.style.Panel_Dialog)
                .setTitle(getString(R.string.dialog_multi_choice_title))
                .setMultiChoiceItems(multiChoiceArr, null, new DialogInterface.OnMultiChoiceClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i, boolean b) {
                        if (b) {
                            Toast.makeText(MainActivity.this, "You have selected " + multiChoiceArr[i], Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(MainActivity.this, "You have unselected " + multiChoiceArr[i], Toast.LENGTH_SHORT).show();
                        }
                    }
                })
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                })
                .create().show();
    }

}

Thanks for reading the tutorial. Please like our Facebook page for a new and latest tutorial. Join our WhatsApp group for asking any questions about this tutorial. Please subscribe to our Youtube channel for the latest updates and tutorials.

3 Comments

  1. I have to thank you for the efforts you’ve put in writing this website. I really hope to see the same high-grade content by you in the future as well. In truth, your creative writing abilities has encouraged me to get my own website now 😉

Write A Comment