Jetpack Compose

[alinimbuzzer]

Does PAG support jetpack compose ? We are looking to implement transparent video animation in our project, please let me know if libpag support jetpack compose

[islam-engineer]

Yes. libpag doesn't ship a Compose-native composable, but its Android views (PAGView / PAGImageView) are regular Views, so you can embed them in Compose with AndroidView. That works fine for transparent animations.

@Composable
fun PagAnimation(
    assetPath: String,
    modifier: Modifier = Modifier,
    repeatCount: Int = 0, // 0 = loop forever
) {
    val context = LocalContext.current
    val pagFile = remember(assetPath) { PAGFile.Load(context.assets, assetPath) }

    AndroidView(
        modifier = modifier,
        factory = { ctx ->
            PAGView(ctx).apply {
                composition = pagFile
                setRepeatCount(repeatCount)
                play()
            }
        },
        update = { view ->
            if (view.composition !== pagFile) {
                view.composition = pagFile
                view.play()
            }
        },
        onRelease = { view ->
            view.stop()
            view.freeCache()
        },
    )
}

// Usage
PagAnimation(
    assetPath = "anim/confetti.pag",
    modifier = Modifier.size(240.dp),
)

A few notes:

• Transparency: PAG files keep their alpha channel, so whatever is behind the composable shows through. Don't put a solid background on the modifier if you want it transparent.
• Lists (LazyColumn etc.): prefer PAGImageView over PAGView. It's lighter and designed for many instances on screen. The AndroidView pattern is the same.
• Lifecycle: onRelease (Compose UI 1.4+) runs when the composable leaves composition, so the animation stops and frees its cache instead of leaking.
• Loading from a file or URL instead of assets: use PAGFile.Load(path) with a local file path, and download the file first if it's remote.

If this helps, please mark it as the answer so others can find it. 🙂