How can I create the tab with radius in the Jetpack Compose-CodePudding

I want to create this tab in the jetpack compose but I do not know what this view is called and how it is created. Does anyone know what this view is called and how it is created?

CodePudding user response：

The Compose function for tabs is called TabRow. To make corners of the TabRow round you can use clip modifier. Here is a full example of creating a similar tab layout to the one in the image.

    var tabIndex by remember { mutableStateOf(0) }
    val tabTitles = listOf("Tab 1", "Tab 2", "Tab 3")
    val shape = RoundedCornerShape(20.dp) //define border radius here
    Column {
        TabRow(selectedTabIndex = tabIndex,
            modifier = Modifier.clip(
                shape = shape
            ).border(1.dp, Color.Blue, shape = shape),
            indicator = {
                TabRowDefaults.Indicator(
                    color = Color.Transparent
                )
            },
            backgroundColor = Color.White) {
                tabTitles.forEachIndexed { index, title ->
                    Tab(selected = tabIndex == index,
                        onClick = { tabIndex = index },
                        text = { Text(text = title)},
                        modifier = Modifier.background(if(tabIndex == index) Color.Blue else Color.White),
                        selectedContentColor = Color.White,
                        unselectedContentColor = Color.Blue
                        )
            }
        }
        when (tabIndex) {  //show your screens here
            0 -> Text("Show tab 1")
            1 -> Text("Show tab 2")
            2 -> Text("Show tab 3")
        }
    }