How to implement sliding animation for selector in Jetpack Compose?

Viewed 23

I have the following code:

@Composable
internal fun ActivityInputBottomSheet() {
    val items = listOf("Calories", "Steps", "Water")
    var currentActive by remember {
        mutableStateOf(items[0])
    }
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier
                .clip(CircleShape)
                .background(Color.Red),
            verticalAlignment = Alignment.CenterVertically
        ) {
            items.forEach {
                Text(
                    it,
                    modifier = Modifier
                        .clip(CircleShape)
                        .background(if (it == currentActive) Color.Blue else Color.Transparent)
                        .clickable {
                            currentActive = it
                        }
                        .padding(
                            vertical = Padding.Padding8,
                            horizontal = Padding.Padding16
                        ),
                    color = Color.White,
                )
            }
        }
    }
}

Here I implemented a selector with 3 options (when user clicks at the one option it becomes active, and all other become inactive). It works correctly, but I want to add animation of sliding from the one option to another while changing state of selector (for example if user clicks at the first option and then at the third, blue background will slide through the first, then second and stop at third option). How can it be achieved? Thanks in advance for any help!

0 Answers
Related