Native app animations in Android Studio using Sketch, After Effects and Lottie from Airbnb.

Last week I published a tutorial that took you through transforming your Sketch files into native animations inside Xcode using the Lottie library from Airbnb Design and After Effects.

This week, it’s Android’s turn.

Get up to speed by reading the Sketch and After Effects steps from the original article, they’ll help you create the assets you need to complete this tutorial.

You can read it here:

Native app animations in Xcode using Sketch, After Effects and Lottie from Airbnb.

We’ll now take you through:

• Importing the JSON file created with the Bodymovin extension in After Effects
• Authoring a looping animation
• Including the Lottie library before building the working prototype

This tutorial requires the following software:

• Sketch
• After Effects
• Lottie from Airbnb
• Android Studio

Here’s what we’ll be making:

01. Setup Lottie

Go to the Lottie site:

Lottie

Scroll down and follow the links to the Android Studio Integration page.

Visit the Lottie Android Studio GitHub repo:

airbnb/lottie-android

We can then follow the instructions and add the extra code that will run the looping animation inside Android Studio.

02. Android Studio file

Create an new project

Open Android Studio.

The friendly Android Studio welcome screen.

Create a new “Empty Activity” project and follow the prompts selecting KitKat 4.4 as your minimum requirement.

I’ve saved ours on the desktop in this folder structure (you can save yours where ever you like):

MobiddictionLottieTutorialAndroid/AndroidStudio/MobiddictionLottieTutorialAndroid

Notice that there is no spaces in the project path, this is important if you want your project to run.

Let’s setup our project window:

• In the project window (left panel), change the “Android” dropdown to “Project Files”
• Select the “activity_main.xml” tab in the code window
• Select the “preview” tab on the right panel

You should now see this:

Ready to start coding.

Import JSON file

Copy the JSON file we made in the Xcode tutorial and change it’s name from “MD Logo Animation.json” to “md_logo_animation.json”. Android Studio has issues with file names that include capital letters and spaces.

Create a folder called “assets” in “app/app/src/main” and drag your renamed JSON file into it, this will move it from where it is so you might want to move it to your desktop before completing this step.

JSON file import complete.

Replace all of the code in “activity_main.xml” with:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>

“activity_main.xml” updated.

Find and open “AndroidManifest.xml” then replace it’s code with:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.chrisdeane.mobiddictionlottietutorialandroid">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoTitleBar.FullScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Remember to replace the “chrisdeane” in the package path with your own username.

“AndroidManifest.xml” updated.

Open “styles.xml” from “app/app/src/main/res/values/” and replace it’s code with:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- no title bar -->
    <style name="AppTheme.NoTitleBar" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:elevation">0dp</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <!-- no title bar & full screen -->
    <style name="AppTheme.NoTitleBar.FullScreen">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources>

This will remove the title bar and make the animation full-screen.

“styles.xml” updated.

Now open the file called “build.gradle” and add this line just before the last closing bracket:

compile 'com.airbnb.android:lottie:1.5.3'

Unlike the process in the Xcode tutorial where we need to install CocoaPods and create a Pod file, this line is all we need to import the Lottie library into Android Studio and run it.

Ready to build.

We’re now ready to build the project. Your final Android Studio screen and it’s working prototype should look like this:

Don’t worry, the white margins you see on each side don’t appear when displayed on a phone.

That’s a wrap!

Here’s the source files for this project:

Mobiddiction Lottie Tutorial Android.zip

Good luck and have fun 😀.

For more content:

Follow me here at Medium, Twitter and YouTube.