Lottie — Using it in Android

Lottie is a wonderful library provided by the devs from AirBnb. It provides a fantastic way to animate vector drawables. With this an endless opportunity is opened up to the other developers to spice up their application.

I have implemented a bottom navigation control using Lottie to animate the menu icons and provide some fun to it. The entire code has been shared here on GitHub:

wwdablu/LottieBottomNav

You can follow this story and the code along to get an understanding of it. For your reference, the readme file contains a GIF and also inside the demo folder the video is present which you can play and watch.

Gradle please!

First and foremost, we need the engine which would drive this animated vector drawables, which is Lottie itself. In gradle, you can specify:

implementation 'com.airbnb.android:lottie:2.8.0'

Note that version 2.8.0 required androidx packages to be used. If otherwise, then you can downgrade to version 2.6.0 for example.

What is a Lottie?

So before we being, we need to understand the Lottie files. They are Adobe After Effects animations exported as JSON with Bodymovin. Once the JSON is obtained, it is the responsibility of the Lottie library to parse this JSON and render these animated drawables.

You can visit the following site to get many Lottie files and try them out.

LottieFiles - Free animation files build for Lottie, Bodymovin

LottieAnimationView — Useful methods provided

The view component which is responsible to displaying the Lottie animation is LottieAnimationView. This view takes in the name of the Lottie file to be used and when displayed, it would display the animated drawable.

There are several method provided by this class (which is basically an ImageView). These can be either set from XML and/or can be called from Java/Kotlin.

• loop — This specifies whether the animation will play in a continuous loop.
• progress — Think of it as a slider for the video. The progress (0 to 100) can be set for the animation.
• playAnimation — If autoPlay is false or animation is paused, can be used to start playing the animation.
• pauseAnimation — Pause the animation

Animation listeners (Animator.AnimatorListener ) can be added on the LottieAnimationView to get updates about the state of the animation.

Where to keep the Lottie files?

The Lottie files can be kept in either assets or in the raw folder inside android res folder. The library provides separate method to specify the name of the file and the process to load them is handled by the library.

Usage

We will explain the usage using the LottieBottomNav library that we have created. First of all, LottieBottomNav does not extend BottomNavigation view, rather it extends LinearLayout. The reason, we cannot use Lottie on the BottomNavigationView.

public class LottieBottomNav extends LinearLayout

We mark the orientation as horizontal and child view’s gravity as center so that it is displayed side by side and on the center on the linear layout.

The layout uses MenuItems to display the icons and the text. The layout is defined as following:

So each of the menu items contain the LottieAndroidView (responsible for showing the Lottie) and a TextView (responsible for showing the name of the menu item).

Creating Menu Items

Using MenuItemBuilder, a MenuItem can be created. It provides several options to configure the menu item based on the selected and unselected state.

Now to display the text in the menu item, we need to create an instance of the FontItem. In here we can customize the text component. We can also provide a SpannableText instead of a simple string.

From example, in the above sample, the menu item is configured to display the text color based on the selection state.

The other way to do is, clone an existing menu item and then configure only the required properties. Note the tag property is not cloned or copied over.

Setting up LottieBottomNav

Once all the menu items to be displayed are created we need to add them to an ArrayList and then pass it by calling setMenuItemList on the bottom nav. This would create and display the menu items. Note, that the menu items are equally spaced and hence, the more the number of items, the more clumsy it would look. The maximum number sweet spot is 4.

list = new ArrayList<>(4);
list.add(item1);
list.add(item2);
list.add(item3);
list.add(item4);
bottomNav.setCallback(this);
bottomNav.setMenuItemList(list);        bottomNav.setSelectedIndex(0);

Callback Listeners

There are four (4) callback listeners which are provided.

void onMenuSelected(int oldIndex, int newIndex, MenuItem menuItem);    void onAnimationStart(int index, MenuItem menuItem);
void onAnimationEnd(int index, MenuItem menuItem);
void onAnimationCancel(int index, MenuItem menuItem);

Lottie is a very helpful library and using the animations we can enhance the usability of the application without using much text and images. Tryout the Lottie bottom navigation library and let me know about your feedback.

Updated [Nov 18, 2019]

The new version released supports font customization and SpannableString for the text to be displayed on the component. It also fixes an issue related to the loop parameter.