androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3

Jetpack Compose TabRow Indicator Glitch in RTL Languages


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?


Solution

  • 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,
            )
        }
    ) {
        //...
    }