A Beginners Guide to Creating a Dialogue with Lottie Animation in Android

Hello everyone, I am Amr Hesham a Software Engineer, I am interested in Android Development and Compiler Design, In this article, I will be talking about how to create dialogs in your app with Lottie animation files easily using the Lottie Dialog library.

But first, What is the Lottie animation file?

It’s a file that contains all the information needed by the Lottie library to render it, and you can download them from the official site LottieFiles.com or create them using the Adobe After Effect with plugins from Airbnb, check the documentation from lottiefiles.com/plugins/after-effects

Where are you using Lottie Dialog?

• Show a take picture dialog with 2 options camera and gallery.
• Show welcome message dialog.
• Show rating dialog.
• Show loading dialog.
• Show any information message dialog like show what current version features.
• Show any error message dialog like invalid login, invalid insert or update data.
• Show any warning message dialog like assert that the user wants to delete this item with 2 options delete, cancel.
• This list is just a few examples, don’t limit your mind and use it when you think it will help your design decision.

Now, let’s start implementing one of the examples which take picture dialog, we need to find which file we want to use and we have many options, we can download the file locally as a JSON file and put it on the raw directory, or from assets directory or we can load the animation just from the URL

Notice that if you want to load the animation from a URL you must put the internet permission on your manifest file.

<uses-permission android:name=”android.permission.INTERNET” />

After having our animation file, we need to add the Lottie Dialog library to our Android app.

Add the line below to your top level build.gradle

allprojects {     
    repositories {         
        maven { url "<https://jitpack.io>" }     
    }
}

and then add lines below to your app-level build.gradle, Please check the last version number from the Lottie Dialog repository

implementation 'com.github.amrdeveloper:lottiedialog:1.0.0'

Now let’s start building our dialog, suppose for example we want to create a take picture dialog that has two options, take a picture from the camera or load a picture from the gallery, so we need 2 actions buttons.

Let’s create the action buttons for our dialog first, our first one will be a Camera button with a click listener to do his job and you can customize it as you want.

Button takePictureAction = new Button(this);
takePictureAction.setText("Camera");
takePictureAction.setOnClickListener(v -> {});

Our second one will be Gallery.

Button loadPictureAction = new Button(this);
loadPictureAction.setText("Gallery");
loadPictureAction.setOnClickListener(v -> {});

Now we need to create a Lottie dialog with those two actions buttons and the Lottie animation file that we have.

LottieDialog dialog = new LottieDialog(this)
    .setAnimation(R.raw.animation)
    .setAnimationRepeatCount(LottieDrawable.INFINITE)
    .setAutoPlayAnimation(true)
    .setMessage("Take a Profile Picture")
    .addActionButton(takePictureAction)
    .addActionButton(loadPictureAction);

And then we can show it easily using the show method

dialog.show();

The end result will be like this.

This is just a simple example of what Lottie Dialog can do, but there are a lot of customization options, you can see the full documentation and examples from the library repository AmrDeveloper/LottieDialog.

You can find me on: GitHub, LinkedIn, Twitter.

Enjoy Programming 😋.

Also published on: https://itnext.io/how-to-create-a-dialog-with-lottie-animation-in-android-8f6f97ca2d6e