# Bottom Navigation

`BottomNavigationView` creates **bottom navigation** bars, making it easy to
explore and switch between top-level content views with a single tap.
This pattern can be used when you have between 3 and 5 top-level destinations to
navigate to.
## Design & API Documentation
- [Material Design guidelines: Bottom
Navigation](https://material.io/guidelines/components/bottom-navigation.html)
- [Class
definition](https://github.com/material-components/material-components-android/tree/master/lib/java/android/support/design/widget/BottomNavigationView.java)
- [Class
overview](https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html)
## Usage
1. Create a [menu
resource](https://developer.android.com/guide/topics/resources/menu-resource.html)
with up to 5 navigation targets (`BottomNavigationView` does not support more than
5 items).
2. Lay out your `BottomNavigationView` below your content.
3. Set the `app:menu` attribute on your `BottomNavigationView` to your menu
resource.
4. Listen for selection events using `setOnNavigationItemSelectedListener(...)`.
A typical layout file would look like this:
```xml
```
### Handling States
The `app:itemIconTint` and `app:itemTextColor` take a
[ColorStateList](https://developer.android.com/reference/android/content/res/ColorStateList.html)
instead of a simple color. This means that you can write a `selector` for these
colors that responds to the items' state changes.
For example, you could have a `bottom_navigation_colors.xml` that contains:
```xml
```
And you would use it like this on your `BottomNavigationView`:
```xml
```
## Related Concepts
There are other navigation patterns you should be aware of
- [Hierarchical navigation](https://developer.android.com/training/implementing-navigation/index.html).
*See also [Navigation with Back and
Up](https://developer.android.com/design/patterns/navigation.html).*
- Swipeable tabs using [TabLayout](TabLayout.md) and
[ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager.html).
- Using [NavigationView](NavigationView.md) to display a longer list of
navigation targets, usually in a navigation drawer.