Lottie animation

How to add Lottie Animation in the Android App and Make Professional

by

If you want to add a very beautiful animation in your Android Studio project, then today I am going to tell you about Lottie animation, and how you can easily add Lottie animation in your Android Studio project.

The use of Lottie animations makes our Android application look very professional! Even today, many developers use the same old methods inside the application, due to which the application looks quite boring, but you can give it a very professional look by using Lottie animation in your application.

What is Lottie Animation?

Lottie’s animation is a type of animation format and rendering library developed by Airbnb. It allows developers to add complex animations to their mobile and web applications using JSON files exported from Adobe After Effects. Lottie animations are vector-based, meaning they can scale without losing quality, and they are designed for efficient rendering on various devices.

The Lottie library provides APIs for developers to easily integrate and control animations within their apps, enhancing user experiences with visually appealing and interactive elements.

How to add Lottie animations to an Android Studio project: Step-by-Step

Lottie animation

Let us see step-by-step how you can add Lottie’s animation to your Android Studio project. First of all, you have to open your project inside Android Studio. After that, you have to follow these steps!

Step 1: Add Lottie’s Dependency:- First, open your build.gradle file (either the project-level or the app-level one) and add the Lottie dependency in the dependencies section:

dependencies {
implementation 'com.airbnb.android:lottie:4.3.1'
}

Sync your project to ensure the new dependency is downloaded and added to your project.

Step 2: Add Lottie Animation File:- Next, download a Lottie’s animation file in JSON format. You can create your own animations using Adobe After Effects or find pre-made animations on websites like LottieFiles (https://lottiefiles.com/). Place the JSON file in the res/raw directory of your Android project. If the raw directory doesn’t exist, create it.

Step 3: Add LottieView to Your Layout:- In your XML layout file (e.g., activity_main.xml), add a com.airbnb.lottie.LottieAnimationView the element where you want the animation to appear. For example:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_autoPlay="true"
    app:lottie_fileName="your_animation.json"
    app:lottie_loop="true" />

Replace your_animation.json with the actual filename of your Lottie animation JSON file.

Read More:- Android WebView: How to handle orientation change in Android Studio

Step 4: Initialize Lottie Animation in Your Activity/Fragment:- In your Java/Kotlin file (e.g., MainActivity.java), initialize the LottieAnimationView and load the animation:

import com.airbnb.lottie.LottieAnimationView;

public class MainActivity extends AppCompatActivity {

    private LottieAnimationView animationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        animationView = findViewById(R.id.lottieAnimationView);
        animationView.setAnimation("your_animation.json");
        animationView.playAnimation();
        animationView.loop(true);
    }
}

Step 5: Run Your App:- Finally, run your Android app on a device or emulator. You should see the Lottie animation playing in your app wherever you added the LottieAnimationView.

Conclusion

You saw in this article how you can give a professional look to your Android Studio project by adding Lottie animation to it and with this you can make it user-friendly and increase the user time on your application.

Leave a Comment