Create a bottom app bar to help users navigate and access functions in your app.
Follow this guidance to add a bottom app bar to your app by using the
BottomAppBar
composable.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or higher.
Dependencies
Create a bottom app bar
Use the following code to create a bottom app bar containing four icon buttons, and a floating action button:
Key points about the code
- An outer
Scaffold
that has abottomBar
set. - A
bottomBar
implementation that contains a list of actions. - Actions that are implementations of
IconButton
that containIcon
for image and content description text, each with anonClick
lambda to perform these actions.
You can pass composables for the following key parameters:
actions
: a series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.floatingActionButton
: the floating action button that appears on the right side of the bar.
Results
![An example of a bottom app bar](https://developer.android.google.cn/static/quick-guides/content/bottom-app-bar.png?authuser=7)
Parent collections
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?authuser=7)
Create a home screen scaffold
Find out how to use a standardized platform to build
complex user interfaces. The scaffold holds together different parts of
the UI, giving apps a coherent look and feel.
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?authuser=7)
Display interactive components
Learn how composable functions can enable you to easily
create beautiful UI components based on the Material Design design
system.
Have questions or feedback
Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.