Change the ripple of the IconButton

Question

how I can fix this

@Composable
fun Body() {

    val scrollState = rememberScrollState()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(10.dp),
        modifier = Modifier
            .verticalScroll(state = scrollState)
            .fillMaxSize()
            .padding(top = 10.dp)
    ) {

        //....

        Surface(
            color = Color.LightGray,
            modifier = Modifier
                .fillMaxWidth(0.95f),
            shape = RoundedCornerShape(CornerSize(10.dp)),
            elevation = 1.dp,
        ) {

            var expanded by remember { mutableStateOf(false) }

            Column(
                verticalArrangement = Arrangement.spacedBy(5.dp)
            ) {

                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {

                    //....

                    IncrementDecrementButton()
                }

                //...
            }
        }
    }
}

I use .offset to reduce the spaces between the buttons and the text

@Composable
fun IncrementDecrementButton() {

    var Number by remember { mutableStateOf(1) }

    IconButton(onClick = { Number += 1 }) {
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = "",
            modifier = Modifier
                .size(20.dp)
                .offset(x = 10.dp)
        )
    }

    Text(
        text = "$Number",
        modifier = Modifier
            .size(20.dp),
        textAlign = TextAlign.Center
    )

    IconButton(
        onClick = {
            if (Number > 1)
                Number -= 1
        }
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_baseline_remove_24),
            contentDescription = "",
            modifier = Modifier
                .size(20.dp)
                .offset(x = (-10).dp)
        )
    }
}

Answer 1

The animation is the ripple related to the IconButton but you can't change the radius of the Ripple since it is embedded inside the IconButton.

If you want to change the dimension of the IconButton, you can use something like:

    Box(
        modifier = Modifier
            .padding(1.dp)
            .size(20.dp)
            .clickable(
                onClick = { Number += 1 },
                enabled = enabled,
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false, radius = 10.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
        CompositionLocalProvider(LocalContentAlpha provides contentAlpha){
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "",
            )
        }
    }