Hello Everyone, I'm experiencing an issue with dis...

# compose-android

[Rohit Neel]

Hello Everyone,
I'm experiencing an issue with displaying images in my Jetpack Compose project. When I use the AsyncImage composable to load images, a green line appears on the edges of images. However, this issue does not occur when I use GlideImage. For more reference, the issue image and code are added in this chat thread 🧵.
Could anyone help, why this green line might be appearing and how to fix it?

[Rohit Neel]

Please find attached image where green lines appears.
Here is the code snippet for the `AsyncImage`:
@Composable
fun *CustomAsyncImage*(
modifier: Modifier = Modifier,
customAsyncImageDisplay: CustomAsyncImageDisplay,
) {
val request =
ImageRequest.Builder(LocalContext.current)
.data(eciAsyncImageDisplay.imageUrl)
.decoderFactory(SvgDecoder.Factory())
.setHeader(_USER_AGENT_, _USER_AGENT_VALUE_)
.setHeader(ACCEPT, _ACCEPT_IMAGE_FORMATS_)
.diskCachePolicy(CachePolicy.ENABLED)
.memoryCachePolicy(CachePolicy.ENABLED)
.build()

AsyncImage(
model = request,
contentDescription = customAsyncImageDisplay.contentDescription,
contentScale = customAsyncImageDisplay.contentScale,
error = painterResource(id = customAsyncImageDisplay.errorPlaceholder),
modifier = _updateModifier_(customAsyncImageDisplay, modifier),
)
}

private fun *updateModifier*(
customAsyncImageDisplay: CustomAsyncImageDisplay,
modifier: Modifier,
): Modifier {
return customAsyncImageDisplay.aspectRatio?.let { ratio ->
customAsyncImageDisplay.shape?.let { shape ->
modifier
._aspectRatio_(ratio)
._clip_(shape)
} ?: modifier._aspectRatio_(ratio)
} ?: customAsyncImageDisplay.shape?.let {
modifier._clip_(it)
} ?: modifier
}

[Rohit Neel]

Screenshot 2024-06-26 at 4.08.32 PM.png

[Rohit Neel]

Hi all,
Can you check this issue and confirm if any solution?

[Alexandru Gheorghe]

Is that one an emulator or an actual device?

[Rohit Neel]

On actual device

[Alexandru Gheorghe]

And if you try without customAsyncImageDisplay?

[Rohit Neel]

It is data class and image is coming from backend service

[Alexandru Gheorghe]

Right. What I'm trying to say is: can you check whether it's the custom ratio and shape you're applying making these green lines show or is a bug

[Rohit Neel]

yes it is custom aspect ratio but shape is not setting explicitly or from service as per data class it is val shape:Shape? =null
Please find complete code,

const val CATEGORY_CARD_ASPECT_RATIO = 1f
@Composable
fun CommonImage(
    modifier: Modifier = Modifier,
    eciImageVideoModel: EciImageVideoDisplay,
) {
    val screenWidth = LocalDensity.current.run { LocalConfiguration.current.screenWidthDp.dp }
    val widthByType = screenWidth / eciImageVideoModel.mediaElements
    val dynamicAspect =
        modifier
            .width(widthByType)
            .aspectRatio(eciImageVideoModel.aspectRatio)
    Box(
        modifier =
            dynamicAspect
                .clickable {
                    eciImageVideoModel.onClick()
                },
    ) {
        if (eciImageVideoModel.backgroundVideo == null && eciImageVideoModel.backgroundImage != null) {
            CustomAsyncImage(
                customAsyncImageDisplay =
                    CusAsyncImageDisplay(
                        aspectRatio = eciImageVideoModel.aspectRatio,
                        imageUrl = eciImageVideoModel.backgroundImage,
                        contentScale = if (eciImageVideoModel.aspectRatio > FULL_ASPECT_RATIO) ContentScale.FillWidth else ContentScale.FillHeight,
                        contentDescription = eciImageVideoModel.imageContentDescription,
                    ),
            )

@Composable
fun *OnMediaType*(
navigationItem: NavigationModel,
mediaElements: Int,
aspectRatio: Float = _CATEGORY_CARD_ASPECT_RATIO_,
) {
val backgroundColor = _parseColorOrNull_(navigationItem.background) ?: Color.Transparent
val modifier =
Modifier
._background_(backgroundColor)
CommonImage(
customImageVideoModel =
CustomImageVideoDisplay(
mediaElements = mediaElements,
backgroundImage = navigationItem.picture?.source,
label = navigationItem.label?.text,
labelColor = navigationItem.label?.color,
backgroundColor = navigationItem.background,
position = navigationItem.label?.position?.let { fromPositionName(it.positionName) },
backgroundVideo = navigationItem.video?.source,
resizeMode = AspectRatioFrameLayout._RESIZE_MODE_FILL_,
onClick = {
handleOnClick(navigationItem)
},
aspectRatio = aspectRatio,
),
modifier = modifier,
)
}
@Composable
fun *OnRowType*(navigationChildList: ListNavigationModel?) {
navigationChildList?.let { navChildList ->
val mediaElements = navChildList.size
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier,
) {
navChildList.forEach { item ->
OnMediaType(item, mediaElements, _CATEGORY_CARD_ASPECT_RATIO_)
}
}
}
}.

data class CustomAsyncImageDisplay(
    val imageUrl: String,
    val contentDescription: String = BLANK_SPACE,
    val contentScale: ContentScale = ContentScale.Fit,
    val aspectRatio: Float? = null,
    val shape: Shape? = null,
    @DrawableRes val loadingPlaceholder: Int = R.color.warm_gray_20,
    @DrawableRes val errorPlaceholder: Int = R.drawable.product_error_placeholder,
)