Monday, January 20, 2020

How to create Lottie Android Example

Step 1: Add gradle file to your dependencies in your build.gradle file under app folder
compile 'com.airbnb.android:lottie:2.2.5'
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.airbnb.android:lottie:2.2.5'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:26.1.0'
}
Step 2: Right click on main folder --> New  --> Folder --> Select assets folder --> Finish.
You need add after effects animation file in this assets folder.
Step 3: create an activity and xml layout
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view_1);
        animationView.setAnimation("favourite_app_icon.json");
        animationView.loop(true);
        animationView.playAnimation();*/
    }
}
activity_main.xml
<?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="com.pratap.lottieexample.MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="favourite_app_icon.json"
        app:lottie_loop="true" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="trophy.json"
        android:layout_margin="20dp"
        app:lottie_loop="true" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_3"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="cycle_animation.json"
        app:lottie_loop="true" />

</LinearLayout>

Screenshots
Lottie Android Example