HorizontalFloatingToolbar
Android
```kotlin
@ExperimentalMaterial3XrApi
@ExperimentalMaterial3ExpressiveApi
@Composable
public fun HorizontalFloatingToolbar(
expanded: Boolean,
modifier: Modifier = Modifier,
colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
scrollBehavior: FloatingToolbarScrollBehavior? = null,
leadingContent: @Composable (RowScope.() -> Unit)? = null,
trailingContent: @Composable (RowScope.() -> Unit)? = null,
content: @Composable RowScope.() -> Unit,
)
```
#### Parameters
| | |
| --- | --- |
| expanded | whether the FloatingToolbar is in expanded mode, i.e. showing `leadingContent` and `trailingContent`. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this FloatingToolbar. |
| colors | the colors used for this floating toolbar. There are two predefined [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) at [FloatingToolbarDefaults.standardFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) and [FloatingToolbarDefaults.vibrantFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) which you can use or modify. |
| contentPadding | the padding applied to the content of this FloatingToolbar. |
| scrollBehavior | a [FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior). If null, this FloatingToolbar will not automatically react to scrolling. |
| leadingContent | the leading content of this FloatingToolbar. The default layout here is a [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row), so content inside will be placed horizontally. Only showing if `expanded` is true. |
| trailingContent | the trailing content of this FloatingToolbar. The default layout here is a [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row), so content inside will be placed horizontally. Only showing if `expanded` is true. |
| content | the main content of this FloatingToolbar. The default layout here is a [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row), so content inside will be placed horizontally. |
HorizontalFloatingToolbar
Android
```kotlin
@ExperimentalMaterial3XrApi
@ExperimentalMaterial3ExpressiveApi
@Composable
public fun HorizontalFloatingToolbar(
expanded: Boolean,
floatingActionButton: @Composable () -> Unit,
modifier: Modifier = Modifier,
colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
scrollBehavior: FloatingToolbarScrollBehavior? = null,
shape: Shape = FloatingToolbarDefaults.ContainerShape,
floatingActionButtonPosition: FloatingToolbarHorizontalFabPosition =
FloatingToolbarHorizontalFabPosition.End,
content: @Composable RowScope.() -> Unit,
)
```
#### Parameters
| | |
| --- | --- |
| expanded | whether the floating toolbar is expanded or not. In its expanded state, the FAB and the toolbar content are organized horizontally. Otherwise, only the FAB is visible. |
| floatingActionButton | a floating action button to be displayed by the toolbar. It's recommended to use a `FloatingToolbarDefaults.VibrantFloatingActionButton` or `FloatingToolbarDefaults.StandardFloatingActionButton` that is styled to match the [colors](/jetpack-compose/androidx.compose.material/material/classes/Colors). Note that the provided FAB's size is controlled by the floating toolbar and animates according to its state. In case a custom FAB is provided, make sure it's set with a [Modifier.fillMaxSize](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be sized correctly. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this floating toolbar. |
| colors | the colors used for this floating toolbar. There are two predefined [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) at [FloatingToolbarDefaults.standardFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) and [FloatingToolbarDefaults.vibrantFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) which you can use or modify. See also [floatingActionButton](/jetpack-compose/androidx.compose.material/material/components/FloatingActionButton) for more information on the right FAB to use for proper styling. |
| contentPadding | the padding applied to the content of this floating toolbar. |
| scrollBehavior | a [FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior). If provided, this FloatingToolbar will automatically react to scrolling. |
| shape | the shape used for this floating toolbar content. |
| floatingActionButtonPosition | the position of the floating toolbar's floating action button. By default, the FAB is placed at the end of the toolbar (i.e. aligned to the right in left-to-right layout, or to the left in right-to-left layout). |
| content | the main content of this floating toolbar. The default layout here is a [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row), so content inside will be placed horizontally. |