Android Animations using Lottie | Intro Screens | Switch | Check Box | Loading

In this tutorial, we’re going to create some animations in android using Lottie animation. Lottie animations give us a cool and attractive effect on our projects. We can simply import the Lottie files in your projects. If you are not familiar with Lottie then check out my tutorial on Everything about Lottie.

Here we create animation for Intro screens (delivery man, Bus, and Search Locations), Switch, Check Box, and Loading.

For that, we need to download the Lottie files in JSON format.

Steps to create animations in android

1. Download the JSON files

Go to lottiefiles.com then search for the required files and download the file as Lottie JSON.

The above image is just an example of how to download the files. According to this, you can download your required files.

2. Add the Prerequisites and dependency

Prerequisite

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {

repositories {

…

maven { url “https://jitpack.io" }

}

}

Dependency

Gradle is the only supported build configuration, so just add the dependency to your project build.gradle file:

dependencies {

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

}

3. Save the Lottie JSON files

Create a raw folder under the res directory (right-click on res directory > Android Resource Directory > Select raw) where we can store our downloaded Lottie JSON files.

4. Display the animations

-For delivery man animation, the layout file

<?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:orientation=”vertical”
tools:context=”.MainActivity”>

<com.airbnb.lottie.LottieAnimationView
android:layout_width=”match_parent”
android:layout_height=”280dp”
app:lottie_rawRes=”@raw/delivery_man”
app:lottie_autoPlay=”true”
app:lottie_loop=”true”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:fontFamily=”@font/oleo_script_swash_caps”
android:gravity=”center”
android:text=”@string/lighting_fast_delivery”
android:textSize=”19sp”
android:textColor=”@android:color/black”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”40dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”40dp”
android:fontFamily=”@font/linden_hill”
android:gravity=”center”
android:text=”@string/lorem_ipsum_is_simply_dummy_text_of_the_printing_and_typesetting_industry”
android:textColor=”@android:color/black”
android:textSize=”14sp”/>

</LinearLayout>

Output for the above code:

-For bus animation, the layout file

<com.airbnb.lottie.LottieAnimationView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
app:lottie_rawRes=”@raw/bus”
app:lottie_autoPlay=”true”
app:lottie_loop=”true”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:fontFamily=”@font/oleo_script_swash_caps”
android:gravity=”center”
android:text=”@string/travel_with_safety”
android:textSize=”19sp”
android:textColor=”@android:color/holo_blue_dark”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”40dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”40dp”
android:fontFamily=”@font/linden_hill”
android:gravity=”center”
android:text=”@string/lorem_ipsum_is_simply_dummy_text_of_the_printing_and_typesetting_industry”
android:textColor=”@android:color/holo_blue_dark”
android:textSize=”14sp”/>

Output for the above code:

-For search location animation, the layout file

<com.airbnb.lottie.LottieAnimationView
android:layout_width=”250dp”
android:layout_height=”250dp”
app:lottie_rawRes=”@raw/location_search”
app:lottie_autoPlay=”true”
app:lottie_loop=”true”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:fontFamily=”@font/oleo_script_swash_caps”
android:gravity=”center”
android:text=”@string/search_nearby_locations”
android:textSize=”19sp”
android:layout_marginTop=”20dp”
android:textColor=”@android:color/holo_red_dark”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”40dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”40dp”
android:fontFamily=”@font/linden_hill”
android:gravity=”center”
android:text=”@string/lorem_ipsum_is_simply_dummy_text_of_the_printing_and_typesetting_industry”
android:textColor=”@android:color/holo_red_dark”
android:textSize=”14sp”/>

Output of the above code:

-For switch animation, the layout file

<com.airbnb.lottie.LottieAnimationView

android:layout_width="100dp"

android:layout_height="wrap_content"

android:id="@+id/switchButton"

app:lottie_rawRes="@raw/button_switch"/>

Java code

Lottie animation button_switch.json has both animations for ON and OFF, but it will play continuously (one after another), so we need to do is, for ON animation we will play half animation and for OFF animation we will play the remaining half animation.

public class MainActivity extends AppCompatActivity {

boolean isSwitchOn = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// for Switch Button
final LottieAnimationView lottieSwitchButton = findViewById(R.id.switchButton);
lottieSwitchButton.setSpeed(3f); //tis will play the animation 3 times faster
lottieSwitchButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (isSwitchOn){

lottieSwitchButton.setMinAndMaxProgress(0.5f, 1.0f); // this will play the Switch OFF animation
lottieSwitchButton.playAnimation();
isSwitchOn = false;
}else {
lottieSwitchButton.setMinAndMaxProgress(0.0f, 0.5f); // this will play the Switch ON animation
lottieSwitchButton.playAnimation();
isSwitchOn = true;
}
}
});
}
}

-For check button animation, the layout file

<com.airbnb.lottie.LottieAnimationView

android:layout_width="150dp"

android:layout_height="wrap_content"

android:id="@+id/checkDone"

app:lottie_rawRes="@raw/button_checkmark"/>

Java Code

Since Lottie animation checked_done.json has only one animation for checked, so for unchecking animation, we will play reverse animation.

public class MainActivity extends AppCompatActivity {

boolean isCheckDone = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// for CheckDone Lottie Animation
final LottieAnimationView lottieCheckDone = findViewById(R.id.checkDone);
lottieCheckDone.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (isCheckDone){

//since lottie animation checked_done.json has only one animation for checked,
// so for unchecking animation, we will play reverse animation

lottieCheckDone.setSpeed(-1); // this will play reverse animation with normal speed
lottieCheckDone.playAnimation();
isCheckDone = false;
}else {
lottieCheckDone.setSpeed(1); // this will play regular animation with normal speed
lottieCheckDone.playAnimation();
isCheckDone = true;
}
}
});

}
}

-For loading animation, the layout file

<com.airbnb.lottie.LottieAnimationView

android:layout_width="130dp"

android:layout_height="wrap_content"

app:lottie_autoPlay="true"

app:lottie_loop="true"

app:lottie_rawRes="@raw/loading"/>

Output of the Switch, Check, and Loading animations code:

Download the full code. Click Here

If you find it helpful then leave a comment. Follow my account and visit www.gbandroidblogs.com

Happy Coding!!