How to create a slide switch using jetpack compose?

Question

I want to create this type of slid switch using jetpack compose but I don't know how to do it can anyone help me with it? it will toggle between this 2 option

Answer 1

You can use TabRow like this:

val items = (0..1)
var activeTabIndex by remember { mutableStateOf(0) }

TabRow(
    selectedTabIndex = activeTabIndex, backgroundColor = Color.Transparent,
    indicator = {
        Box(
            Modifier
                .tabIndicatorOffset(it[activeTabIndex])
                .fillMaxSize()
                .background(color = Color.Cyan)
                .zIndex(-1F)
        )
    },
) {
    items.mapIndexed { i, item ->
        Tab(selected = activeTabIndex == i, onClick = { activeTabIndex = i }) {
            Icon(
                painter = painterResource(id = someIcon),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier.padding(vertical = 20.dp)
            )
        }
    }
}