Using IconButton to display a drawable in the Image using jetpack compose

Question

This displays correctly using the AsyncImage. But I would like to use it in a IconButton, but the affect is different. See below for IconButton with an Image

 AsyncImage(
                    model = R.drawable.add_photo,
                    contentDescription = stringResource(R.string.selected_image),
                    modifier = Modifier
                        .size(60.dp)
                        .border(
                            width = 2.dp,
                            color = MaterialTheme.colorScheme.photoPickerBorderColor,
                            shape = RoundedCornerShape(5.dp)
                        )
                        .clip(shape = RoundedCornerShape(5.dp)).
                        clickable {
                            onAddPhotosClicked()
                        })

And I am trying to use the IconButton here with an Image with the same properties, just wondering why does it display like this, as it seems to be clipping the corners. Is there anyway to display it like in the AsyncImage

        IconButton(
            onClick = {
                onAddPhotosClicked()
            }) {
            Image(
                painter = painterResource(id = R.drawable.add_photo),
                contentDescription = stringResource(id = R.string.add_photos),
                modifier = Modifier
                    .size(60.dp)
                    .border(
                        width = 2.dp,
                        color = MaterialTheme.colorScheme.photoPickerBorderColor,
                        shape = RoundedCornerShape(5.dp)
                    )
                    .clip(shape = RoundedCornerShape(5.dp)),
            )
        }

score 1 · Answer 1 · answered May 16 '23 at 18:42

It's because M3 icon button clips with md.sys.shape.corner.full which is a circle as can be in official document.

And the source code of IconButton for M3, you can see for M2 in this answer

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) {
    Box(
        modifier = modifier
            .minimumInteractiveComponentSize()
            .size(IconButtonTokens.StateLayerSize)
            .clip(IconButtonTokens.StateLayerShape.toShape())
            .background(color = colors.containerColor(enabled).value)
            .clickable(
                onClick = onClick,
                enabled = enabled,
                role = Role.Button,
                interactionSource = interactionSource,
                indication = rememberRipple(
                    bounded = false,
                    radius = IconButtonTokens.StateLayerSize / 2
                )
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentColor = colors.contentColor(enabled).value
        CompositionLocalProvider(LocalContentColor provides contentColor, content = content)
    }

You can easily copy source code and remove clip or create your own Box with similar properties.

Using IconButton to display a drawable in the Image using jetpack compose

1 Answers1