androidandroid-jetpack-composeandroid-glidecoil

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


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 = ""
                )

Solution

  • 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 = ""
                    )