Custom TabRow in Jetpack Compose

Question

I use TabRow and I have two questions:

• Is it possible to remove a line that is wide the entire width screen?

• How Can I bring the buttons together (reduce space between them)

Answer 1

To remove the line under the tabs just set an empty divider by passing divider = {}.

To make the tabs fill the space available in the TabRow (therefore without empty spaces), just do not set a specific size to the Tabs, the following example works as you ask.

var state by remember { mutableStateOf(0) }
val titles = listOf("TAB 1", "TAB 2")
Column {
    TabRow(selectedTabIndex = state, divider = {}) {
        titles.forEachIndexed { index, title ->
            Tab(
                text = { Text(title) },
                selected = state == index,
                onClick = { state = index }
            )
        }
    }
}