Member-only story

How to add a Bottom Navigation Bar in Android

Suragch
3 min readJan 12, 2019

--

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"

--

--

Suragch
Suragch

Written by Suragch

Flutter and Dart developer. Twitter: @suragch1, Email: suragch@suragch.dev

Responses (5)