Add Lottie animations to a Pepper QiSDK app

Make your pepper app beautiful in 15 minutes
Add Lottie animations to a Pepper QiSDK app

This article presents the steps to add a Lottie animation to your project. It takes 15 minutes to include it in your project: 4 files to modify, 1 dependency to add, 3 lines of code, 2 layout views, 2 files to upload. That’s it!

Introduction

Before there were animated gifs, now there are Lotties. Airbnb created the Lottie library that allows adding animations to your Android apps.

AirBnB lottie demo
AirBnB lottie demo

At SoftBank Robotics Europe, we like Lottie very much (you can read the article dedicated to lottie animation tool).
Adding an existing Lottie animation to your pepper app is really simple and can be done in 15 minutes following this short tutorial.
You can find existing animations on lottiefiles.com website (apparently you can even edit the animation with the Bodymovin Editor on the site, I didn’t try).
Here we are not entering the details of how to build a Lottie. We just explain how to integrate existing ones to an app for Pepper QiSDK.
Let’s go and add two animations to an android app. We use Kotlin. The animation can be added in the layout directly or from code. Let’s see how to.

Elements involved in your project:

  • Gradle file
  • Assets folder
  • Layout ActivityMain.xml
  • Kotlin class MainActivity.kt

How-to

0/ Create an app

  • Create a new robot application (no details as this tutorial expects you to know, if not refer to the Getting started tutorial) and choose Kotlin as the default language for your project.

1/ Declare dependencies

First of all, you need to add the Lottie library dependency to your configuration:

  • In the dependencies section add the following entry:
implementation 'com.airbnb.android:lottie:2.7.0'

View of the app module gradle file content
View of the app module gradle file content

2/ Download existing Lottie animations

You can download two animations from lottiefiles.com or use your own if you have any Lottie animations.

  • Go to lottiesfiles.com site.
  • Login (you can use your google account to create an account and connect quickly).
  • Select two animations and download them. They are in zip format, unzip them. You’ll get two JSON files.
  • Rename your two animations files to “animation1.json” and “animation2.json” for example.

For this tutorial we chose:

3/ Add the animation files to your project

  • Add the two JSON files you to the “assets” folder of your app;

Content tree of the app
Content tree of the app

The “assets” folder should exist in a pepper app otherwise create it in “src/main” directory.

4/ Edit the layout

Now we are going to edit the layout “activity_main.xml”

  • To add two LottieAnimationView views in file “activity_main.xml” use the layout text editor of Android Studio and copy paste the following lines to it:
> <?xml version="1.0" encoding="utf-8"?>
> <android.support.constraint.ConstraintLayout
>       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:layout_width="match_parent"
>       android:layout_height="match_parent"
>       tools:context=".MainActivity" android:orientation="vertical">
>
>   <com.airbnb.lottie.LottieAnimationView
>           android:id="@+id/av_from_layout"
>           android:layout_width="match_parent"
>           android:layout_height="wrap_content"
>           app:lottie_autoPlay="true"
>           app:lottie_loop="true"
>           app:lottie_fileName="animation1.json"
>           app:layout_constraintBottom_toBottomOf="parent"
>           app:layout_constraintLeft_toLeftOf="parent"
>           app:layout_constraintRight_toRightOf="parent"
>           app:layout_constraintTop_toTopOf="parent"
>   />
> 
>   <com.airbnb.lottie.LottieAnimationView
>           android:id="@+id/av_from_code"
>           android:layout_width="match_parent"
>           android:layout_height="wrap_content"
>           app:layout_constraintBottom_toBottomOf="@+id/av_from_layout"
>           app:layout_constraintLeft_toLeftOf="parent"
>           app:layout_constraintRight_toRightOf="parent"
>           app:layout_constraintTop_toTopOf="parent"
>   />
> </android.support.constraint.ConstraintLayout>

The view with id av_from_code will be updated from the kotlin file.

The view av_from_layout is defined in the layout itself.

5/ Edit the code

Now let us edit the kotlin MainActivity.kt file.

  • In the kotlin “MainActivity.kt” file add the following lines in method onCreate to update the view av_from_code defined in the layout:
> ...
> 
> // add this import
> import kotlinx.android.synthetic.main.activity_main.*
> ...
> 
>   override fun onCreate(savedInstanceState: Bundle?) {
>       Log.i( TAG, "onCreate called")
>       super.onCreate(savedInstanceState)
>       QiSDK.register(this, this)
>       setContentView(R.layout.activity_main)
> 
>       // added lines
>       av_from_code.setAnimation("animation2.json")
>       av_from_code.playAnimation()
>       av_from_code.loop(true)
>   }
> 
> ...

6/ Test your app

On the simulator or on the robot, run it now! On you emulator the result looks like this:

Animation view on the emulator
Animation view on the emulator

That’s it!

Green Guy with glasses
Louis-Gabriel POUILLOT