Getting Started with the Android Player

In this tutorial, you will install the Android player and display your first Lottie animation in a Jetpack Compose or XML layout.

Prerequisites

Before integrating the dotLottie Android Library into your project, ensure you have the following prerequisites met: Android Studio installed on your machine. An Android project targeting API level 24 or higher.

Setting Up Your Project

To use the dotLottie Android Library, you need to add it as a dependency in your project. Follow these steps to set it up:

Step 1: Configure Gradle

Open your project's settings.gradle.kts file and ensure that the mavenCentral() repository is included in the repositories block. If it's not present, add it as shown below:

pluginManagement {
    repositories {
        // Other repositories
        mavenCentral()
        maven {
          url = uri("https://jitpack.io")
        }
    }
}
dependencyResolutionManagement {
    repositories {
        // Other repositories
        mavenCentral()
        maven {
          url = uri("https://jitpack.io")
        }
    }
}

Step 2: Add the Dependency

Next, add the dotLottie Android Library dependency to your app module's build.gradle.kts file.

dependencies {
    implementation("com.github.LottieFiles:dotlottie-android:0.4.1")
}

You can find the latest version of the library on the GitHub releases↗ page or on JitPack Repository↗.

Step 3: Sync Your Project

After adding the dependency, click on the Sync Now prompt that appears in the top right corner of the Android Studio editor. This will download the library and integrate it into your project.

Using dotLottie in Your Application

Using XML

First, put your animation in the assets folder in your Android project and add DotLottieAnimation in your XML file:

<com.lottiefiles.dotlottie.core.widget.DotLottieAnimation
    android:id="@+id/lottie_view"
    android:layout_width="200dp"
    app:speed="3"
    app:src="swinging.json"
    android:layout_height="200dp" />

Using Kotlin Code

val dotLottieAnimationView = findViewById<DotLottieAnimation>(R.id.lottie_view)

Set up the initial animation configuration

val config = Config.Builder()
    .autoplay(true)
    .speed(1f)
    .loop(true)
    .source(DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"))
    //.source(DotLottieSource.Asset("file.json")) // Asset from the asset folder .json or .lottie
    //.source(DotLottieSource.Res(R.raw.animation)) // Raw resource
    .useFrameInterpolation(true)
    .playMode(Mode.FORWARD)
    .build()
dotLottieAnimationView.load(config)

Using Jetpack Compose

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.background
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieSource
import com.dotlottie.dlplayer.Mode

@Composable
fun BasicDotLottieExample() {
    DotLottieAnimation(
        source = DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"),
        // source = DotLottieSource.Asset("file.json"),
        // source = DotLottieSource.Res(R.raw.animation),
        autoplay = true,
        loop = true,
        speed = 3f,
        useFrameInterpolation = false,
        playMode = Mode.FORWARD,
        modifier = Modifier.background(Color.LightGray)
    )
}

Next Steps

Now that you have the dotLottie Android Library integrated into your project, you can start loading and displaying Lottie animations in your app. For more detailed examples and usage instructions, refer to the How-to Guides section and explore the API documentation for advanced features and customization options.