Android Animations with Lottie

Airbnb’s Lottie animation framework uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.

This quick tutorial will show you how to add a simple Lottie animation to your Android application.

To get started, head over to lottiefiles.com and download this animation JSON file: https://www.lottiefiles.com/433-checked-done. We are going to use this green check to indicate we have clicked on an item in a RecyclerView.

Let’s then create a new project in Android Studio with the “Empty Activity” template (Min API 21). I’ve named the MainActivty, LottieActivity for the sake of this example.

First thing we can do is add the checked_done_.json to our assets directory (path: app/src/main/assets) — you will need to create this directory in your new project.

We can then compile the Lottie / RecyclerView dependencies in our build.gradle (Module: app) file and sync the project:

dependencies {  
compile 'com.airbnb.android:lottie:2.2.0'
compile 'com.android.support:recyclerview-v7:25.3.1'
}

To set up a simple RecyclerView, you can follow the Android developer docs for creating lists and cards: https://developer.android.com/training/material/lists-cards.html

The XML layout file used for our ViewHolders and containing the LottieAnimationView looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/listText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16sp"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="@color/colorPrimary"
android:layout_centerVertical="true"
tools:text="Example List Text"/>

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottieAnimationView"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginEnd="16dp"
android:layout_alignParentEnd="true"
app:lottie_fileName="checked_done.json"/>


</RelativeLayout>

And all of the Lottie animation logic is going to be in the RecyclerView.ViewHolder:

class ListViewHolder extends RecyclerView.ViewHolder {

TextView listText;
private LottieAnimationView animationView;

ListViewHolder(View itemView) {
super(itemView);

listText = (TextView) itemView.findViewById(R.id.listText);
animationView = (LottieAnimationView) itemView.findViewById(R.id.lottieAnimationView);

itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startCheckAnimation();
}
});
}

private void startCheckAnimation() {
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f).setDuration(500);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
animationView.setProgress((Float) valueAnimator.getAnimatedValue());
}
});

if (animationView.getProgress() == 0f) {
animator.start();
} else {
animationView.setProgress(0f);
}
}
}

Using a ValueAnimator, we can set the progress of the LottieAnimationView. The animation we picked works nicely because, when set to a progress 0f, it shows a grey circle to indicate “unselected.”

Once we have everything set up, it should look something like this:

*Gif Frame Rate Slowed*