How to add a Bottom Navigation Bar in Android

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

Image for post
Image for post

Image from here. See the documentation and this tutorial for help setting up the BottomAppBar.

Bottom Navigation View

Image for post
Image for post

Add the design support library

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

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"
app:menu="@menu/bottom_nav_menu"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@android:color/white"
app:itemTextColor="@android:color/white" />
</RelativeLayout>

Notice that we used layout_alignParentBottom to actually put it at the bottom.

Define the menu items

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_recents"
android:enabled="true"
android:icon="@drawable/ic_action_recents"
android:title="Recents"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_favorites"
android:enabled="true"
android:icon="@drawable/ic_action_favorites"
android:title="Favorites"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_nearby"
android:enabled="true"
android:icon="@drawable/ic_action_nearby"
android:title="Nearby"
app:showAsAction="ifRoom" />
</menu>

You will need to add the appropriate icons to your project. This is not very difficult if you go to File > New > Image Asset and choose Action Bar and Tab Icons as the Icon Type.

Add an item selected listener

public class MainActivity extends AppCompatActivity {    @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_recents:
Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
break;
case R.id.action_favorites:
Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
break;
case R.id.action_nearby:
Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
}

Need more help?

Bottom App Bar

Image for post
Image for post

Image from here. See the documentation and this tutorial for help setting up the BottomAppBar.

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store