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 or create them using the Adobe After Effect with plugins from Airbnb, check the documentation from LottieFiles.com 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

Adobe

AirBnB

Twitter

'I Build Software to Solve Problems': Noonies Nominee Amr Hesham

Android CodeView: How To Highlight Text And Where You Can Apply It

Read My Stories

Hire Me

Portfolio

Nominated for 2022 - Android Advocate of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Kotlin

Too Long; Didn't Read

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A New Android TreeView Implementation

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

A New Android TreeView Implementation

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps