Image for post
Image for post
Material Dialog Android Library Demo

Animated Material Dialog — Android 📱 😍🎨

Shreyas Patil
Jun 13, 2019 · 5 min read

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

Image for post
Image for post
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 :

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:

Image for post
Image for post
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:

Image for post
Image for post
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…

Image for post
Image for post
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…

Image for post
Image for post
Simple Bottom Sheet Material Dialog

🎞 Showing Animations:

Image for post
Image for post
Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post

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

  • Website :

MindOrks

Our community publishes stories worth reading on Android…

Shreyas Patil

Written by

📱Android Developer 💻Organizer @KotlinMumbai, 👨‍💻SWE @ScaleReal. More info: http://shreyaspatil.dev

MindOrks

MindOrks

Our community publishes stories worth reading on Android Development

Shreyas Patil

Written by

📱Android Developer 💻Organizer @KotlinMumbai, 👨‍💻SWE @ScaleReal. More info: http://shreyaspatil.dev

MindOrks

MindOrks

Our community publishes stories worth reading on Android Development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app