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?
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?
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")
}
}