Bottom Navigation in Android

Having a bottom navigation system has become a must in nearly all categories of apps today. A lot of android apps have one thing in common that is they tend to settle with external dependencies when it comes to a bottom navigation system which does provide a lot of value but icons, animations, transitions and more are often not very customizable. In this article, we will learn about bottom navigation and some methods to utilize it.

Note: We’re not going to work with declarative UI (no Jetpack Compose)

But what is bottom navigation to begin with?

A bottom navigation system is the wide bar you see at the bottom of your favorite apps. It serves a lot of purposes that are vital to the design of the app.

1. It helps the user to be aware of all the different sections within the app.
2. It makes context switching of activities or fragments very feasible.
3. And as obvious as it sounds navigation (where are you in the app) is the primary feature.

Creating a bottom navigation

Android provides its official material design library which gives you various APIs for UI widgets to work within your app and one of these is the BottomNavigationView.

First thing first you need to import material design library in your build.gradle(app)

implementation ‘com.google.android.material:material:1.4.0’

To use this bottom navigation in your main activity just place this snippet of code in your main activity layout activity_main.xml

See that my_navigation_items menu? This will contain all the items you want to be embedded in your bottom navigation view.

To create this menu you need to go to res -> menu(right-click) -> New -> Menu Resource File this will create the required file for you in which you can include all the items you want in your bottom navigation

At the end, you will have a bottom navigation view which looks something like this

Well… looks like we can definitely do better than this

To make things better we can create our own bottom navigation system and for that, we can use an external library like this popular one https://github.com/ittianyu/BottomNavigationViewEx which comes with various customization options

demo from the dependency

But I can tell for a fact that you will not have an easy time setting this up if you have a big project with several activities and not everything will look as you desire either.

A better solution

I wanted everything in the bottom navigation view for the above dependency to be peculiar to my liking hence I made a custom adapter and implemented it like any other dependency inside all the activities. The problem was I had to initialize the adapter differently everywhere thus sabotaging re-usability and creating fatal runtime exceptions over little mistakes.

A faster and more personalized solution that solves all these problems is to make our own bottom navigation XML layout using a menu, buttons, images or any other ViewGroup of your choice and provide the business logic to handle events inside a separate class.

Now, if we make an abstract class with the navigation layout we just created, hence inflating the frameLayout, we will be left with a single line of code needed to make all the activities that are sub-classes of this activity to run our bottom navigation.

For example, we can now have in our home activity

Conclusion

Works just like any other bottom navigation system and automates a lot of effort, the upside being now you have all the control over how your bottom navigation looks like, what goes into it, and how it behaves which wasn’t completely possible with external libraries.

Learn more about using bottom navigation in Android

Material Design

Build software better, together

About Me :)

I am Ekagra Sinha, 2nd-year B.Tech IT student at IIIT Allahabad, Member, FOSS Wing, at Geekhaven IIIT Allahabad.

Reach me at Linkedin