androidandroid-jetpack-composeandroid-compose-cardandroid-compose-image

Icon drawable inside IconButton is black despite it being white


The Icon drawable inside the IconButton composable is black despite it being white. The picture below of the current setup shows the garbage can icon at the top right on an alpha background. How can I fix this issue?

enter image description here

@Composable
fun AppImage(
    modifier: Modifier = Modifier,
    imageUri: Uri = Uri.EMPTY,
    contentScale: ContentScale = ContentScale.None,
    contentDescription: String? = null,
    loadingImage: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Loading) -> Unit)? = null,
    successResult: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Success) -> Unit)? = null,
    errorResult: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Error) -> Unit)? = null
) {
    Card(
        modifier = Modifier
            .height(250.dp)
            .width(350.dp)
            .padding(15.dp)
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }) {
            },
        elevation = 7.dp
    ) {
        Box(
            modifier = Modifier
                .padding(16.dp)
                .wrapContentSize(Alignment.Center)
        ) {
            SubcomposeAsyncImage(
                model = imageUri,
                modifier = modifier,
                contentScale = contentScale,
                contentDescription = contentDescription,
                loading = loadingImage,
                success = successResult,
                error = errorResult
            )

            IconButton(
                onClick = {},
                modifier = Modifier
                    .clip(CircleShape)
                    .background(color = Color.Black.copy(alpha = 0.5f))
                    .align(Alignment.TopEnd)
                    .size(33.dp)
            ) {
                Icon(
                    painterResource(id = R.drawable.ic_filled_delete_30),
                    contentDescription = "Delete Item Picture",
                    modifier = Modifier
                        .clickable(onClick = {
                        })
                )
            }
        }
    }
}

Solution

  • You can chanage color of drawable using tint property of Icon

    @Composable
    fun Icon(
        painter: Painter,
        contentDescription: String?,
        modifier: Modifier = Modifier,
        tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
    )