My requirement is to show the tab items and the indicator below them. The indicator is such that it below the text and cover extra space before and after the text.
requirement
val density = LocalDensity.current
val tabWidths = remember {
val tabWidthStateList = mutableStateListOf<Dp>()
repeat(items.size) {
tabWidthStateList.add(0.dp)
}
tabWidthStateList
}
ScrollableTabRow(
selectedTabIndex = selectedItemIndex,
edgePadding = 0.dp,
indicator = { tabPositions ->
TabRowDefaults.Indicator(
modifier = Modifier.customTabIndicatorOffset(
currentTabPosition = tabPositions[selectedItemIndex],
tabWidth = tabWidths[selectedItemIndex],
indicatorPaddingToTitle = indicatorPaddingToTitle,
),
color = selectedTabTextColor
)
},
divider = {}, // Removes the default divider
modifier = Modifier.fillMaxWidth()
) {
items.forEachIndexed { index, title ->
Box(
contentAlignment = Alignment.TopCenter
){
Tab(
selected = selectedItemIndex == index,
onClick = { onTabSwitch(index) },
text = {
Text(
text = title,
style = if (selectedItemIndex == index)
MaterialTheme.typography.bodyMedium.copy(
fontWeight = FontWeight.Bold,
color = selectedTabTextColor
)
else
MaterialTheme.typography.bodyMedium.copy(
fontWeight = FontWeight.Medium,
color = unselectedTabTextColor
),
onTextLayout = { textLayoutResult ->
tabWidths[index] =
with(density) { textLayoutResult.size.width.toDp() }
}
)
},
)
}
}
}
The result of this looks like this output
If you see the starting padding for first item is bit more than what i want.
I tried some different approach that is to wrap the Tab item inside the Box with contentAlignment = TopStart, at that time the padding is fixed but indicator position is lost. One more thing when i use contentAlignment = Alignment.TopCenter then the padding issue comes back, from somewhere if the alignment is center it adding additional padding around tab.
Want to know is there any way i can manage that start padding without disrupting the indicator.