How to use drawabless in compose multiplatform?

Question

I'm developing a Compose Multiplatform app and want to use the same PNG drawable assets for both Android and iOS.

So far I understand, I need to use the same PNGs for both platforms like this:

For Android in androidMain:

androidApp/src/main/res/
    drawable-mdpi/icon.png  
    drawable-hdpi/icon.png     
    drawable-xhdpi/icon.png    
    drawable-xxhdpi/icon.png    
    drawable-xxxhdpi/icon.png

For iOS in commonMain

commonMain/composeResources/drawable/
    icon.png
    [email protected]
    [email protected]

As a next step, I need to get that icon in commonMain/kotlin/package/App.kt like

rememberPngPainter("icon.png")

First of all, is my approach correct? According to ChatGPT and Gemini, it's correct, but it doesn't work for iOS part. According to AIs, I should do for Android part like this, which works:

@Composable
actual fun rememberPngPainter(name:String) : Painter {
    @SDrawableRes
    val icon = when(name) {
        "icon" -> R.drawable.icon
        else -> R.drawable.other_icon
    }
    return painterResource(id = icon)
}

for iOS part like this:

import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.graphics.painter.BitmapPainter
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import platform.UIKit.UIImage

@Composable
actual fun rememberPngPainter(name: String): Painter {
    val icon = when(name) {
        "icon" -> "icon.png"
        else -> "other_icon.png"
    }
    
    val uiImage = UIImage.imageNamed(name)
        ?: error("Image not found: $imageName")
    
    val imageBitmap: ImageBitmap = uiImage.toImageBitmap()
    return BitmapPainter(imageBitmap)
}

which does not work since there is no library out there to use

.toImageBitmap()

and ChatGPT answers "I can't help you with this". But Gemini gives me alternative to use

painterResource(resource = "icon.png")

which doesn't also exist, whereas Gemini (also aksed ChaGPT about) says that that's here to find:

compose-components-resources = { module = "org.jetbrains.compose.components:components-resources", version.ref = "1.5.1 or higher" }

I checked all versions and there has ever been any painterResource with String input, only

fun painterResource(resource: DrawableResource)

What else can I try?

djes · Accepted Answer · 2025-05-23 09:52:37Z

1

Everything is much simpler, create a directory composeResources in composeApp/src/commonMain, create a directory drawable in it. Put your icon.png there.

Be sure to build the project so that the files are generated.

And use in the common code:

Image(
    ...
    painter = painterResource(Res.drawable.icon),
    ...
)

The documentation describes everything in great detail.

answered May 23 at 9:52

djes

693 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Delphi May 24 at 12:33

thank you, your version basically works, but only with single png. In this case, I do not have PNGs for different screen sizes, which is not good for production app. However, I will try to use this ways until I have a dedicated solution for. Thanks again.

djes May 26 at 5:25

Adding the required qualifiers is also not a problem, check the documentation: jetbrains.com/help/kotlin-multiplatform-dev/…

Collectives™ on Stack Overflow

How to use drawabless in compose multiplatform?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related