Lottie Animation Library: Introduction, Usage, Implementation Details, and Performance on Android

Lottie is an open‑source animation library from Airbnb that works on iOS, Android, and React Native. It parses animation data exported from Adobe After Effects (as JSON) and renders it natively, allowing developers to use a single animation file across multiple platforms without writing platform‑specific native code.

The library reduces development and maintenance costs because the same JSON file can be used on different screen sizes and devices, eliminating the need for multiple asset versions and complex native animation code.

How to Use Lottie

Lottie supports multiple platforms with a single JSON animation file:

Android – via the lottie-android project (minimum API 16).

iOS – via the lottie-ios project (minimum iOS 7).

React Native – via the lottie-react-native project.

Example for Android:

1. Add Dependency

dependencies {
  compile 'com.airbnb.android:lottie:2.1.0'
}

2. Place the JSON Animation File

Copy the exported react.json file into app/src/main/assets .

{
  "v": "4.6.0",
  "fr": 29.9700012207031,
  "ip": 0,
  "op": 141.000005743048,
  "w": 800,
  "h": 800,
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 0,
      "ty": 4,
      "nm": "center_circle",
      "ks": {...},
      "ao": 0,
      "shapes": [...],
      "ip": 0,
      "op": 900.000036657751,
      "st": 0,
      "bm": 0,
      "sr": 1
    }
    // ... other layers
  ]
}

3. Use LottieAnimationView in Layout

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

Impact of Using Lottie

Compatibility: Minimum API 16 on Android; lower versions need fallback animations.

APK Size: Adding Lottie increased method count by 1,084 and APK size by ~68 KB (based on a test package).

Note: LottieAnimationView extends AppCompatImageView , requiring the v7 support library. Developers can avoid this by using the source version of Lottie and letting the view inherit directly from ImageView , reducing APK size.

Tips and Advanced Usage

Load Animation from SD Card

StringBuilder sb = new StringBuilder();
BufferedReader br = new BufferedReader(new FileReader(new File(JSON_PATH + "react.json")));
String line;
while ((line = br.readLine()) != null) {
    sb.append(line);
}
JSONObject json = new JSONObject(sb.toString());
animationView.setAnimation(json);
animationView.loop(true);
animationView.playAnimation();

Load Images from SD Card

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
    @Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        try {
            FileInputStream fis = new FileInputStream(IMAGE_PATH + asset.getFileName());
            return BitmapFactory.decodeStream(fis);
        } catch (Exception e) {
            Log.e(TAG, "", e);
        }
        return null;
    }
});

Load Fonts from SD Card

animationView.setFontAssetDelegate(new FontAssetDelegate(){
    public Typeface fetchFont(String fontFamily) {
        return Typeface.createFromFile(FONT_PATH + fontFamily);
    }
});

Cache Animations

// Strong cache
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong);
// Weak cache
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak);

Implementation Principle

Lottie parses the JSON exported by the Bodymovin plugin, builds a LottieComposition object, and renders frames via LottieDrawable . The rendering pipeline is:

Parse JSON (version, frame rate, dimensions, assets, layers).

Load image assets ( LottieImageAsset ).

Parse layers (PreComp, Solid, Image, Null, Shape, Text).

During playback, a property animator produces a progress value (0‑1) which is passed to the composition layer.

Each layer updates its state based on the progress and draws onto a canvas.

The view invalidates and redraws the drawable.

JSON Parsing Example

static LottieComposition fromJsonSync(Resources res, JSONObject json) {
    Rect bounds = null;
    float scale = res.getDisplayMetrics().density;
    int width = json.optInt("w", -1);
    int height = json.optInt("h", -1);
    if (width != -1 && height != -1) {
        bounds = new Rect(0, 0, (int)(width*scale), (int)(height*scale));
    }
    long startFrame = json.optLong("ip", 0);
    long endFrame = json.optLong("op", 0);
    float frameRate = (float) json.optDouble("fr", 0);
    String version = json.optString("v");
    // ... create composition and parse assets, fonts, chars, layers
    return composition;
}

Layer Rendering Example

@Override
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    // Apply time remapping, stretch, and start offset
    for (int i = layers.size() - 1; i >= 0; i--) {
        layers.get(i).setProgress(progress);
    }
}

Performance

Official guidance:

If the animation has no masks or mattes, performance and memory usage are excellent (no bitmap creation).

With mattes, 2‑3 bitmaps are created, which can cause memory churn and lower frame rates, especially in RecyclerViews.

For list usage, enable caching via setAnimation(String, CacheStrategy) .

Benchmarks (K‑song gift animation) show that without hardware acceleration Lottie lags behind property animation in frame rate, memory, and CPU. With hardware acceleration the gap narrows.

Pros and Cons

Cons

Performance may be insufficient for very complex animations; method count and APK size increase.

Pros

High development efficiency – simple code, easy to replace animations.

Multiple data sources – assets, SD card, network; supports dynamic updates without app releases.

Cross‑platform – one JSON file works on Android, iOS, and React Native.

Lottie is easy to adopt and worth trying for most UI animation needs.

References

1. GitHub – airbnb/lottie-android 2. “Lottie的使用及原理浅析” – CSDN 3. “从json文件到炫酷动画‑Lottie实现思路和源码分析” – 简书 4. LottieFiles – https://www.lottiefiles.com