Bottom Navigation – Android Material Design

Today lets talk about a rather new concept in the material design category for android, I for one was very fascinated by the tab layout used in Instagram and wanted to replicate the same bottom tabs for my android application. So after a little bit of research i implemented the tabs successfully. So here I am sharing my experiencetumblr_inline_o2cjrbnanx1tayze1_540

The correct terminology for such a layout is Bottom navigation bars. They are to make it easy to explore and switch between top-level views in a single tap.Β And according to Google design guidelines, the bottom navigation should consist of three to five items.android-google-design-guidelines-bottom-bar

 

Well I found a great library https://github.com/roughike/BottomBarΒ  which serves the exact purpose, it has a simple to use dependency along with good self explainable documentaion.

Now if you are wondering how to display different pages when clicked on different tabs in the bottom navigation bar then I will tell you a simple way to do it:

Add a framelayout in the layout file as shown in the github page, Now in the setOnTabReselectListener add a simple fragment swaping code like this:

NewFragment newFragment = new NewFragment();
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.frame, newFragment, fragment.getClass().getName())
.commit();

Here frame is the id of the framelayout that we put in the main layout earlier. Thats it we have now achieved bottom bar navigation

The reason i have not put the full code is because i want my readers to implement what they have just read, doing this will improve your coding skills

Cheers, Untill Next time πŸ˜€

6 thoughts on “Bottom Navigation – Android Material Design”

Leave a Reply

Your email address will not be published. Required fields are marked *