CODEWITHSUNDEEP
androidandroid-jetpack-compose
Saeed Noshadi
Saeed Noshadi

Reputation: 1299

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

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?

enter image description here

Upvotes: 2

Views: 2687

Answers (1)

Gregor Rant
Gregor Rant

Reputation: 386

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, maxLines = 1, softWrap = false)},
                        modifier = Modifier.background(if(tabIndex == index) Color.Blue else Color.White)
                                           .drawBehind {
                                            drawLine(
                                                Color.Blue,
                                                Offset(size.width, 0f),
                                                Offset(size.width, size.height),
                                                4f
                                            )
                                        },
                        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")
        }
    }

Upvotes: 2

Related Questions