BottomAppBar

The Bottom App Bar is an extension of Toolbar that supports a shaped background that "cradles" an attached FloatingActionButton. A FAB is anchored to BottomAppBar by calling setAnchorId, or by setting app:layout_anchor on the FAB in xml.

Note: The Material Design Guidelines caution against using an with a BottomAppBar, so there is limited support for that use case. ExtendedFloatingActionButton can be anchored to the BottomAppBar, but currently animations and the cutout are not supported.

There are two modes which determine where the FAB is shown relative to the . FAB_ALIGNMENT_MODE_CENTER mode is the primary mode with the FAB is centered. FAB_ALIGNMENT_MODE_END is the secondary mode with the FAB on the side.

Do not use the android:background attribute or call BottomAppBar.setBackground because the BottomAppBar manages its background internally. Instead use app:backgroundTint.

To enable color theming for menu items you will also need to set the materialThemeOverlay attribute to a ThemeOverlay which sets the colorControlNormal attribute to the correct color. For example, if the background of the BottomAppBar is colorSurface, as it is in the default style, you should set materialThemeOverlay to @style/ThemeOverlay.MaterialComponents.BottomAppBar.Surface.

For more information, see the component developer guidance and design guidelines.

Constructors

Link copied to clipboard
constructor(@NonNull context: Context)
constructor(@NonNull context: Context, @Nullable attrs: AttributeSet)
constructor(@NonNull context: Context, @Nullable attrs: AttributeSet, defStyleAttr: Int)

Types

Link copied to clipboard
Behavior designed for use with BottomAppBar instances.
Link copied to clipboard
The fabAlignmentMode determines the horizontal positioning of the cradle and the FAB which can be centered or aligned to the end.
Link copied to clipboard
The fabAnchorMode determines the placement of the FAB within the BottomAppBar.
Link copied to clipboard
The fabAnimationMode determines the animation used to move the FAB between different alignment modes.
Link copied to clipboard
The menuAlignmentMode determines the alignment of the menu items in the BottomAppBar.

Properties

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
The FAB is cradled at the top of the BottomAppBar.
Link copied to clipboard
The FAB is embedded inside the BottomAppBar.
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
open var fabAnchorMode: Int
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
The menu items are aligned automatically to avoid the FAB.
Link copied to clipboard
The menu items are aligned to the start.
Link copied to clipboard

Functions

Link copied to clipboard
Add a listener that will be called when the bottom app bar scroll state changes.
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Returns the vertical offset for the fab cutout.
Link copied to clipboard
Returns the cradle margin for the fab cutout.
Link copied to clipboard
Returns the rounded corner radius for the cutout if it exists.
Link copied to clipboard
Returns true if the BottomAppBar is scrolled down.
Link copied to clipboard
open fun isScrolledUp(): Boolean
Returns true if the BottomAppBar is scrolled up.
Link copied to clipboard
open fun performHide()
Animates the BottomAppBar so it hides off the screen.
open fun performHide(animate: Boolean)
Hides the BottomAppBar.
Link copied to clipboard
open fun performShow()
Animates the BottomAppBar so it is shown on the screen.
open fun performShow(animate: Boolean)
Shows the BottomAppBar.
Link copied to clipboard
open fun replaceMenu(@MenuRes newMenu: Int)
A convenience method to replace the contents of the BottomAppBar's menu.
Link copied to clipboard
open fun setBackgroundTint(@Nullable backgroundTint: ColorStateList)
Link copied to clipboard
open fun setCradleVerticalOffset(@Dimension verticalOffset: Float)
Sets the vertical offset, in pixels, of the FloatingActionButton being cradled.
Link copied to clipboard
open fun setElevation(elevation: Float)
Link copied to clipboard
open fun setFabAlignmentModeAndReplaceMenu(fabAlignmentMode: Int, @MenuRes newMenu: Int)
Sets the current fabAlignmentMode and replaces the BottomAppBar's menu resource.
Link copied to clipboard
open fun setFabCradleMargin(@Dimension cradleMargin: Float)
Sets the cradle margin for the fab cutout.
Link copied to clipboard
open fun setFabCradleRoundedCornerRadius(@Dimension roundedCornerRadius: Float)
Sets the rounded corner radius for the fab cutout.
Link copied to clipboard
open fun setNavigationIcon(@Nullable drawable: Drawable)
Link copied to clipboard
open fun setNavigationIconTint(@ColorInt navigationIconTint: Int)
Sets the color of the toolbar's navigation icon.
Link copied to clipboard
open fun setSubtitle(subtitle: CharSequence)
Link copied to clipboard
open fun setTitle(title: CharSequence)