Android Lottie load Json Adobe After Effect Animation Tutorial

Airbnb has released a new library “Lottie” to render an animation by loading the JSON file or load from the network. However, there have several ways to create and render the animation in android. In the old post, I had written on how to adding animation in your project if you looking for another approach. Lottie available to use for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile. You need to design an animation by using Adobe After Effects in order to add the animation effect to your Android project. There have many open source Adobe After Effect files for Lottie available to download and this is the link. In this tutorial, I will tell you on how to use Android Lottie load JSON Adobe After Effect Animation in your local project.

Creating a New Project

1. Open Android Studio IDE in your computer.
2. Create a new project and Edit the Application name to “LottieAnimationExample”.
(Optional) You can edit the company domain or select the suitable location for current project tutorial. Then click next button to proceed.
3. Select Minimum SDK (API 15:Android 4.0.3 (IceCreamSandwich). I choose the API 15 because many android devices currently are support more than API 15. Click Next button.
4. Choose “Empty Activity” and Click Next button
5. Lastly, press finish button.

Add lottie library in gradle

Open build.gradle  (module:app) and add lottie library in your dependency section. After that click sync.

compile 'com.airbnb.android:lottie:2.0.0'

Add a new assets folder

Right click the app module > new > Folder > Assets Folder. After that add your Adobe After Effects JSON file in this assets folder. You can download from the following link.

Edit activity_main.xml layout

After that, open your activity_main layout and add lottie animation view. This view will load a JSON file called “load_space.json” from your assets folder. Make sure the name is correct.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.questdot.lottieanimationexample.MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_autoPlay="true"
        app:lottie_fileName="load_space.json"
        app:lottie_loop="true"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" />

</android.support.constraint.ConstraintLayout>

Edit MainActivity.java class

Go to mainactivity class and edit it to the below sample source code. You can customize the speed and color of your animation.

import android.animation.ValueAnimator;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.airbnb.lottie.Cancellable;
import com.airbnb.lottie.LottieAnimationView;
import com.airbnb.lottie.LottieComposition;

public class MainActivity extends AppCompatActivity {

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

        final LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);



// Custom animation speed or duration.
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
                .setDuration(10000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animationView.setProgress((Float) animation.getAnimatedValue());
            }
        });
        animator.start();

      //  animationView.cancelAnimation();

//custom color
       PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);
        animationView.addColorFilter(colorFilter);
        animationView.addColorFilterToLayer("hello_layer", colorFilter);
        animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);
       // animationView.clearColorFilters();

    }
}

Run Your Project

Finally, you can run your project and test out the Lottie animation.

(Android Lottie load Json Adobe After Effect Animation)

Source Code