I am trying to use Tab Row in Jetpack compose i increased the indicatior height, now my text is hidden behind it. Is there any to put my text on top on tab Indicatior or anything else
This is my Main Activity i used Scaffold and called a function for creating TabLayout
Scaffold(backgroundColor = Color.Black) {
val tabs = listOf(
"Option1 ", "Option 2"
)
val scope= rememberCoroutineScope()
val pagerState= rememberPagerState(pageCount = tabs.size)
ChooseDeliveryPickup(
pagerState,
tabs,
{ Log.e("Hello","Yes")},
scope
)
}
This is the Function
@ExperimentalPagerApi
@Composable
fun ChooseDeliveryPickup(
pagerState: PagerState,
tabs: List<String>,
onClick: () -> Unit,
scope: CoroutineScope
) {
TabRow(
selectedTabIndex = pagerState.currentPage, backgroundColor = Color(0xFFEAECED),
modifier = Modifier
.padding(16.dp)
.height(40.dp)
.width(295.dp)
.clip(RoundedCornerShape(12.dp)),
indicator = { tabPositions ->
Box(
Modifier
.tabIndicatorOffset(tabPositions[pagerState.currentPage])
.height(139.dp)
.padding(4.dp)
.border(width = 139.dp, shape = RoundedCornerShape(8.dp), color = Color.White)
){
}
}
) {
tabs.forEachIndexed { index, s ->
Tab(selected = pagerState.currentPage == index, onClick = {
onClick()
scope.launch {
pagerState.animateScrollToPage(index)
}
}) {
var color = if (pagerState.currentPage == index) {
Color(0xFF0F0B28)
} else {
Color(0xFF585969)
}
Text(
text = s,
color = color,
fontFamily = interSemiBold,
fontSize = 12.sp,
lineHeight = 18.sp,
letterSpacing = (0.02).sp
)
}
}
}
}