How to add Lottie Animation in an Android application

Lottie is an Android, IOS and React Native library that renders After Effects animations in real time, allowing apps to use animations (Dynamic Feature) as easily as they use static images.They are especially useful when the UI (User Interaction) changes state, such as when new content loads or new actions become available.

Lottie Animation

Lottie, the future of product animation

  • Multi-platform (A single instance that works on all your devices)
  • Easy Integration (As simple as embedding an image or video)
  • Lightweight (Lighter and leaner than video or animated GIF)
  • Interactivity (Add events and dynamic properties to your animations)
  • Responsive (Scalable vector animations that adapt to any size)

Let’s begin

  1. Create a new project

Create New Project In Android Studio

  1. Add the required Lottie animation dependency in the app level build.gradle file:
1
2
//Lottie Animation
implementation ‘com.airbnb.android:lottie:3.4.0
  1. Add animation.json files in assets folder. You can create your own animations using Adobe After Effects, or feel free to use the ones uploaded by other users on: Lottie Files

app/assets

  1. Adding animation to activity_main.xml file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?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:gravity="center"
android:background="@android:color/white"
android:orientation="vertical"
tools:context=".MainActivity">

<com.airbnb.lottie.LottieAnimationView
android:layout_width="140dp"
android:layout_height="80dp"
android:layout_margin="24dp"
android:background="@drawable/bg_header"
app:lottie_autoPlay="true"
app:lottie_fileName="lottie_logo_animation.json"
app:lottie_loop="true" />

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/firstAnimationView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:lottie_autoPlay="true"
app:lottie_fileName="animation.json"
app:lottie_loop="true" />

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/secondAnimationView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone"
app:lottie_autoPlay="true"
app:lottie_fileName="animation_1.json"
app:lottie_loop="true" />

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/toggle"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:lottie_autoPlay="false"
app:lottie_fileName="toggle_switch.json"
app:lottie_loop="false"
app:lottie_speed="1.75" />
</LinearLayout>
  1. Write the following code in MainActivity.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

private var isSwitchOn = false

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

toggle.setOnClickListener {
changeToggleState()
}
}

private fun changeToggleState() {
if (isSwitchOn) {
toggle.setMinAndMaxProgress(0.5f, 1f)
toggle.playAnimation()
firstAnimationView.visibility = View.VISIBLE
secondAnimationView.visibility = View.GONE
} else {
toggle.setMinAndMaxProgress(0f, 0.5f)
toggle.playAnimation()
secondAnimationView.visibility = View.VISIBLE
firstAnimationView.visibility = View.GONE
}
isSwitchOn = !isSwitchOn
}
}
  1. And we are done!

Lottie Animation

References

  1. Lottie
  2. Lottie Docs

Some good reads you may like:-

  1. App-Heartbeat
  2. How to apply Proguard in an android application

p.s. Nayan is a platform that offers high precision services for traffic monitoring and road safety. Check out our website.

Share

© 2019 NAYAN All Rights Reserved