I am trying to use Tab Row in Jetpack compose i increased the indicatior height, now my text is hidden behind it How to resolve it?

Viewed 2143

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

Here is image of problem

1 Answers

Try to put a zIndex on the modifier. Bigger for a tab modifier and lower for a indicator modifier. Indicator modifier:

modifier.zIndex(1f)

Tabs modifier:

modifier.zIndex(2f)
Related