https://kotlinlang.org logo
#compose
Title
# compose
u

ursus

02/22/2024, 6:49 PM
I have a base64 encoded string image. Is going through
Bitmap
still the idiomatic way to display it in Compose? Or is there a maybe direct bytes array to
ImageBitmap
way?
m

MR3Y

02/22/2024, 7:54 PM
Yep, there is a way to directly convert byte array to
ImageBitmap
, checkout the official JetBrains' ImageViewer sample: https://github.com/JetBrains/compose-multiplatform/blob/master/examples/imageviewe[…]src/commonMain/kotlin/example/imageviewer/ImageBitmap.common.kt
u

ursus

02/22/2024, 8:29 PM
well, its just expect actual sugar for the android way
Copy code
package example.imageviewer

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap

actual fun ByteArray.toImageBitmap(): ImageBitmap = toAndroidBitmap().asImageBitmap()

fun ByteArray.toAndroidBitmap(): Bitmap {
    return BitmapFactory.decodeByteArray(this, 0, size)
}
s

Sergey Y.

02/22/2024, 9:01 PM
ImageBitmap acts as a wrapper around Bitmap on the Android platform, SkImage on Desktop, and equivalent technologies on iOS and the Web. Probably the easiest way to display a base64 encoded image is to use the Coil library, which is among the officially recommended image loading libraries on Android. It handles all the necessary boilerplate work for you, including proper Bitmap caching, downsampling, asynchronous loading, etc. Coil, in particular, is known for its multiplatform capabilities.
The Android SDK has lacked an official image loading library for decades. Instead, Google recommends using well-known, community-crafted image loading libraries, as correct bitmap loading is neither easy nor straightforward. Therefore, I believe JetBrains is leaning towards the same approach and will not provide their own image loading library.
u

ursus

02/22/2024, 9:02 PM
by using Coil you mean passing it what, url or the string itself?
s

Sergey Y.

02/22/2024, 9:03 PM
yes
it supports both
u

ursus

02/22/2024, 9:04 PM
my api is such that the string data is just another json field, so no url for me do you think its a good idea to pass such huge string to composables? (hinting at the recomposition diffing calculations)
s

Sergey Y.

02/22/2024, 9:08 PM
you can provide only a url, or decode image using coil before it reaches the presentation layer, passing to ui only some sort of key to the image, coil will use the key to get the image from its cache.
u

ursus

02/22/2024, 9:10 PM
I dont have a url. Just the string in memory. And since its already in memory, is there use for Coil? Also, I don't need memcaching, its just 1 screen.
regardless, I could have a static
Map<String, Bitmap>
and just pass the string key around but is that cool with compose, to statically access the map within a composable?
s

Sergey Y.

02/22/2024, 9:11 PM
than you probably don't need the coil, just decode it manually.
u

ursus

02/22/2024, 9:14 PM
right but where, in the data layer? and just pass Bitmap instance to to vm to compose? Or just pass bytearray all the way down to compose via vm, and decode to Bitmap, to ImageBitmap in composable?
Would the latter be smelly to you? I'm not a fan of android references all the way up in the data layer (and Bitmap is android)
12 Views