Custom Alert Dialog Box with Lottie Animation in Kotlin
In this tutorial we will see an Custom Alert Dialog Box with some Animation and a static dialog box.
Step 1: First Create a project, for help you can see previous tutorial Tic Tac Toy app.
Step 2: I am using Dependency Lottie for animation and Constraint Layout with Android X support for them add below lines in app: build.gradle.
implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta2’
implementation ‘androidx.appcompat:appcompat:1.0.0’
implementation ‘com.airbnb.android:lottie:3.0.7’
For further reference in Lottie animation follow its GitHub project Lottie android.
Step 3: For simplicity i am using a Button to show Alert Dialog Box. Now Create a new Activity go to java or res folder right click on it New -> Activity -> Empty Activity. Name it AlertDialogActivity.
Creating new Activity:
Step 4: Real Coding start open activity_alert_dialog.xml file, write below code for creating two new button.
Now Open AlertDialogActivity.kt file write code for creating a custom alert dialog box.
In this file when person click btn_alert it show a custom dialog and btn_alert_custom will provide a static custom alert dialog.
Static custom dialog is used to decrease code as it can be called by one line in any activity. AlertDialogUtility is file name and alertDialog is static method which will be created later.
Now time to Create a new layout file for custom dialog. Go to res -> layout (right click) -> New -> Layout Resource File. Name it dialog_layout.
In this file two Constraint layout used, one is parent to make background transparent and child layout for setting the elements. Here i have made Text view, edit text, button, lottie animation. When user click on “OK” button can see the text in Toast which is entered in edit text.
Lottie Animation is a library/3rd party element which can be used in multiple ways. lottie_autoPlay attribute is used to make animation play automatically. lottie_fileName=”right.json” attribute is the json file for animation, stored in assets folder. JSON file can be downloaded from Lottie website in Animation section, there are lot of animation you can try as per requirement. Just copy pase the animation file in assets folder.
Assets folder: App -> New -> Folder -> Assets Folder.
In this file Transparent colour Background is 00ffffff, Drawable background_white is layout file to make white background. Go to res -> drawable (right click)-> New -> Drawable resource file. Name it background_white.
In this file colour is used white and corners radius is 16dp.
Now You can run app by hiding/commenting second button code. Click on “Alert Dialog” button you can see custom alert dialog with animation.
For Static custom dialog you need some more code.
Create new Kotlin file name it AlertDialogUtility.
In this file using i am setting text and animation by the method call from the calling file or main file. I am using lottie_anim.setAnimation(“walkthrough.json”) to set animation by the kotlin file which makes it easy to change animation as per the use.
loop for stating animation again and again in a loop. playAnimation to play animation.
It has a different layout you can use previous layout dialog_layout or create a new layout file name it alert_custom_layout.
Now code is complete when run app and click on “Alert Custom Dialog” you can see a static dialog.
Basic idea behind static custom dialog box is we need only one line code in any file we need a dialog box.
I hope it will help you create a custom dialog box, please provide feedback so, i can improve my tutorial and provide me suggestion for any topic you need tutorial.
