Member-only story
This is a repost of an answer I wrote on Stack Overflow.
My original article dealt with the BottomNavigationView
, but now there is a BottomAppBar
. I added a section at the top for that with an implementation link.
Bottom App Bar
The BottomAppBar
supports a Floating Action Button.
Image from here. See the documentation and this tutorial for help setting up the BottomAppBar
.
Bottom Navigation View
The BottomNavigationView
is an alternative place to put actions and navigation buttons from the top toolbar. The following full example shows how to make a Bottom Navigation Bar like the image below.
Add the design support library
Add this line to your app’s build.grade file next to the other support library things.
implementation 'com.android.support:design:28.0.0'
Update: The line above uses the old support library. You should use androidx now. Sorry, I’ve moved on to developing Android apps with Flutter now, so I haven’t been able to keep these older articles up to date.
Create the Activity layout
The only special thing we have added to the layout is the BottomNavigationView
. To change the color of the icon and text when it is clicked, you can use a selector
instead of specifying the color directly. This is omitted for simplicity here.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"…