Is an "animation-list" drawable supported in Jetpack Compose?

Question

I am converting a layout android app to compose. I have encountered an issue using an "animated-list" from my drawable resources, and I am guessing that this format is just not supported with Compose, at least at this time.

It appears to me that the compiler is generating the resources for the app, but Compose just has no idea how to reference an "animation-list".

For the below, it might be worth noting that I'm using colors as references also like

        android:strokeColor="@color/border"

My drawable resource is like this from src\main\res\drawable\garage_door_closing_animation.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/garage_door_closing_frame_0" android:duration="200" />
    <item android:drawable="@drawable/garage_door_closing_frame_1" android:duration="200" />
    <item android:drawable="@drawable/garage_door_closing_frame_2" android:duration="200" />
    <item android:drawable="@drawable/garage_door_closing_frame_3" android:duration="200" />
    <item android:drawable="@drawable/garage_door_closing_frame_4" android:duration="200" />
    <item android:drawable="@drawable/garage_door_closing_frame_5" android:duration="200" />
</animation-list>

where a frame is like this drawable/garage_door_closing_frame_0

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/garage_door_action_background"
        android:gravity="center" />
    <item
        android:drawable="@drawable/garage_door_closing_arrow_0"
        android:gravity="center" />
</layer-list>

and the two items referenced are like this drawable/garage_door_action_background

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:background="@android:color/transparent"
    android:viewportWidth="150"
    android:viewportHeight="150">
    <path
        android:name="base"
        android:fillColor="@color/border"
        android:pathData="M1.046,137.248h147.95v10.091h-147.95z"
        android:strokeWidth="1.2144" />
    <path
        android:name="house_frame"
        android:fillColor="@color/border"
        android:pathData="M15.002,137.24H1.658V34.66L74.647,1.576 148.392,34.408V137.324l-12.333,-0.085v0,-94.425L75.53,16.619 74.32,16.653 15.002,42.815Z"
        android:strokeWidth="1.21061"
        android:strokeColor="@color/border"
        android:strokeLineCap="butt"
        android:strokeLineJoin="miter" />
    <path
        android:name="door_frame"
        android:fillColor="@color/border"
        android:pathData="m30.713,54.916c-0.657,1.202 -0.137,2.713 -0.303,4.042 0,25.895 0,51.789 0,77.683 0.333,1.417 2.134,0.657 3.169,0.848 3.743,-0.041 7.515,0.083 11.24,-0.06 1.213,-0.459 0.479,-2.112 0.68,-3.108 0,-21.921 0,-43.843 0,-65.764 20.031,0 40.063,0 60.094,0 0,22.695 0,45.39 0,68.085 0.333,1.417 2.134,0.657 3.169,0.848 3.743,-0.041 7.515,0.083 11.24,-0.06 1.213,-0.459 0.48,-2.112 0.68,-3.108 0,-26.252 0,-52.503 0,-78.755 -0.332,-1.417 -2.133,-0.657 -3.169,-0.848 -28.752,0 -57.504,0 -86.255,0 -0.182,0.066 -0.363,0.132 -0.545,0.198z"
        android:strokeWidth="0.178596"
        android:strokeColor="@color/border" />
    <path
        android:name="handle"
        android:fillColor="@color/border"
        android:pathData="m74.639,75.938c-5.439,-1.138 -7.655,-7.121 -4.097,-11.059 2.289,-2.534 5.848,-3.205 8.934,-1.686 4.231,2.083 5.19,7.399 1.926,10.681 -1.654,1.663 -4.512,2.536 -6.763,2.064z"
        android:strokeWidth="0.208623" />
    <path
        android:name="open_door"
        android:fillColor="@color/border"
        android:pathData="M45.48,77.399h60.315v59.84h-60.315z" />
</vector>

and drawable/garage_door_closing_arrow_0

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:background="@android:color/transparent"
    android:viewportWidth="150"
    android:viewportHeight="150">
    <path
        android:fillColor="#00ff00"
        android:pathData="m30.053,9.133 l45.75,38.75 45.75,-38.75h-16l-29.5,24.5 -30.5,-24.5z"
        android:strokeWidth="1"
        android:strokeColor="#ffffff"
        android:strokeLineCap="butt"
        android:strokeLineJoin="miter" />
</vector>

My composable which tries to load this is below, and this compiles but throws a runtime error

    @Composable
    fun GarageIndicator () {
        val image = AnimatedImageVector.animatedVectorResource(R.drawable.garage_door_closing_animation)

and the error is

FATAL EXCEPTION: main
Process: com.lusion.sgauto, PID: 17467
android.content.res.Resources$NotFoundException: Resource ID #0x0
at android.content.res.ResourcesImpl.getValue(ResourcesImpl.java:226)
at android.content.res.Resources.getValue(Resources.java:1437)
at androidx.compose.ui.res.VectorResources_androidKt.vectorResource(VectorResources.android.kt:65)
at androidx.compose.animation.graphics.vector.compat.XmlAnimatedVectorParser_androidKt.parseAnimatedImageVector(XmlAnimatedVectorParser.android.kt:74)
at androidx.compose.animation.graphics.res.AnimatedVectorResources_androidKt.loadAnimatedVectorResource(AnimatedVectorResources.android.kt:61)
at androidx.compose.animation.graphics.res.AnimatedVectorResources_androidKt.animatedVectorResource(AnimatedVectorResources.android.kt:48)
at com.lusion.sglibrary.MainActivity.GarageIndicator(MainActivity.kt:1497)
at com.lusion.sglibrary.MainActivity$onResume$1.invoke(MainActivity.kt:349)
at com.lusion.sglibrary.MainActivity$onResume$1.invoke(MainActivity.kt:348)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.ui.platform.ComposeView.Content(ComposeView.android.kt:428)
at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:252)
at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:251)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)
at androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:177)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:123)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:122)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt.ProvideAndroidCompositionLocals(AndroidCompositionLocals.android.kt:114)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:157)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:156)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:156)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:140)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.ActualJvm_jvmKt.invokeComposable(ActualJvm.jvm.kt:78)
at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3314)
at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3304)
at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source:1)

and, last, for what it is worth, I have tried leveraging all the latest compose libs in gradle as

    implementation "androidx.compose.compiler:compiler:1.4.0-alpha02"
    implementation "androidx.compose.animation:animation:1.3.2"
    implementation "androidx.compose.animation:animation-graphics:1.3.2"
    implementation "androidx.compose.foundation:foundation-layout:1.4.0-alpha04"
    implementation "androidx.compose.foundation:foundation:1.4.0-alpha04"
    implementation "androidx.compose.material:material:1.4.0-alpha04"
    implementation "androidx.compose.material3:material3:1.1.0-alpha04"
    implementation "androidx.compose.runtime:runtime:1.4.0-alpha04"
    implementation "androidx.compose.runtime:runtime-livedata:1.4.0-alpha04"
    implementation "androidx.compose.ui:ui:1.4.0-alpha04"
    implementation "androidx.compose.ui:ui-tooling:1.4.0-alpha04"

I am hoping I can use the current layout resource animation-list and not have to figure out how to convert it to an "animated-vector" resource.

Answer 1

build.gradle Configure the useSupportLibrary property:

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.your.package.xxxx"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        vectorDrawables {
            useSupportLibrary true
        }
    }
}

display:

val animationDrawable = AnimationDrawable()
//add your images in animationDrawable by giving information of duration etc like you gave in xml file..
Image(
    painter = rememberDrawablePainter(animationBlast),
    contentDescription = null,
    modifier = Modifier.wrapContentSize(), 
    contentScale = ContentScale.Crop
)

animationDrawable?.start()