How to show image (Bitmap) in compose with glide, coil

Question

I want to insert a picture into my composable GlideImage or CoilImage or Image. I get a picture depending on the conditions from resources/drawable (image.jpg) or from mobile galery(Uri). For Image(){} I decode my image to bitmap. How to use bitmap for glide and coil?

W

myList: LazyColumn( state = listState ) {

            itemsIndexed(
                items = listCycle,  // list items from Viewmodel: val listCycle by cycleVM.cycles.collectAsState()
            ) { _, it ->
                CycleItemCard(cycle = it, navHostController)
            }
        }

my Item for Lazycolumn:

@Composable
fun CycleItemCard(
    @PreviewParameter(SampleCycleProvider::class) cycle: Cycle,
    navHost: NavHostController
) {
    val context = LocalContext.current
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(1.dp)
            .clickable {
                navHost.navigate(NavigationItem.DetailCycleNavigationItem.routeWithId(cycle.id))
            },
        elevation = CardDefaults.cardElevation(0.dp),
        shape = RoundedCornerShape(0.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.background(MaterialTheme.colorScheme.background)
        ) {
/////////HERE
        Image( modifier = Modifier
            .padding(8.dp)
            .height(50.dp)
            .width(50.dp)
            .clip(CircleShape),
                contentScale = ContentScale.Crop,
                painter = rememberAsyncImagePainter(getImage(cycle, context)),

                contentDescription ="" )
  ////// END          
            Column(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Text(
                    text = cycle.title!!,
                    style = MyTextTitleLabel16,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )

                if (!cycle.isDefaultType) {
                    Divider(
                        modifier = Modifier

                            .height(1.dp)
                            .padding(end = 8.dp)
                            .background(Color.Black)
                    )
                }

                if (!cycle.isDefaultType) {
                    Box(
                        modifier = Modifier
                            .align(Alignment.End)
                            .padding(end = 8.dp, top = 4.dp)
                    ) {
                        Text(
                            text = cycle.finishStringFormatDate,
                            fontSize = 12.sp,
                            color = Color(0xFF6c6c70)
                        )
                    }
                }
            }
        }
    }

}

my fun for image:

fun getImage(cycle: Cycle, context: Context): Bitmap {

    val name = context.packageName
    var source: ImageDecoder.Source
    try {
        if (cycle.image != null) {
            source = ImageDecoder.createSource(context.contentResolver, Uri.parse(cycle.image))

        } else {
            val id = context.resources.getIdentifier(cycle.defaultImg, "drawable", name)
            source = ImageDecoder.createSource(context.resources, id)

        }
    } catch (e: NullPointerException) {
        val id = context.resources.getIdentifier("drew", "drawable", name)
        source = ImageDecoder.createSource(context.resources, id)

    }
    return ImageDecoder.decodeBitmap(source)
}

No matter what I use(Coil, Glide or Image), LazyColumn lags a lot when scrolling :(

    I don't know right or wrong. I did this: added to 

CycleItemCard:
          val image = remember {
                mutableStateOf<Bitmap?>(
                    Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888).apply {
                        eraseColor(context.resources.getColor(R.color.colorBackgroundConstrateLayout))
                    }
                )
            }
            LaunchedEffect(key1 = true) {
                coroutineScope {
                    launch(Dispatchers.IO) {
                        image.value = getImage(cycle, context, name)
                    }
                }
            }
     Image(
                    modifier = Modifier
                        .padding(8.dp)
                        .height(50.dp)
                        .width(50.dp)
                        .clip(CircleShape),
                    contentScale = ContentScale.Crop,
                    bitmap = image.value!!.asImageBitmap(), //// here
    
                    contentDescription = ""
                )

fun getMyBitmap(): Bitmap { Return bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.my_drawable); — Сергей В, Aug 08 '23 at 08:19

score 0 · Answer 1 · answered Aug 08 '23 at 09:13

Try this:

    AsyncImage(
        model = ImageRequest
            .Builder(context)
            .data(Uri)
            .crossfade(true)
            .build(),
        contentDescription = null,
        modifier = Modifier
            .size(100.dp, 60.dp)
        contentScale = ContentScale.Crop,
        error = painterResource(id = R.drawable.ic_error),
        placeholder = painterResource(id = R.drawable.ic_ placeholder)
    )

Hope this can help you.

LazyColumn lags a lot when scrolling :( – Сергей В Aug 09 '23 at 07:31 — Сергей В, Aug 09 '23 at 07:31

score 0 · Answer 2 · answered Aug 08 '23 at 19:14

Using Coil provide various types including bitmaps or images from files, URIs, or URLs. However, if you're dealing with images stored locally, the Image Composable suffices, eliminating the need for Coil or Glide. These libraries are primarily essential when you're working with remote sources, such as loading images from the internet.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your bitmap here")
        .crossfade(true)
        .build(),
    contentDescription = null
)

No matter what I use(Coil, Glide or Image), LazyColumn lags a lot when scrolling :( — Сергей В, Aug 09 '23 at 07:30

score 0 · Accepted Answer · answered Aug 10 '23 at 12:38

I don't know right or wrong. I did this: added to

CycleItemCard:
          val image = remember {
                mutableStateOf<Bitmap?>(
                    Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888).apply {
                        eraseColor(context.resources.getColor(R.color.colorBackgroundConstrateLayout))
                    }
                )
            }
            LaunchedEffect(key1 = true) {
                coroutineScope {
                    launch(Dispatchers.IO) {
                        image.value = getImage(cycle, context, name)
                    }
                }
            }
     Image(
                    modifier = Modifier
                        .padding(8.dp)
                        .height(50.dp)
                        .width(50.dp)
                        .clip(CircleShape),
                    contentScale = ContentScale.Crop,
                    bitmap = image.value!!.asImageBitmap(), //// here
    
                    contentDescription = ""
                )

How to show image (Bitmap) in compose with glide, coil

3 Answers3