ScrollableTabRow

Functions summary

Unit
@Composable
@UiComposable
ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier,
    backgroundColor: Color,
    contentColor: Color,
    edgePadding: Dp,
    indicator: @Composable @UiComposable (tabPositions: List<TabPosition>) -> Unit,
    divider: @Composable @UiComposable () -> Unit,
    tabs: @Composable @UiComposable () -> Unit
)

Material Design scrollable tabs

Cmn

Functions

ScrollableTabRow

@Composable
@UiComposable
fun ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    edgePadding: Dp = TabRowDefaults.ScrollableTabRowPadding,
    indicator: @Composable @UiComposable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions -> TabRowDefaults.Indicator(Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])) },
    divider: @Composable @UiComposable () -> Unit = @Composable { TabRowDefaults.Divider() },
    tabs: @Composable @UiComposable () -> Unit
): Unit

Material Design scrollable tabs

When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.

Scrollable tabs
image

A ScrollableTabRow contains a row of Tabs, and displays an indicator underneath the currently selected tab. A ScrollableTabRow places its tabs offset from the starting edge, and allows scrolling to tabs that are placed off screen. For a fixed tab row that does not allow scrolling, and evenly places its tabs, see TabRow.

Parameters
selectedTabIndex: Int

the index of the currently selected tab

modifier: Modifier = Modifier

optional Modifier for this ScrollableTabRow

backgroundColor: Color = MaterialTheme.colors.primarySurface

The background color for the ScrollableTabRow. Use Color.Transparent to have no color.

contentColor: Color = contentColorFor(backgroundColor)

The preferred content color provided by this ScrollableTabRow to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this ScrollableTabRow.

edgePadding: Dp = TabRowDefaults.ScrollableTabRowPadding

the padding between the starting and ending edge of ScrollableTabRow, and the tabs inside the ScrollableTabRow. This padding helps inform the user that this tab row can be scrolled, unlike a TabRow.

indicator: @Composable @UiComposable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions -> TabRowDefaults.Indicator(Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])) }

the indicator that represents which tab is currently selected. By default this will be a TabRowDefaults.Indicator, using a TabRowDefaults.tabIndicatorOffset modifier to animate its position. Note that this indicator will be forced to fill up the entire ScrollableTabRow, so you should use TabRowDefaults.tabIndicatorOffset or similar to animate the actual drawn indicator inside this space, and provide an offset from the start.

divider: @Composable @UiComposable () -> Unit = @Composable { TabRowDefaults.Divider() }

the divider displayed at the bottom of the ScrollableTabRow. This provides a layer of separation between the ScrollableTabRow and the content displayed underneath.

tabs: @Composable @UiComposable () -> Unit

the tabs inside this ScrollableTabRow. Typically this will be multiple Tabs. Each element inside this lambda will be measured and placed evenly across the TabRow, each taking up equal space.