# Floating toolbar
Floating toolbar provides a way to show actions related to the current page.
Floating toolbars can be vertical or horizontal.
Vertical floating toolbar | Horizontal floating toolbar
:----------------------------------------------------------------------------------------------: | :-------------------------:
|
**Note:** Images use various dynamic color schemes.
## Design & API documentation
* [Material 3 (M3) spec](https://m3.material.io/components/toolbars/overview)
* API reference in progress
## Anatomy
1. Container
2. Elements
More details on anatomy items in the
[component guidelines](https://m3.material.io/components/toolbars/guidelines#d6b7bcb1-295d-41e6-a051-37f12e1c96ab).
## M3 Expressive
### M3 Expressive update
Before you can use `Material3Expressive` component styles, follow the
[`Material3Expressive themes` setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
Floating toolbar show controls relevant to the current page
The **floating toolbar** was created for more versatility, greater amounts of
actions, and more variety in where it's placed.
[More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
**Types and naming:**
* Added **floating toolbar** with the following attributes:
* Layout: Horizontal or vertical
* Color: Standard or vibrant
* Flexibility: Can hold many elements and components. Can be paired with
FAB.
### M3 Expressive styles
There are two styles for the floating toolbar specifying different color
schemes:
```xml
@style/Widget.Material3Expressive.FloatingToolbar@style/Widget.Material3Expressive.FloatingToolbar.Vibrant
```
Standard Floating Toolbar | Vibrant Floating Toolbar
---------------------------------------------------------------------------------- | ------------------------
 | 
By default, if a style is not specified, a `FloatingToolbar` will use
`floatingToolbarStyle` from the theme.
There are also styles specific to components inside the floating toolbar that
are recommended to be used. Currently, the recommendation exists for icon
buttons: `Widget.Material3Expressive.FloatingToolbar.IconButton` and
`Widget.Material3Expressive.FloatingToolbar.IconButton.Vibrant`.
Example usage:
```xml
...
```
## Key properties
### Container attributes
Element | Attribute | Related methods | Default value
----------------------- | ------------------------------------ | --------------- | -------------
**Color** | `app:backgroundTint` | N/A | standard is `?attr/colorSurfaceContainer`, vibrant is `?attr/colorPrimaryContainer`
**Shape** | `app:shapeAppearance` | N/A | `50% rounded`
**Left inset margin** | `app:marginLeftSystemWindowInsets` | N/A | `true`
**Top inset margin** | `app:marginTopSystemWindowInsets` | N/A | `true`
**Right inset margin** | `app:marginRightSystemWindowInsets` | N/A | `true`
**Bottom inset margin** | `app:marginBottomSystemWindowInsets` | N/A | `true`
### Styles
Element | Style | Theme attribute
------------------ | ------------------------------------------ | ---------------
**Standard style** | `Widget.Material3.FloatingToolbar` | `?attr/floatingToolbarStyle`
**Vibrant style** | `Widget.Material3.FloatingToolbar.Vibrant` | `?attr/floatingToolbarVibrantStyle`
Floating toolbar also recommends a special style for specific components for
when they are inside of a floating toolbar. Currently, the floating toolbar
styles also include a theme overlay for `?attr/materialButtonStyle`,
`?attr/materialIconButtonStyle`, and `?attr/borderlessButtonStyle` to style
buttons inside of a floating toolbar.
For the full list, see
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/res/values/styles.xml)
and
[floating toolbar attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/res/values/attrs.xml)
## Code implementation
Before you can use the floating toolbar, you need to add a dependency to the
Material components for Android library. For more information, go to the
[Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
page.
### Adding floating toolbar
Here's what a typical layout would look like:
```xml
```
A floating toolbar is a `FrameLayout` that provides additional styling and
functionality. You may add children to it as you would to a `FrameLayout`. It's
recommended to have its children wrapped by an `OverflowLinearLayout` that will
handle automatically adding items to an overflow button when there's not enough
screen space to show all the items.
When using `OverflowLinearLayout`, you should also set `app:layout_overflowText`
as that will be the text of the menu item that corresponds to the hidden child.
Optionally, you can also set `app:layout_overflowIcon`. See
[OverflowLinearLayout](https://github.com/material-components/material-components-android/tree/master//docs/components/Overflow.md)
for more info.
**Note:** if the child view that is clickable is not a direct child of
`OverflowLinearLayout`, such as the case of the example above, make sure to
propagate the parent's click to the child. That is so overflowed items in the
overflowed menu respond properly to being clicked. Alternatively, you can also
set `onClickListener`s on the overflowed items directly by accessing them via
`OverflowLinearLayout.getOverflowedViews()`.
Floating toolbars can hide on scroll if inside a `CoordinatorLayout` by setting
the following `CoordinatorLayout.Behavior` through the `app:layout_behavior`
attribute:
```xml
...
```
This behavior will be disabled when TalkBack is enabled for a11y reasons. See
[how to make floating toolbars accessible](#making-floating-toolbar-accessible).
Note that the default M3 style is the horizontal standard color styling. Vibrant
color or vertical styles should be explicitly set on the
`FloatingToolbarLayout`. M3 stylings for specific components may also be
defined, such as for icon buttons. These are recommended to be set explicitly on
the corresponding components inside `FloatingToolbarLayout`. See the full list
of
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/res/values/styles.xml).
API and source code:
* `FloatingToolBar`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/FloatingToolbarLayout.java)
### Making floating toolbar accessible
You should set a `contentDescription` on all the actions in the floating toolbar
so that screen readers like TalkBack can properly announce what each action
represents.
You can also control the ordering of the TalkBack focus through the
`accessibilityTraversalBefore` and `accessibilityTraversalAfter` flags.
For example, if you want the floating toolbar to gain TalkBack focus first, you
can set these accessibility flags like below:
```xml
...
```
#### TalkBack
Floating toolbars can optionally use the `CoordinatorLayout.Behavior`
`HideViewOnScrollBehavior` to hide the floating toolbar on scroll. This behavior
is disabled when TalkBack is enabled disabled due to screen readers not being
able to see it if the floating toolbar is hidden when scrolled.
If using a floating toolbar in a layout that obscures any content when hide on
scroll is disabled, make sure to add the appropriate padding to the content. For
example, if the floating toolbar is on the bottom and it is obscuring the
content, bottom padding should be added to the content.
See below for an example:
```
val am = context.getSystemService(AccessibilityManager::class.java)
if (am != null && am.isTouchExplorationEnabled) {
(bar.layoutParams as? CoordinatorLayout.LayoutParams)?.behavior = null
bar.post {
content.setPadding(
content.paddingLeft,
content.paddingTop,
content.paddingRight,
content.paddingBottom + bar.measuredHeight
)
}
}
```
## Customizing floating toolbar
### Theming floating toolbar
Floating toolbars support the customization of color and typography.
API and source code:
* `FloatingToolBarLayout`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/FloatingToolbarLayout.java)
#### Floating toolbar theming example
The following example shows a floating toolbar with Material theming.
##### Implementing floating toolbar theming
Use theme attributes and a style in `res/values/styles.xml` which apply to all
floating toolbars and affect other components:
```xml
```
Use a default style theme attribute, styles, and a theme overlay, which apply to
all floating toolbars but do not affect other components:
```xml
```
Or use the style in the layout, which affects only this specific floating
toolbar:
```xml
```
| 
**Note:** Images use various dynamic color schemes.
## Design & API documentation
* [Material 3 (M3) spec](https://m3.material.io/components/toolbars/overview)
* API reference in progress
## Anatomy
1. Container
2. Elements
More details on anatomy items in the
[component guidelines](https://m3.material.io/components/toolbars/guidelines#d6b7bcb1-295d-41e6-a051-37f12e1c96ab).
## M3 Expressive
### M3 Expressive update
Before you can use `Material3Expressive` component styles, follow the
[`Material3Expressive themes` setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
Floating toolbar show controls relevant to the current page
The **floating toolbar** was created for more versatility, greater amounts of
actions, and more variety in where it's placed.
[More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
**Types and naming:**
* Added **floating toolbar** with the following attributes:
* Layout: Horizontal or vertical
* Color: Standard or vibrant
* Flexibility: Can hold many elements and components. Can be paired with
FAB.
### M3 Expressive styles
There are two styles for the floating toolbar specifying different color
schemes:
```xml
##### Implementing floating toolbar theming
Use theme attributes and a style in `res/values/styles.xml` which apply to all
floating toolbars and affect other components:
```xml
```
Use a default style theme attribute, styles, and a theme overlay, which apply to
all floating toolbars but do not affect other components:
```xml
```
Or use the style in the layout, which affects only this specific floating
toolbar:
```xml