Material Dialog Android Library Demo

Animated Material Dialog — Android 📱 😍🎨

Hello everyone, in this article we will learn to implement animated, 😍beautiful, rich and stylish🎨 Material Dialog in the app using MaterialDialog android library.

Screenshot of Google Files App.

Have you ever seen this dialog in Google Files app? When I saw it, I was impressed by its structure and design and curious about its implementation and how it works! Then I decided to develop a library for it which will help many developers to implement such dialog easily in their Android apps. After this, I started work on it and finally, I successfully developed library — MaterialDialog 😍.

👉 About MaterialDialog Library :

PatilShreyas/MaterialDialog-Android

MaterialDialog library is built upon Google’s Material Design library. This API will be useful to create rich, animated, beautiful dialogs in Android app easily. This library implements Airbnb’s Lottie library to render After Effects animation in the app. Refer this for Lottie documentation.

👇 Library provides two types of Dialogs :

1️⃣ Material Dialog:

Animated Material Dialog

This is basic material dialog which has two material buttons ( Same as Android’s AlertDialog ) as you can see in the image. For e.g. Here you can see the animated Material Dialog with Animation, Title, Message and two buttons.

2️⃣ Bottom Sheet Material Dialog:

Animated Bottom Sheet Material Dialog

This is Bottom Sheet material dialog which has two material buttons which is created at bottom of device as you can see in the image. For e.g. Here you can see the animated Bottom Sheet Material Dialog with Animation, Title, Message and two buttons.

💻 Getting Started :

This project is available on GitHub and you can clone this repository. https://github.com/PatilShreyas/MaterialDialog-Android.

Implementation of this Library is so easy. This library is developed as similar as AlertDialog of Android so that structure of implementation is also similar.

* Prerequisite:

i. Gradle

In Build.gradle of app module, include these dependencies. If you want to show animations, include Lottie animation library.

dependencies {
    // Material Dialog Library
    implementation 'com.shreyaspatil:MaterialDialog:2.1'
    // Material Design Library
    implementation 'com.google.android.material:material:1.0.0'
    // Lottie Animation Library
    implementation 'com.airbnb.android:lottie:3.3.6'
}

ii. Set up Material Theme

Setting Material Theme to the app is necessary before implementing Material Dialog library. To set it up, update styles.xml of a values directory in the app.

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <!-- Customize your theme here. -->
        ...
    </style>
</resources>

After these main two steps, we are done. Remaining work is so easy. Now, we are ready to create MaterialDialog instance.

iii. Customize Dialog Theme (Optional)

If you want to customize dialog view, you can override the style in styles.xml as below.

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/montserrat</item>
        <!-- Customize your theme here. -->
        <item name="material_dialog_background">#FFFFFF</item>
        <item name="material_dialog_title_text_color">#000000</item>
        <item name="material_dialog_message_text_color">#5F5F5F</item>
        <item name="material_dialog_positive_button_color">@color/colorAccent</item>
        <item name="material_dialog_positive_button_text_color">#FFFFFF</item>
        <item name="material_dialog_negative_button_text_color">@color/colorAccent</item>
    </style>

Create Dialog Instance

As there are two types of dialogs in the library. Material Dialogs are instantiated as follows.

i. Material Dialog

MaterialDialog class is used to create Material Dialog. Its static Builder class is used to instantiate it. After building, to show the dialog, show() method of MaterialDialog is used.

Creating MaterialDialog and showing it.

After running this code, its output will be as…

Simple Material Dialog

ii. Bottom Sheet Material Dialog

BottomSheetMaterialDialog class is used to create Bottom Sheet Material Dialog. Its static Builder class is used to instantiate it. After building, to show the dialog, show() method of BottomSheetMaterialDialog is used.

Creating BottomSheetMaterialDialog and showing it.

After running this code, its output will be as…

Simple Bottom Sheet Material Dialog

🎞 Showing Animations:

Animated Material Dialogs. Material Dialog at left and Bottom Sheet Material Dialog at right.

Animations in this library are implemented using Lottie animation library. You can get free animations files here. You can find varieties of animation files on https://lottiefiles.com. *.json file downloaded from LottieFiles should be placed in android project. There are two ways to place the animation file (*.json).

For example, here delete_anim.json animation file is used to show file delete animation.

i. Using Resource File

Downloaded *.json file should be placed in raw directory of res.

In code, setAnimation() method of Builder is used to set Animation to the dialog. Its prototype is as follows: setAnimation(int resourceId) .

Resource file should be passed to the method. e.g. R.raw.delete_anim.

Adding animation using Resource (raw) file.

ii. Using Asset File

Downloaded *.json file should be placed in asset directory.

In code, setAnimation() method of Builder is used to set Animation to the dialog. Its prototype is as follows: setAnimation(String fileName) .

Adding animations using the Asset File.

iii. Getting LottieAnimationView

To get View of Animation for any operations, there is a method in Material Dialogs which returns LottieAnimationView of dialog.

LottieAnimationView animationView = mDialog.getAnimationView();
// Do operations on animationView

◀️ Dialog State Listeners

There are three callback events and listeners for Dialog.

Following are interfaces for implementations:

• OnShowListener() - Listens for dialog Show event. Its onShow() is invoked when dialog is displayed.
• OnCancelListener() - Listens for dialog Cancel event. Its onCancel() is invoked when dialog is cancelled.
• OnDismissListener() - Listens for dialog Dismiss event. Its onDismiss() is dismiss when dialog is dismissed.

🎉 Hurrah!!! As thus, we have successfully implemented and demonstrated the use of MaterialDialog Android library. If you have any questions, suggestions and want any help you can contact me on details given at the end of the article.

Thank You! 😃

If you need any help get in touch with me on

• Facebook
• Twitter
• LinkedIn
• GitHub
• Personal Site.
• GitHub Repository (Material Dialog) :

PatilShreyas/MaterialDialog-Android

• Website :

Shreyas Patil - Android Developer, Web Developer, UI/UX Designer