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