Lottie Android Example

Render After Effects animations natively on Android using this Great Library

https://github.com/airbnb/lottie-android

Let's see how to implement in android app to render after effects animations using json files.

Download any after effects animation file from this site or if you created on your own

https://www.lottiefiles.com


Step: 1
======

Add gradle file to your dependencies in your build.gradle file under app folder

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

like below

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.airbnb.android:lottie:2.2.5'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:26.1.0'
}

Step: 2
======

create an assets folder

Right click on main folder --> New  --> Folder --> Select assets folder --> Finish.

You need add after effects animation file in this assets folder.


Step: 3
======
create an activity and xml layout

package com.pratap.lottieexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        // you can load it programmatically
       /*
        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view_1);
        animationView.setAnimation("favourite_app_icon.json");
        animationView.loop(true);
        animationView.playAnimation();*/


        // if  you want cancel, you can use this
        // animationView.cancelAnimation();
    }
}

activity_main.xml
==================

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.pratap.lottieexample.MainActivity">


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="favourite_app_icon.json"
        app:lottie_loop="true" />


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="trophy.json"
        android:layout_margin="20dp"
        app:lottie_loop="true" />


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_3"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="cycle_animation.json"
        app:lottie_loop="true" />


</LinearLayout>

Screenshots
==========

 

Demo Video

==========