I want change the color of TabRow to black using indicatorColor = Color.Black, but in material3 indicatorColor not exist anymore

Question

By default the selected tab underlined color is white, but i want to change to Black using "indicatorColor "

But in material 3 indicatorColor is exist anymore is there any other ways to do it

Image link click here

Trying to change the selected tab's underlined color to balck

Answer 1

In Material 3, Tab Row has the following signature

@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.containerColor,
    contentColor: Color = TabRowDefaults.contentColor,
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        if (selectedTabIndex < tabPositions.size) {
            TabRowDefaults.SecondaryIndicator(
                Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
            )
        }
    },
    divider: @Composable () -> Unit = @Composable {
        Divider()
    },
    tabs: @Composable () -> Unit
)

Inside the secondIndicator method of TabRowDefaults, you can pass your desired colour as an argument here. What i did is , i copied this composable, which was passed as default in the method signature, added my own custom colour.

TabRow(modifier = Modifier.padding(paddingValues), selectedTabIndex = selectedIndex,
                indicator = {
                    tabPositions ->
                    if (selectedIndex < tabPositions.size) {
                        TabRowDefaults.SecondaryIndicator(
                                Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
                                color = colorResource(id = R.color.black)
                        )
                    }
                }) 

if you have multiple usage of TabRow then you can wrap above TabRow inside your own custom composable which accepts colour as one of its parameter.