August 7, 2018 - No Comments!

Amazing in-app animations with Lottie library

 

Everyone knows that with creating a beautiful and eye-catching app comes a lot of UI/UX designer’s work. Amazing animations and graphics play an important role in convincing customers to dedicate their time to an app.

So the first thing is to design such app graphics but the second issue is to implement it in our application by a mobile developer.

Is it really that though?   

You may have already asked yourself a question: “Well, there has to be an easy way to implement such things, right?”

YES! Today I'll introduce to you the astonishing library - Lottie. It was created by an AirBnb team and developed to simplify adding animations to your application. With Lottie you can make your app more vibrant with only few lines of code.

With this short tutorial, you will learn how it can be done in few simple steps. I will show you how to add it to the Android app. It's also available in iOS, web and react native.

The very first steps

At first, you need to add a Lottie library to your module build.gradle file in the dependencies section. At this moment, the 2.5.5 version is the newest one.

You can always check the latest version at this site - https://github.com/airbnb/lottie-android

Dependencies {
  …
  implementation 'com.airbnb.android:lottie:2.5.5’
}

The next step is to add a LottieAnimationView in your layout xml file.

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottieAnimationView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:lottie_autoPlay="true"
  app:lottie_loop="true" />

As you may have thought already.. “I have a library, a special view to show this animation, but.. where the heck is the particular ANIMATION?!” Here comes the main part.

Preparing the main part - animation

You can create your own animation by using Adobe AfterEffects + Bodymovin plugin to export it to JSON file. But it's a more advanced process, usually created by graphic designers. Today, we’re going to focus on using premade JSON files from https://www.lottiefiles.com

It's a very helpful page, created to share animations with other people. You can use it as long as you want, but remember to mention the author in the ‘about’ section in commercial app.

Let's take a look at this animation of a man riding a motorcycle.

https://www.lottiefiles.com/29-motorcycle

Don’t ask why.. it’s just eye-catching 🙂

Adding animation to the project and making it work  

There are two ways of adding your desired animation to make it work (it is added in the layout xml file):

  • by using app:lottie_fileName="motorcycle.json"
  • or app:lottie_rawRes="@raw/motorcycle”.

I recommend you to use the second one, then you'll be able to use a static reference to this file, not just by using it’s name.

To make an animation loop and auto play on creating an activity, I' am adding these two lines of code to the activity_main.xml file:

app:lottie_autoPlay="true"
app:lottie_loop="true"

So, my xml file looks like this below:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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" 
  tools:context=".MainActivity">
 
  <com.airbnb.lottie.LottieAnimationView 
    android:id="@+id/lottieAnimationView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:lottie_autoPlay="true" 
    app:lottie_loop="true" 
    app:lottie_rawRes="@raw/motorcycle" /> 
</FrameLayout>

And MainActivity.kt is as simple as it can be:

class MainActivity : AppCompatActivity() {

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

Now, we can click “run project” and see how much we are talented! 🙂

Helpful hints 

If we won’t add an autoPlay attribute to our layout xml file, the animation won’t start immediately after creating the view. We are able to start it at any time we want, by adding some code to our MainActivity.kt file.

lottieAnimationView.playAnimation()

The above line allows us to achieve the same thing as the app:lottie_autoPlay="true" line of code in xml file. It's really helpful when we don’t want to start the animation immediately, but later on.

The same thing happens with a loop attribute. It decides if our animation will loop endlessly. We could also remove it and achieve the same by kotlin code.

lottieAnimationView.repeatCount = ValueAnimator.INFINITE

If we use ValueAnimator.INFINITE, it loops infinitely. But what if we want to loop it only 3 or 5 times and stop? Nothing easier! Instead of ValueAnimator.INFINITE, you can just add an Integer value, defining number of repeating count. So it will look like the code below:

lottieAnimationView.repeatCount = 3

What if you want to run your animation for a certain amount of time? Let’s say, for 5 seconds? Just add the below code with handler, which after 5 seconds (value in code is in milliseconds) will pause your animation. It's that simple!

Handler(Looper.getMainLooper()).postDelayed({
      lottieAnimationView.pauseAnimation()
    }, 5000)

The same steps are required to start it after some time, by replacing lottieAnimationView.pauseAnimation() with lottieAnimationView.startAnimation().

MainActivity.kt file with stopping animation after 5 seconds:

class MainActivity : AppCompatActivity() {

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

    lottieAnimationView.playAnimation()
    lottieAnimationView.repeatCount = ValueAnimator.INFINITE
    Handler(Looper.getMainLooper()).postDelayed({
      lottieAnimationView.pauseAnimation()
    }, 5000)
  }
}

Listening our animations 

Another cool option is adding AnimatorListeners to the animations. Let’s take a look at another animation – a favourite icon. You like something sooo.. you want to show it! Or maybe you just want to save something for later. What about making it more vivid with Lottie? : )

I choose this one - https://www.lottiefiles.com/72-favourite-app-icon - it’s beautiful and makes a good interaction with users.

At first, let’s replace app:lottie_rawRes="@raw/motorcycle" with app:lottie_rawRes="@raw/favourite_app_icon". Another step is to remove the looping from animation and auto play, because we don’t want to run it on start. That’s how LottieAnimationView looks now:

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottieAnimationView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:lottie_rawRes="@raw/favourite_app_icon" />

When do we want to run it? I’m going to implement it while clicking on  the animation area. It’s handy and intuitive.

In the second step, I’m removing the previous code, which was responsible for stopping the animation after some time.

Now my MainActivity.kt file looks like the one below:

class MainActivity : AppCompatActivity() {

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

    lottieAnimationView.setOnClickListener {
      if (lottieAnimationView.progress == 0f) {
        startAnimation()
      } else {
        lottieAnimationView.progress = 0f
      }
    }
  }

  private fun startAnimation() {
    val animator = ValueAnimator.ofFloat(0f, 1f).setDuration(500)
    animator.addUpdateListener { valueAnimator ->
      lottieAnimationView.progress = valueAnimator.animatedValue as Float
    }
    animator.start()
  }
}

As you can see, I've added a click listener to our animation view, where I am checking if the progress of animation equals 0 or something else (eg. 100). If it’s a zero (the star is unchecked), I’m running the startAnimation() function. In other case (the star is checked) – it's getting unchecked. That’s the “hard” mechanism of checking and unchecking the star : ) It’s not difficult!

In the startAnimation() method, we are initialising a ValueAnimator object, which changes some value from the starting point to an end, in defined time. In my example, it's defined to run for 600 milliseconds, you can change it as much as you want 🙂 One can also change the starting and the ending point. If you want, you can change values in parentheses in ValueAnimator.ofFloat() function. Let’s assume that your idea is to stop the animation in the middle – easy peasy!

Just write

ValueAnimator.ofFloat(0f, 0.5f)

..and the rest of the previous code.

Finally, we are adding an update listener to the animator, which with every step of changed value updates the value of progress in our lottie animation. The last step is to run start() method on animator and that’s all! You’ve just mastered the ability to like/unlike something in your future app.

Wasn’t it simple? I think working with lottie animations can be fun! There are lots of other features and moments in which it could help us save a bit of our precious time! 🙂

Happy coding!

Author: Bartłomiej Rolek, Android Developer

Published by: admin in blog

Leave a Reply