// Tutorial //

Android Material Components - MaterialAlertDialog

Published on August 3, 2022
Default avatar
By Anupam Chugh
Developer and author at DigitalOcean.
Android Material Components - MaterialAlertDialog

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Material Design 2.0 is out and we can’t wait to get our hands on Dialogs. In this tutorial, we’ll be customizing Dialogs using Material Theme in our Android Application.

Material Components - Dialogs

Alert Dialogs are a vital part of applications. Typically used to bring user’s attention to something important. Thanks to Material Design 2.0, we have much powerful Dialog now. First and foremost you need to add the material components dependency:

implementation 'com.google.android.material:material:1.1.0-alpha09'

Do not forget to inherit MaterialComponent Theme or descendants as the Activity Theme.

Basic Implementation

Now let’s create a basic MaterialAlertDialog using the Builder pattern:

new MaterialAlertDialogBuilder(MainActivity.this)
                        .setTitle("Title")
                        .setMessage("Your message goes here. Keep it short but clear.")
                        .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .show();

This is how it looks on the screen:

Android Material Dialog Basic
Android Material Dialog Basic

Let’s compare it with the old alert dialog:

Android Material Dialog Old Alert
Android Material Dialog Old Alert

Surely, the new MaterialAlertDialog looks much better.

AlertDialog loses its content on configuration change. Hence it is recommended to use AppCompatDialogFragment. But for the sake of simplicity of this tutorial, we’ll stick with MaterialAlertDialog.

Styled Buttons

We can style the buttons of MaterialAlertDialog since they are just MaterialButtons. Setting outline button/borderless button, ripple effects etc. Let’s see an example:

<style name="AlertDialogTheme">
        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
    </style>

    <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@color/colorPrimaryDark</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">14sp</item>
    </style>

new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();
Android Material Dialog Button Styled
Android Material Dialog Button Styled

Cut Shaped Dialog

We can set shapes on Material Dialogs now! Let’s style one as cut shaped by inheriting from the ShapeAppearance style.

<style name="CutShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/CutShapeAppearance</item>
    </style>

    <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

Now just set the style in the builder constructor:

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();
Android Material Dialog Cut Shaped
Android Material Dialog Cut Shaped

Round Shaped Dialog

<style name="RoundShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/RoundShapeAppearance</item>
    </style>

    <style name="RoundShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

Setting the above style in the Dialog Builder constructor from the previous code snippet gives us this:

Android Material Dialog Round Shaped
Android Material Dialog Round Shaped

Aren’t these designs so drool-worthy!

Custom Font Dialog

Lastly, we can set custom font families on the button and title as well as shown below:

<style name="CustomFont" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="fontFamily">@font/amatic</item>
        <item name="android:textAllCaps">false</item>
    </style>

This gives us a completely new look dialog as shown below:

Android Material Dialog Typography
Android Material Dialog Typography

That brings an end to this tutorial. The font used above is available in the source code attached below.

AndroidMaterialComponentDialog

Github Project Link


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?