CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-compose-cardandroid-compose-image
Raj Narayanan
Raj Narayanan

Reputation: 3412

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 = {
                        })
                )
            }
        }
    }
}

Upvotes: 3

Views: 925

Answers (1)

Thracian
Thracian

Reputation: 66599

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

Upvotes: 5

Related Questions