# TabRow

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/TabRow.composable#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function2,kotlin.Function1)( selectedTabIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, separator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (tabPositions: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect>, doesTabRowHaveFocus: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/TabRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` TV-Material Design Horizontal TabRow |

## Functions

### TabRow

Artifact: [androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/TabRow.kt+function:TabRow)

```
@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.ContainerColor,
    contentColor: Color = TabRowDefaults.contentColor(),
    separator: @Composable () -> Unit = { TabRowDefaults.TabSeparator() },
    indicator: @Composable (tabPositions: List<DpRect>, doesTabRowHaveFocus: Boolean) -> Unit = @Composable { tabPositions, doesTabRowHaveFocus ->
            tabPositions.getOrNull(selectedTabIndex)?.let { currentTabPosition ->
                TabRowDefaults.PillIndicator(
                    currentTabPosition = currentTabPosition,
                    doesTabRowHaveFocus = doesTabRowHaveFocus,
                )
            }
        },
    tabs: @Composable TabRowScope.() -> Unit
): Unit
```

TV-Material Design Horizontal TabRow

Display all tabs in a set simultaneously and if the tabs exceed the container size, it has scrolling to navigate to next tab. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between tabs, use d-pad left or d-pad right when focused.

A TvTabRow contains a row of \[\]s, and displays an indicator underneath the currently selected tab. A TvTabRow places its tabs offset from the starting edge, and allows scrolling to tabs that are placed off screen.

Examples:

```kotlin
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

TabRow(selectedTabIndex = selectedTabIndex, modifier = Modifier.focusRestorer()) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(selected = index == selectedTabIndex, onFocus = { selectedTabIndex = index }) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                )
            }
        }
    }
}
```

```kotlin
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabDefaults
import androidx.tv.material3.TabRow
import androidx.tv.material3.TabRowDefaults
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

TabRow(
    selectedTabIndex = selectedTabIndex,
    indicator = { tabPositions, doesTabRowHaveFocus ->
        TabRowDefaults.UnderlinedIndicator(
            currentTabPosition = tabPositions[selectedTabIndex],
            doesTabRowHaveFocus = doesTabRowHaveFocus,
        )
    },
    modifier = Modifier.focusRestorer(),
) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(
                selected = index == selectedTabIndex,
                onFocus = { selectedTabIndex = index },
                colors = TabDefaults.underlinedIndicatorTabColors(),
            ) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                )
            }
        }
    }
}
```

```kotlin
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

// This index will be used to show a panel
var tabPanelIndex by remember { mutableStateOf(selectedTabIndex) }

// Change the tab-panel only after some delay
LaunchedEffect(selectedTabIndex) {
    delay(250.microseconds)
    tabPanelIndex = selectedTabIndex
}

TabRow(selectedTabIndex = selectedTabIndex, modifier = Modifier.focusRestorer()) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(selected = index == selectedTabIndex, onFocus = { selectedTabIndex = index }) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                )
            }
        }
    }
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.TabRowDefaults
import androidx.tv.material3.Text

val bgColors =
    listOf(
        Color(0x6a, 0x16, 0x16),
        Color(0x6a, 0x40, 0x16),
        Color(0x6a, 0x6a, 0x16),
        Color(0x40, 0x6a, 0x16),
    )

var focusedTabIndex by remember { mutableStateOf(0) }
var activeTabIndex by remember { mutableStateOf(focusedTabIndex) }

Box(modifier = Modifier.fillMaxSize().background(bgColors[activeTabIndex])) {
    TabRow(
        selectedTabIndex = focusedTabIndex,
        indicator = { tabPositions, doesTabRowHaveFocus ->
            // FocusedTab's indicator
            TabRowDefaults.PillIndicator(
                currentTabPosition = tabPositions[focusedTabIndex],
                activeColor = Color.Blue.copy(alpha = 0.4f),
                inactiveColor = Color.Transparent,
                doesTabRowHaveFocus = doesTabRowHaveFocus,
            )

            // SelectedTab's indicator
            TabRowDefaults.PillIndicator(
                currentTabPosition = tabPositions[activeTabIndex],
                doesTabRowHaveFocus = doesTabRowHaveFocus,
            )
        },
        modifier = Modifier.focusRestorer(),
    ) {
        repeat(bgColors.size) {
            key(it) {
                Tab(
                    selected = activeTabIndex == it,
                    onFocus = { focusedTabIndex = it },
                    onClick = {
                        focusedTabIndex = it
                        activeTabIndex = it
                    },
                ) {
                    Text(
                        text = "Tab ${it + 1}",
                        fontSize = 12.sp,
                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                    )
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `selectedTabIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | the index of the currently selected tab |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this tab row |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = TabRowDefaults.ContainerColor` | the color used for the background of this tab row |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = TabRowDefaults.contentColor()` | the primary color used in the tabs |
| `separator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { TabRowDefaults.TabSeparator() }` | use this composable to add a separator between the tabs |
| `indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (tabPositions: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect>, doesTabRowHaveFocus: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = @Composable { tabPositions, doesTabRowHaveFocus -> tabPositions.getOrNull(selectedTabIndex)?.let { currentTabPosition -> TabRowDefaults.PillIndicator( currentTabPosition = currentTabPosition, doesTabRowHaveFocus = doesTabRowHaveFocus, ) } }` | used to indicate which tab is currently selected and/or focused. This lambda provides 2 values: - tabPositions: list of `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect` which provides the position of each tab - doesTabRowHaveFocus: whether any `https://developer.android.com/reference/kotlin/androidx/tv/material3/Tab.composable#(androidx.tv.material3.TabRowScope).Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.tv.material3.TabColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` within `https://developer.android.com/reference/kotlin/androidx/tv/material3/TabRow.composable#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function2,kotlin.Function1)` is focused |
| `tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/TabRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | a composable which will render all the tabs |