androidx.compose.material3

A BottomAppBarScrollBehavior defines how a bottom app bar should behave when the content under it is scrolled.

A state object that can be hoisted to control and observe the bottom app bar state.

Button group scope used to indicate a Modifier.weight of a child element.

A date formatter interface used by DatePicker.

A state object that can be hoisted to observe the date picker state.

A state object that can be hoisted to observe the date range picker state.

Scope for the children of FloatingActionButtonMenu

A FloatingAppBarScrollBehavior defines how a floating app bar should behave when the content under it is scrolled.

A state object that can be hoisted to control and observe the floating app bar state.

A motion scheme provides all the FiniteAnimationSpecs for a MaterialTheme.

Scope for the children of a MultiChoiceSegmentedButtonRow

Interface that allows libraries to override the behavior of the NavigationBar component.

Represents the colors of the various elements of a drawer item.

Interface that allows libraries to override the behavior of the NavigationRail component.

An interface that controls the selectable dates and years in the date pickers UI.

Scope for the children of a SingleChoiceSegmentedButtonRow

Interface to represent the data of one particular Snackbar as a piece of the SnackbarHostState.

Interface to represent the visuals of one particular Snackbar as a piece of the SnackbarData.

Scope for the composable used to render a Tab indicator, this can be used for more complex indicators requiring layout information about the tabs like TabRowDefaults.PrimaryIndicator and TabRowDefaults.SecondaryIndicator

Scope for the label of a TextField or OutlinedTextField.

A state object that can be hoisted to observe the time picker state.

Scope for the children of ToggleFloatingActionButton

Tooltip scope for TooltipBox to be used to obtain the LayoutCoordinates of the anchor content, and to draw a caret for the tooltip.

The state that is associated with a TooltipBox.

A TopAppBarScrollBehavior defines how an app bar should behave when the content under it is scrolled.

A state object that can be hoisted to observe the wide navigation rail state.

State of the BottomSheetScaffold composable.

Represents the container and content colors used in a button in different states.

Represents the elevation for a button in different states.

The shapes that will be used in toggle buttons.

Represents a Locale for the calendar.

Represents the container and content colors used in a card in different states.

Represents the elevation for a card in different states.

Represents the colors used by the three different sections (checkmark, box, and border) of a Checkbox or TriStateCheckbox in different states.

This class is deprecated. Maintained for binary compatibility.

Represents the container and content colors used in a clickable chip in different states.

Represents the elevation used in a selectable chip in different states.

A color scheme holds all the named color parameters for a MaterialTheme.

Represents the colors used by the date picker.

Represents the different modes that a date picker can be at.

Specifies the colors that will be used in a drag handle in different states.

Specifies the shapes that will be used in a drag handle in different states.

Specifies the sizes that will be used in a drag handle in different states.

State of the ModalNavigationDrawer and DismissibleNavigationDrawer composable.

The type of element that can serve as a dropdown menu anchor.

Scope for ExposedDropdownMenuBox.

The possible positions for a FloatingActionButton attached to a Scaffold.

Represents the tonal and shadow elevation for a floating action button in different states.

The possible directions for a HorizontalFloatingAppBar or VerticalFloatingAppBar, used to determine the exit direction when a FloatingAppBarScrollBehavior is attached.

Represents the container and content colors used in an icon button in different states.

Class that describes the different supported widths of the IconButton.

The shapes that will be used in toggle buttons.

Represents the container and content colors used in a toggleable icon button in different states.

Represents the container and content colors used in a list item in different states.

Holds predefined Material Design shapes as RoundedPolygons that can be used at various components as they are, or as part of a Morph.

Represents the text and icon colors used in a menu item at different states.

Properties used to customize the behavior of a ModalBottomSheet.

Parameters available to NavigationBar.

Represents the colors of the various elements of a navigation item.

Represents the colors of the various elements of a navigation item.

Class that describes the different supported icon positions of the navigation item.

Parameters available to NavigationRail.

Represents the colors of the various elements of a navigation item.

Represents the color used by a RadioButton in different states.

Class that holds information about RangeSlider's active range.

Configuration for ripple appearance, provided using LocalRippleConfiguration.

Represents the colors used by a search bar in different states.

The different colors used in parts of the SegmentedButton in different states

Represents the container and content colors used in a selectable chip in different states.

Represents the elevation used in a selectable chip in different states.

Material surfaces can be displayed in different shapes.

State of a sheet composable, such as ModalBottomSheet

Class that describes the different supported item arrangements of the ShortNavigationBar.

Represents the color used by a Slider in different states.

This class is deprecated. Not necessary with the introduction of Slider state

Class that holds information about Slider's active range.

State of the SnackbarHost, which controls the queue and the current Snackbar being shown inside the SnackbarHost.

The shapes that will be used in SplitButtonLayout.

State of the SwipeToDismissBox composable.

Represents the colors used by a Switch in different states

Data class that contains information about a tab's position on screen, used for calculating where to place the indicator that shows which tab is selected.

Represents the colors of the input text, container, and content (including label, placeholder, leading and trailing icons) used in a text field in different states.

The position of the label with respect to the text field.

The label is positioned above and outside the text field container.

The default label position according to the Material specification.

Represents the colors used by a TimePicker in different states

Represents the different configurations for the layout of the Time Picker

The selection mode for the time picker

Represents the container and content colors used in a toggle button in different states.

Represents the colors used by a top app bar in different states.

A state object that can be hoisted to control and observe the top app bar state.

This class defines ways title and subtitle can be aligned along a TopAppBar's main axis.

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Class that describes the different supported item arrangements of the WideNavigationRail.

Represents the colors of the various elements of a wide navigation rail.

Contains default values used for AlertDialog and BasicAlertDialog.

Contains the baseline values used by AssistChip.

Default values used for Badge implementations.

Contains default values used for the bottom app bar implementations.

Contains the default values used by ModalBottomSheet and BottomSheetScaffold.

Contains the default values used by all 5 button types.

Default values used by ButtonGroup

Contains the default values used by all card types.

Defaults used in Checkbox and TriStateCheckbox.

Contains default values used by the DatePicker.

Contains default values used by the DateRangePicker.

NavigationBarComponentOverride used when no override is specified.

NavigationRailComponentOverride used when no override is specified.

Default values for Divider

Object to hold default values for ModalNavigationDrawer

Contains default values used by Exposed Dropdown Menu.

Contains the baseline values used by FilterChip.

Contains the default values used by FloatingActionButton

Contains default values used for the floating app bar implementations.

Contains the default values for all four icon and icon toggle button types.

Contains the baseline values used by an InputChip.

Contains the default values used by list items.

Contains default values by the LoadingIndicator.

Contains functions to access the current theme values provided at the call site's position in the hierarchy.

Contains default values used for DropdownMenu and DropdownMenuItem.

Default values for ModalBottomSheet

Default values for ModalWideNavigationRail.

Defaults used in NavigationBar.

Defaults used in NavigationBarItem.

Defaults used in NavigationDrawerItem.

Defaults used in NavigationRail

Defaults used in NavigationRailItem.

Contains the default values used by OutlinedTextField.

Contains the default values used for LinearProgressIndicator and CircularProgressIndicator.

Defaults used in RadioButton.

Default values used by ripple.

Object containing various default values for Scaffold component.

Defaults used in SearchBar and DockedSearchBar.

Contains the default values used by Shapes

Defaults used in ShortNavigationBar.

Defaults used in ShortNavigationBarItem.

Object to hold defaults used by Slider

Contains the default values used for Snackbar.

Contains default values used by SplitButtonLayout and its style variants.

Contains the baseline values used by SuggestionChip.

Contains default values for SwipeToDismissBox and SwipeToDismissBoxState.

Contains the default values used by Switch

Contains default implementations and values used for TabRow.

Contains the default values used by TextField.

Contains the default values used by TimePicker

Contains the default values for all five toggle button types.

Contains the default values used by ToggleFloatingActionButton

Tooltip defaults that contain default values for both PlainTooltip and RichTooltip

Contains default values used for the top app bar implementations.

Contains the baseline values used by a VerticalDragHandle.

Contains the default values used for wavy progress indicators

Defaults used in WideNavigationRail.

Defaults used in WideNavigationRailItem.

Possible values of DrawerState.

Possible values of SheetState.

Possible durations of the Snackbar in SnackbarHost

Possible results of the SnackbarHostState.showSnackbar call

The directions in which a SwipeToDismissBox can be dismissed.

Possible values of WideNavigationRailState.

Represents a Locale for the calendar.

This type alias is deprecated. Renamed to ExposedDropdownMenuAnchorType

This function is deprecated. Use BasicAlertDialog instead

Material Design basic dialog.

Material Design assist chip.

A badge represents dynamic information such as a number of pending requests in a navigation bar.

Material Design badge box.

Basic alert dialog dialog.

Material Design bottom app bar.

Material Design bottom app bar.

Material Design bottom app bar.

Material Design bottom app bar.

Material Design bottom app bar.

Creates a BottomAppBarState.

Material Design standard bottom sheet scaffold.

Material Design button.

TODO link to mio page when available.

Material Design filled card.

Material Design filled card.

Material Design center-aligned small top app bar.

Material Design checkbox.

Indeterminate Material Design circular progress indicator.

This function is deprecated. Use the overload that takes `progress` as a lambda

Determinate Material Design circular progress indicator.

Indeterminate Material Design circular progress indicator.

Determinate Material Design circular progress indicator.

A Material Design contained loading indicator.

A Material Design contained loading indicator.

Material Design date picker.

Material Design date picker dialog.

Creates a DatePickerState.

Material Design date range picker.

Creates a DateRangePickerState.

Content inside of a dismissible navigation drawer.

Content inside of a dismissible navigation drawer.

Material Design navigation drawer.

This function is deprecated. Renamed to HorizontalDivider

Material Design search.

This function is deprecated. Use overload which takes inputField as a parameter

Material Design dropdown menu.

Material Design dropdown menu item.

Material Design elevated assist chip.

Material Design elevated button.

Material Design elevated card.

Material Design elevated card.

Material Design elevated filter chip.

Material Design elevated suggestion chip.

TODO link to mio page when available.

Material Design Exposed Dropdown Menu.

Material Design extended floating action button.

Material Design extended floating action button.

Material Design filled icon button.

Material Design filled icon toggle button.

Material Design filled icon toggle button.

Material Design filled tonal button.

Material Design filled tonal icon button.

Material Design filled tonal icon toggle button.

Material Design filled tonal icon toggle button.

Material Design filter chip.

Material Design floating action button.

FAB Menus should be used in conjunction with a ToggleFloatingActionButton to provide additional choices to the user after clicking a FAB.

Creates a FloatingAppBarState.

Material Design divider.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.FloatingAppBarDefaults.ScreenOffset
import androidx.compose.material3.FloatingAppBarExitDirection.Companion.Bottom
import androidx.compose.material3.HorizontalFloatingAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment.Companion.BottomCenter
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

val context = LocalContext.current
val isTouchExplorationEnabled = remember {
    val am = context.getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager
    am.isEnabled && am.isTouchExplorationEnabled
}
val listState = rememberLazyListState()
var currentItem = 0
val expanded by remember {
    derivedStateOf {
        val temp = currentItem
        currentItem = listState.firstVisibleItemIndex
        listState.firstVisibleItemIndex <= temp // true if the list is scrolled up
    }
}
Scaffold(
    content = { innerPadding ->
        Box {
            LazyColumn(
                state = listState,
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp)
                    )
                }
            }
            HorizontalFloatingAppBar(
                modifier = Modifier.align(BottomCenter).offset(y = -ScreenOffset),
                expanded = expanded || isTouchExplorationEnabled,
                leadingContent = { leadingContent() },
                trailingContent = { trailingContent() },
                content = {
                    FilledIconButton(
                        modifier = Modifier.width(64.dp),
                        onClick = { /* doSomething() */ }
                    ) {
                        Icon(Icons.Filled.Add, contentDescription = "Localized description")
                    }
                },
            )
        }
    }
)

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.FloatingAppBarDefaults
import androidx.compose.material3.FloatingAppBarDefaults.ScreenOffset
import androidx.compose.material3.FloatingAppBarExitDirection.Companion.Bottom
import androidx.compose.material3.HorizontalFloatingAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment.Companion.BottomCenter
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

val context = LocalContext.current
val isTouchExplorationEnabled = remember {
    val am = context.getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager
    am.isEnabled && am.isTouchExplorationEnabled
}
val listState = rememberLazyListState()
val exitAlwaysScrollBehavior =
    FloatingAppBarDefaults.exitAlwaysScrollBehavior(exitDirection = Bottom)
Scaffold(
    modifier = Modifier.nestedScroll(exitAlwaysScrollBehavior),
    content = { innerPadding ->
        Box {
            LazyColumn(
                state = listState,
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp)
                    )
                }
            }
            HorizontalFloatingAppBar(
                modifier = Modifier.align(BottomCenter).offset(y = -ScreenOffset),
                expanded = true,
                leadingContent = { leadingContent() },
                trailingContent = { trailingContent() },
                content = {
                    FilledIconButton(
                        modifier = Modifier.width(64.dp),
                        onClick = { /* doSomething() */ }
                    ) {
                        Icon(Icons.Filled.Add, contentDescription = "Localized description")
                    }
                },
                scrollBehavior =
                    if (!isTouchExplorationEnabled) exitAlwaysScrollBehavior else null,
            )
        }
    }
)

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor.

A Material Design icon component that draws imageVector using tint, with a default value of LocalContentColor.

A Material Design icon component that draws painter using tint, with a default value of LocalContentColor.

A Material Design icon component that draws painter using tint.

Material Design standard icon button.

Material Design standard icon toggle button.

Material Design standard icon toggle button.

Material Design input chip.

Label component that will append a label to content.

Material Design large extended floating action button.

Material Design large extended floating action button.

Material Design large floating action button.

Material Design large top app bar.

Material Design large top app bar.

Material Design tab.

Indeterminate Material Design linear progress indicator.

This function is deprecated. Use the overload that takes `progress` as a lambda

Determinate Material Design linear progress indicator.

Indeterminate Material Design linear wavy progress indicator.

Determinate Material Design wavy linear progress indicator.

Material Design list item.

A Material Design loading indicator.

A Material Design loading indicator.

Material Expressive Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Material Design medium extended floating action button.

Material Design medium extended floating action button.

Material Design medium floating action button.

Material Design medium top app bar.

Material Design medium top app bar.

Material Design modal bottom sheet.

Content inside of a modal navigation drawer.

Content inside of a modal navigation drawer.

Material Design navigation drawer.

Material design modal wide navigation rail.

Material Segmented Button.

Material Design bottom navigation bar.

Material Design navigation drawer item.

Material Design bottom navigation rail.

Material Design navigation rail item.

Material Design outlined button.

Material Design outlined card.

Material Design outlined card.

Material Design outlined icon button.

Material Design outlined icon toggle button.

Material Design outlined icon toggle button.

Material Design outlined text field for secure content.

Material Design outlined text field.

Material Design outlined text field.

Material Design outlined text field.

TODO link to mio page when available.

Content inside of a permanent navigation drawer.

Material Design navigation permanent drawer.

Material Design Scrollable Primary tabs

Material Design Fixed Primary tabs

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes.

Material Design radio button.

Material Design Range slider.

Material Design Range slider.

Material Design Range slider.

Material Design layout.

Material Design tabs

Material Design search.

This function is deprecated. Use overload which takes inputField as a parameter

Material Design Scrollable Secondary tabs

Material Design Fixed Secondary tabs

Material Design filled text field for secure content.

Material Design short navigation bar.

Material Design short navigation bar item.

Material Segmented Button.

Material Design slider.

Material Design slider.

Material Design slider.

Material Design small extended floating action button.

Material Design small extended floating action button.

Material Design small floating action button.

Material Design snackbar.