PainterResource throws IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported

Question

I am working on a Jetpack Project which downloads an image from API using Coil Library.

I have confirmed that valid image URLs and related data are being returned from the API call successfully. I am able to view the image on my browser using the returned URL.

This is my Image Composable:

@Composable
fun AstroPhoto(picture: AstroPicture) {

    val imgUrl = picture.url.toUri()
            .buildUpon()
            .scheme("https")
            .build()
    
    AsyncImage(model = ImageRequest.Builder(LocalContext.current)
            .data(imgUrl)
            .size(Size.ORIGINAL)
            .crossfade(true).build(),

            placeholder = painterResource(R.drawable.loading_animation),
            contentDescription = picture.title,
            contentScale = ContentScale.Crop,
    )
}

I call the above image composable in a Lazy Column:

....
 Box( ... ) {
            
           LazyColumn(content = {
               
               items(state.astroPictures) {
               
                AstroPhoto(picture = it)
            } })
            
        }

This is the exception at I am getting:

FATAL EXCEPTION: main Process: com.uxstate, PID: 31790 java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG at androidx.compose.ui.res.PainterResources_androidKt.loadVectorResource(PainterResources.android.kt:93)

I am on compose_version = '1.1.1' working with kotlin_version = '1.6.10'. My coil version is "io.coil-kt:coil-compose:2.1.0" and compileSdk 32 and AS Chipmunk. Source code can be found here.

I have checked the docs and searched online but cannot resolve the error. Please help me to go about the error, Thanks.

Drue

I have used This . Though its loading the animation but placeholder is only being visible right before image was loaded . Not sure why (i tried loading a 2 MB image to test with cache disabled) .. – Cavan

@ADM Good Tip, the error is now gone but the image is not animated as anticipated. – Drue

Something new?? – Millennial

Answer 1

This appears to be a Jetpack Compose bug

For the time being I've been able to fix this issue in my own project by using an AndroidView to render an ImageView.

In the case of you needing to asynchronously load images, you could render a Glide imageview or something similar

fun AppImage(
    modifier: Modifier = Modifier,
    @DrawableRes resource: Int,
    colorFilter: ColorFilter? = null
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
        ImageView(context).apply {
            setImageResource(resource)
            setColorFilter(colorFilter?.asAndroidColorFilter())
        }
    },
        update = {
            it.setImageResource(resource)
            it.colorFilter = colorFilter?.asAndroidColorFilter()
        }
    )
}

Bille

Answer 2

Just encountered this error and see if anyone had the same error as me.

I just re-opened the Android Studio, and after that, I use Clean Project and Rebuild Project. Now the project and the compose preview are working fine.

Snitch

Same here! Before you try any crazy workarounds, see if a simple restart fixes it. – Dekker

but it happens for real users for release builds #78154485 – Jailbird

Answer 3

My project worked correctly before, but after I changed some code (just add a fucntion, it is not about png or jpg or other things about image), my app crash when render a png. But after i reinstall the project in the emulator, it is fixed. It seems like a bug in Compose? I dont know, may be a bug in gradle? Just try to reinstall your app, i think it will be fixed.

Currier

Sync Project with Gradle FIles after SHIFT x 2 worked for me. Thanks :) – Bildungsroman

Answer 4

TLDR

Probably, you have conflicting xml declarations.

Details

I had this project structure

design-system

• ic_circle.xml (This is an svg drawable)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <group>
        <clip-path android:pathData="M0,0h24v24h-24z" />
        <path
            android:fillColor="#191C1E"
            android:pathData="M12,12m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0" />
    </group>
</vector>

But I use that resource from another module

app

• ic_circle.xml (This is a shape drawable)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/background" />
</shape>

Removing conflicting xml file resolved the issue

Petitionary

Answer 5

allocation with 4194304 free bytes and 7MB until OOM"

                                                   
java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG

Simple solve: set image for lower size! its out of memory!

Or maby u call many screens in compose or other!

Beg

Answer 6

if you are using png and jpg with painterResource but still face this issue. Change your image, It happened when there is something wrong with the image.

painterResource converts png, and jpg in the bitmap. Its throws that error if it fails to convert any Resource

Girder

This seems to only happens on certain devices as opposed to it being the image, which would means its a jetpack compose bug – Bille

Answer 7

Tried to use shape drawable as a placeholder and it caused this error.

If I set the same placeholder to ImageRequest.Builder instead, the code works fine.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .placeholder(R.drawable.placeholder_rect)
        .error(R.drawable.placeholder_rect)
        .build(),
    contentDescription = "",
)

Hildegardehildesheim

Answer 8

My issue was that the image was 187 MB and the app was running into an OutOfMemoryError. I had to use Glide and this answer to scale the image before loading it.

Juryrig

Answer 9

in my previous projects, there is no problem passing drawable resources to painterResource function. But when I create a new jetpack-compose project, the problem you describe occurs.

In my new project, this problem only happens in preview phase. When I firstly build and run my app in emulator, the problem suddenly disappears.

so this is my solution: if you haven't run you app in emulator, build and run it in emulator.

Whorl

Based on the detail in the question and comments, I think this is related to the animation of the image. – Gunflint

Answer 10

Solved restarting Android Studio, and clean an rebuild works too

League

Answer 11

In my case, I have some PNG and Webp image formats.

Right-click on each image and convert it to the same format. Then I also have to invalidate cache and restart to make it work.

Denishadenison