How can we move "tab indicator" of Tab layout to top in "jetpack compose"? By default it is appearing at bottom of selected tab

user_19084893 0
Viewed 167
TabRow(
                selectedTabIndex = tabIndex,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                indicator = {tabPositions-> 
                    Box(
                        modifier = Modifier
                            .tabIndicatorOffset(tabPositions[tabIndex])
                            .height(indicatorSize)
                            .background(color = indicatorColor)
                    )
                }
            )

Can we add anything in indicator to move it to top? I couldn't see similar to this "app:tabIndicatorGravity" in jetpack compose.

android-jetpack-compose android
1 Answers

There isn't a parameter to do that.

It is a workaround.
Currently the tab height is defined by

private val SmallTabHeight = 48.dp.   //only text
private val LargeTabHeight = 72.dp.   //text + icon

You can define your own indicator applying an offset:

@Composable
fun TopIndicator(color: Color, modifier: Modifier = Modifier) {
    Box(
        modifier
            .fillMaxWidth()
            .offset(y= (-46).dp)  //SmallTabHeight=48.dp - height indicator=2.dp
            .height(2.dp)
            .background(color = color)
    )
}

and in your code:

// Reuse the default offset animation modifier, but use our own indicator
val indicator = @Composable { tabPositions: List<TabPosition> ->
    TopIndicator(Color.White, Modifier.tabIndicatorOffset(tabPositions[state]))
}

TabRow(
        selectedTabIndex = state,
        indicator = indicator
){
        //...
}

enter image description here

user_20165620
Related