Basic Usage

Common use cases for the DotLottieAnimation composable function include loading and displaying dotLottie animations within Jetpack Compose UIs. The following example demonstrates how to integrate a dotLottie animation into a Composable function using the DotLottieAnimation composable function.

Loading from different sources

dotLottie Android supports loading animations from various sources to provide flexibility in how you manage and distribute your animations.

From a URL

DotLottieSource.Url is used to load an animation from a URL. It can load .json or .lottie files from a URL.

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieSource

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        source = DotLottieSource.Url("https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"),
        autoplay = true,
        loop = true,
    )
}

From an asset

DotLottieSource.Asset is used to load an animation from the assets folder in your Android project. It can load .json or .lottie files from the assets folder.

// imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        source = DotLottieSource.Asset("file.json"),
    )
}

From raw data

DotLottieSource.Data is used to load an animation from raw data. It can load .lottie files from raw data.

// imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        source = DotLottieSource.Data(byteArrayOf(0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09))
    )
}

From raw resources

DotLottieSource.Res is used to load an animation from raw resources in your Android project.

// imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        source = DotLottieSource.Res(R.raw.animation)
    )
}

From a JSON string

DotLottieSource.Json is used to load an animation from a JSON string. It can load .json files from a JSON string.

// imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        source = DotLottieSource.Json("{ \"v\": \"5.5.4\", \"fr\": 30, \"ip\": 0, \"op\": 180, \"w\": 1920, \"h\": 1080, \"nm\": \"Lottie Animation\" .... }"),
    )
}

Changing background color

Using the Modifier parameter, you can change the background color of the DotLottieAnimation composable function.

import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
// other imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        ...,
        modifier = Modifier.background(Color.LightGray)
    )
}

Adjusting animation display size

Note: width and height properties are for controlling canvas size, not the animation size. The animation will be scaled to fit the canvas size. If your animation is pixelated, you can try to increase the canvas size. We’re working on a feature to give users more control over the animation size, like fill, fit, center, etc. Stay tuned for updates on this feature.

If you want to control the animation size, you can use the Modifier parameter to set the size. You can use the width,height or size modifier to set the size of the DotLottieAnimation composable function. fillMaxWidth(), fillMaxSize(), etc. can also be used to control the size of the animation.

import androidx.compose.ui.Modifier
// other imports

@Preview()
@Composable
fun DotLottiePreview() {
    DotLottieAnimation(
        ...,
        modifier = Modifier.size(200.dp)
    )
}