{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

TabKt

public final class TabKt


Summary

Public methods

static final void
@Composable
LeadingIconTab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> text,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource
)

Material Design tab.

static final void
@Composable
Tab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design tab.

static final void
@Composable
Tab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> text,
    @Composable Function0<Unit> icon,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource
)

Material Design tab.

Public methods

LeadingIconTab

@Composable
public static final void LeadingIconTab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> text,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource
)

Material Design tab.

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

A LeadingIconTab represents a single page of content using a text label and an icon in front of the label. It represents its selected state by tinting the text label and icon with selectedContentColor.

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

Parameters
boolean selected

whether this tab is selected or not

@NonNull Function0<Unit> onClick

called when this tab is clicked

@Composable @NonNull Function0<Unit> text

the text label displayed in this tab

@Composable @NonNull Function0<Unit> icon

the icon displayed in this tab. Should be 24.dp.

@NonNull Modifier modifier

the Modifier to be applied to this tab

boolean enabled

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Color selectedContentColor

the color for the content of this tab when selected, and the color of the ripple.

@NonNull Color unselectedContentColor

the color for the content of this tab when not selected

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this tab. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this tab in different states.

See also
Tab

Tab

@Composable
public static final void Tab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design tab.

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

Tabs image

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.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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) MaterialTheme.colorScheme.primary
                    else MaterialTheme.colorScheme.background
                )
        )
        Text(
            text = title,
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}
Parameters
boolean selected

whether this tab is selected or not

@NonNull Function0<Unit> onClick

called when this tab is clicked

@NonNull Modifier modifier

the Modifier to be applied to this tab

boolean enabled

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Color selectedContentColor

the color for the content of this tab when selected, and the color of the ripple.

@NonNull Color unselectedContentColor

the color for the content of this tab when not selected

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this tab. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this tab in different states.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

the content of this tab

Tab

@Composable
public static final void Tab(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> text,
    @Composable Function0<Unit> icon,
    @NonNull Color selectedContentColor,
    @NonNull Color unselectedContentColor,
    @NonNull MutableInteractionSource interactionSource
)

Material Design tab.

A default Tab, also known as a Primary Navigation Tab. Tabs organize content across different screens, data sets, and other interactions.

Tabs image

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
boolean selected

whether this tab is selected or not

@NonNull Function0<Unit> onClick

called when this tab is clicked

@NonNull Modifier modifier

the Modifier to be applied to this tab

boolean enabled

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@Composable Function0<Unit> text

the text label displayed in this tab

@Composable Function0<Unit> icon

the icon displayed in this tab

@NonNull Color selectedContentColor

the color for the content of this tab when selected, and the color of the ripple.

@NonNull Color unselectedContentColor

the color for the content of this tab when not selected

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this tab. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this tab in different states.

See also
LeadingIconTab