Tab

Common/AllAndroid/JVM

Functions summary

Unit	@Composable Tab(     selected: Boolean,     onClick: () -> Unit,     modifier: Modifier,     enabled: Boolean,     interactionSource: MutableInteractionSource?,     selectedContentColor: Color,     unselectedContentColor: Color,     content: @Composable ColumnScope.() -> Unit ) Material Design tab	Cmn
Unit	@Composable Tab(     selected: Boolean,     onClick: () -> Unit,     modifier: Modifier,     enabled: Boolean,     text: (@Composable () -> Unit)?,     icon: (@Composable () -> Unit)?,     interactionSource: MutableInteractionSource?,     selectedContentColor: Color,     unselectedContentColor: Color ) Material Design tab	Cmn

Functions

Tab

Cmn

Artifact: androidx.compose.material:material

View Source

@Composable
fun Tab(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium),
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design tab

Tabs organize content across different screens, data sets, and other interactions.

Generic Tab overload that is not opinionated about content / color. See the other overload for a Tab that has specific slots for text and / or an icon, as well as providing the correct colors for selected / unselected states.

A custom tab using this API may look like:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Tab
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Tab(selected, onClick) {
    Column(
        Modifier.padding(10.dp).height(50.dp).fillMaxWidth(),
        verticalArrangement = Arrangement.SpaceBetween,
    ) {
        Box(
            Modifier.size(10.dp)
                .align(Alignment.CenterHorizontally)
                .background(color = if (selected) Color.Red else Color.White)
        )
        Text(
            text = title,
            style = MaterialTheme.typography.body1,
            modifier = Modifier.align(Alignment.CenterHorizontally),
        )
    }
}

Parameters
selected: Boolean	whether this tab is selected or not
onClick: () -> Unit	the callback to be invoked when this tab is selected
modifier: Modifier = Modifier	optional Modifier for this tab
enabled: Boolean = true	controls the enabled state of this tab. When false, this tab will not be clickable and will appear disabled to accessibility services.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this tab. You can use this to change the tab's appearance or preview the tab in different states. Note that if null is provided, interactions will still happen internally.
selectedContentColor: Color = LocalContentColor.current	the color for the content of this tab when selected, and the color of the ripple.
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)	the color for the content of this tab when not selected
content: @Composable ColumnScope.() -> Unit	the content of this tab

Tab

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.10.0

@Composable
fun Tab(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    text: (@Composable () -> Unit)? = null,
    icon: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null,
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit

Material Design tab

Tabs organize content across different screens, data sets, and other interactions.

A Tab represents a single page of content using a text label and/or icon. It represents its selected state by tinting the text label and/or image with selectedContentColor.

This should typically be used inside of a TabRow, see the corresponding documentation for example usage.

This Tab has slots for text and/or icon - see the other Tab overload for a generic Tab that is not opinionated about its content.

Parameters
selected: Boolean	whether this tab is selected or not
onClick: () -> Unit	the callback to be invoked when this tab is selected
modifier: Modifier = Modifier	optional Modifier for this tab
enabled: Boolean = true	controls the enabled state of this tab. When false, this tab will not be clickable and will appear disabled to accessibility services.
text: (@Composable () -> Unit)? = null	the text label displayed in this tab
icon: (@Composable () -> Unit)? = null	the icon displayed in this tab
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this tab. You can use this to change the tab's appearance or preview the tab in different states. Note that if null is provided, interactions will still happen internally.
selectedContentColor: Color = LocalContentColor.current	the color for the content of this tab when selected, and the color of the ripple.
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)	the color for the content of this tab when not selected

See also
LeadingIconTab