Animate with Lottie and Android

Posted By : Sunidhi Sharma | 22-Jun-2019

android

Overview

There is no stretch in saying that Android applications are widespread. With a huge developer community and support from Google, anyone can see the attraction of becoming an Android developer. For each and every type of application, there are several options available for users to choose. So, the challenge is: how to make them stick to your application only. The answers can be many, but the one which requires the least amount of brainstorming is making your UI IMPRESSIVE(yes, I wrote it in capitals to enunciate its importance). One way of doing so is introducing the Animation. Animations can provide your applications a richer look and feel.

There are a lot of ways in which one can animate their Android applications. This blog demonstrates how the Lottie library by AirBNB can help you achieve that. Also, adding it to your project is really simple. LottieFiles has a lot of free animations that can be downloaded and loaded into the project.

Requirement

1. Android Studio v3 or above.

2. Android Gradle version 3.4 or above.

3. A new Android Project with Kotlin Support.

Show me the Code!

Step 1: Getting Started

Start a new project with an empty activity. In order to start, we start by importing the library in our gradle. Add the latest version of the library to your Gradle dependencies. As of the writing of this article, the current version of Lottie is 2.8.0.

implementation ‘com.airbnb.android:lottie:2.8.0’

Next, we’ll add the animations to the assets folder created in our projects. Go to the Project mode of your project and right click on your app folder, and from there navigate to src/main. Now, create a folder and name it ‘assets’.

Step 2: Adding the Animation to your Activity's xml file

First, add a LottieAnimationView to your activity_main.xml. In order to attach the animation to the view, name the lottie fileName to the name of an animation in your assets folder. Set the lottie_autoPlay and lottie_loop attributes to ‘true’.

AutoPlay simply starts the animation, instead of showing it on the screen as a static view. Loop keeps the animation in a loop. The code below shows an example of how your xml file should look like:

<?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:orientation="vertical">

    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_fileName="emoji.json"/>

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/av_from_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Step 3: Adding the Animation to the Code

Setting the animation from code is super easy. Call setAnimation on ‘av_from_code’ and pass in the second animation’s file name in your assets folder then call the playAnimation on ‘av_from_code’ to start the animation. Finally, add the loop to the view ‘av_from_code’, and set it to true. The following code demonsatrtes the same:

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       av_from_code.setAnimation("drink.json")
       av_from_code.playAnimation()
       av_from_code.loop(true)
      
   }
}

Conclusion

That’s it! A few lines of code, now run the project! This blog just discussed the Lottie library and how one can use it in their Android Project. Till then, stay animated.