I am trying to get Tabs working with a TabRow on Android with compose. What I'd like is the TabRow to have a white background. The default color seems to be this purple(ish) as shown in the documentation ( https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary ).
When I set backgroundColor to White the Tabs are grey for some reason.
How would you achieve white Tabs in Compose?
Thanks!
EDIT: Google have now fixed this issue: https://issuetracker.google.com/issues/197254738 . Hopefully it will find its way into a JC release soon!
Question's a couple of months old, but recently encountered this issue so others might find these solutions useful:
Don't have a divider. For example:
TabRow(
selectedTabIndex = ...,
modifier = Modifier.height(100.dp).fillMaxWidth(),
divider = {}
) { /* content here */ }
Since the TabRow is just a container, don't specify a height
in its modifier. If you want it to have a custom height, instead make sure that each of the Tabs have their heights specified explicitly. For example:
var selectedTabIndex by remember { mutableStateOf(0) }
TabRow(
selectedTabIndex = selectedTabIndex,
modifier = Modifier.fillMaxWidth(), // Don't specify the TabRow's height!
backgroundColor = Colors.White
) {
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) }
)
}
}
Force the divider to only draw at the bottom of the layout. This is consistent with the default indicator implementation.
TabRow(
selectedTabIndex = ...,
modifier = Modifier.height(100.dp).fillMaxWidth(),
backgroundColor = Colors.White,
divider = { TabRowDefaults.Divider(Modifier.wrapContentSize(Alignment.BottomStart)) },
) { /* content here */ }
From the source code here and here , the default divider has height 1dp. However, the OP is seeing a grey background because the divider is drawing over the whole TabRow!
When you specify a height
constraint on a TabRow
, the constraint gets passed through to the divider (source code here ). The divider therefore takes up the entire height of the TabRow – in OP's case, the divider is a transparent grey colour, so it makes the TabRow look grey. The above solutions have a few different ways to solve the problem:
You can set color using backgroundColor: Color = MaterialTheme.colors.primarySurface,
.
( For Documentation read this )
Sample code below:
@Composable
fun TabRow(
selectedTabIndex: Int,
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
indicator: (List<TabPosition>) -> Unit = @Composable { tabPositions ->
TabRowDefaults.Indicator(
Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
)
},
divider: () -> Unit = @Composable {
TabRowDefaults.Divider()
},
tabs: () -> Unit
): @Composable Unit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.