How to change pressed Tab color in TabRow in Android Jetpack Compose?

Question

I have a simple Jetpack Compose TabRow example on Kotlin from documentation, where I just changed a text and underline color. But there is an orange background color when the tab is pressed. I want to make it transparent.

var state by remember { mutableStateOf(0) }
val titles = listOf("TOP", "NEW", "HOT")
Column {
    TabRow(
        contentColor = MaterialTheme.colors.primaryVariant, // This is underline's color
        selectedTabIndex = state
    ) {
        titles.forEachIndexed { index, title ->
            Tab(
                selectedContentColor = MaterialTheme.colors.primaryVariant,
                unselectedContentColor = MaterialTheme.colors.secondary,
                text = { Text(title) },
                selected = state == index,
                onClick = { state = index }
            )
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Text tab ${state + 1} selected",
        style = MaterialTheme.typography.body1
    )
}

Answer 1

Right now, you can set backgroundColor for tabs like this:

TabRow(
   selectedTabIndex = state,
   ...
   backgroundColor = Color.White
)

Answer 2

If by pressed color, you are referring to this tab,

This is created by the Tab's ripple color.

This color would be affected by the selectedContentColor attribute in Tab.
But, even if you specify Transparent you would see a greyish ripple effect.

Modify the attribute to match with the closes satisfiable color as required.

---

The code creating the ripple effect.

// The color of the Ripple should always the selected color, as we want to show the color
// before the item is considered selected, and hence before the new contentColor is
// provided by TabTransition.
val ripple = rememberRipple(bounded = true, color = selectedContentColor)

As this is an internal implementation detail, we cannot disable it. ()