Getting Started

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 21 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: Add Repository

Add the JitPack repository to your project:

repositories {
    maven(url = "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.5.0")
}

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

import com.lottiefiles.dotlottie.core.model.Config

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)) // resource from raw resources .json or .lottie
    .useFrameInterpolation(true)
    .playMode(Mode.FORWARD)
    .threads(6u) // Use 6 threads for rendering
    .themeId("darkTheme") // Set initial theme
//    .layout(Fit.FIT, LayoutUtil.Alignment.Center) // Set layout configuration
    .build()
dotLottieAnimationView.load(config)

Using Jetpack Compose

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

fun ExampleComposeComponent() {
    DotLottieAnimation(
        source = DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"), // from url .lottie / .json
//        source = DotLottieSource.Asset("file.json"), // from asset .lottie / .json
//        source = DotLottieSource.Res(R.raw.animation), // from raw resources .json or .lottie
//        source = DotLottieSource.Json("{\"v\":\"4.8.0\",\"meta\":{\"g\":\"LottieFiles ..........\"), // lottie json string
//        source = DotLottieSource.Data(ByteArray), // dotLottie data as ByteArray
        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 Basic Usage section and explore the API documentation for advanced features and customization options.