How to make a chip retain its shape after click-event in compose?-CodePudding

I am currently trying to make it so that when the user has clicked the chip it still retains it's initial form/shape, in this case round. How can I achieve this?

This is how it operates currently: https://gyazo.com/bdbe867adb5c9e75381f7ac923134709

The Chip code:


@Composable
fun TextChip(
    isSelected: Boolean,
    text: String,
    onChecked: (Boolean) -> Unit,
    selectedColor: Color = DarkGray,
    shape: Shapes,
) {
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .wrapContentSize()
            .border(
                width = 1.dp,
                color = if (isSelected) selectedColor else LightGray,
                shape = RoundedCornerShape(20.dp)
            )
            .background(
                color = if (isSelected) selectedColor else Transparent,
            )
            .clickable {
                onChecked(!isSelected)
            }
            .padding(top = 3.dp, bottom = 3.dp, start = 17.dp, end = 17.dp)


    ) {
        Text(
            text = text,
            fontSize = 21.sp,
            fontWeight = FontWeight.Bold,
            color = if (isSelected) Color.White else Unspecified, // Text inside, when clicked, gives color to the text!
        )
    }
}


@Composable
fun FirstChip() {
    // Chip View
    val textChipRememberOneState = remember { mutableStateOf(false) }

    TextChip(
        isSelected = textChipRememberOneState.value,
        shape = Shapes(medium = RoundedCornerShape(15.dp)),
        text = "Action",
        selectedColor = LightGreen,
        onChecked = {
            textChipRememberOneState.value = it
        },


    )
}

CodePudding user response：

You should set the shape for your Modifier.background(color, shape) but it won't clip your click ripple and it will be as in gif with a Rectangle shape. You can use Modifier.clip() to clip background and ripple as

    modifier = Modifier
        .wrapContentSize()
        .border(
            width = 1.dp,
            color = if (isSelected) selectedColor else LightGray,
            shape = RoundedCornerShape(20.dp)
        )
        .clip(RoundedCornerShape(20.dp))
        .background(
            color = if (isSelected) selectedColor else Transparent,
        )
        .clickable {
            onChecked(!isSelected)
        }
        .padding(top = 3.dp, bottom = 3.dp, start = 17.dp, end = 17.dp)

CodePudding user response：

You should use existing chip @Composable function. There are 4 chip types - Assist chip, filter chip, input chip, suggestion chip. FilterChip is best for you to use. You can simply call FilterChip function:

@Composable
fun FirstChip() {
    // Chip View
    val textChipRememberOneState = remember { mutableStateOf(false) }

    FilterChip(
        selected = textChipRememberOneState.value,
        onClick = { textChipRememberOneState.value = ! textChipRememberOneState.value},
        label = { Text("Action") }
    )
}