I'm working on a Jetpack Compose project and trying to create a TabRow with tabs, like this:
PrimaryTabRow(selectedTabIndex = state) {
list.forEachIndexed { index, title ->
Tab(
selected = state == index,
onClick = { state = index },
text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) }
)
}
}
This code works well for left-to-right (LTR) languages. However, when I switch to a right-to-left (RTL) language, the default indicator glitches, as shown in this video.
Has anyone experienced this issue or have any ideas for workarounds?
This issue has already been reported on the Google Issue Tracker:
#359245765 #361375808
Both issues already were assigned to a person in the Android Team. You can star the issues to draw more attention to them.
A suggested workaround is to programmatically rotate the indicators when there is a RTL layout detected. Please try the following code:
PrimaryTabRow(
selectedTabIndex = selectedTabIndex,
indicator = {
TabRowDefaults.PrimaryIndicator(
modifier = Modifier.run {
if (LocalLayoutDirection.current == LayoutDirection.Rtl)
scale(-1f, 1f) //or rotate(180f)
else
this
}.tabIndicatorOffset(selectedTabIndex, true),
width = Dp.Unspecified,
)
}
) {
//...
}