IssueTracker

Jetpack Compose release version: 1.0.0, Android Studio Build: #AI-203.7717.56.2031.7621141, built on August 8, 2021, Kotlin version: 1.5.10

Steps to reproduce:

Create a TabRow with height in its modifier and the default divider and indicator:

var selectedIndex = remember { mutableStateOf(0) }

TabRow(
    selectedIndex = selectedIndex,
    modifier = Modifier.height(100.dp),
    backgroundColor = Color.White,
) {
    /* Any old content here, for example: */
    listOf("Hello", "World").forEachIndexed { i, text ->
        Tab(
            selected = selectedTabIndex == i,
            onClick = { selectedTabIndex = i },
            modifier = Modifier.height(50.dp), // Specify the Tab's height instead
            text = { Text(text) }
        )
    }
}

The indicator will draw correctly, but the divider will draw over the entire TabRow, giving the entire row an overlay of 88% transparent LocalContentColor. This is particularly obvious when the TabRow's backgroundColor is not the same as LocalContentColor (e.g. when the TabRow's background is transparent or white).

The issue is that the implementations of the default indicator and divider are inconsistent: the indicator has .wrapContentSize(Alignment.BottomStart) in its modifier (source code), but the divider doesn't. The constraints on the TabRow get propagated to the indicator and the divider, so the result is that the indicator draws correctly but the divider obeys the height constraint and covers the whole TabRow.

Workarounds include setting the TabRow's height by specifying height constraints on all of the tabs rather than the parent TabRow, setting the divider to TabRowDefaults.Divider(Modifier.wrapContentSize(Alignment.BottomStart)), or not using a divider (i.e. divider = {}), but if any of these are the intended use of TabRow then it isn't clear from the documentation.