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
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.Composableimport androidx.compose.ui.tooling.preview.Previewimport com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimationimport com.lottiefiles.dotlottie.core.util.DotLottieSource
@Preview()@Composablefun 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()@Composablefun 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()@Composablefun DotLottiePreview() { DotLottieAnimation( source = DotLottieSource.Data(byteArrayOf(0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09), )}
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()@Composablefun 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.Modifierimport androidx.compose.ui.graphics.Color// other imports
@Preview()@Composablefun 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()@Composablefun DotLottiePreview() { DotLottieAnimation( ..., modifier = Modifier.size(200.dp) )}