Removing animation from Bottom Navigation View on Android

Bottom Navigation View was added to the version 25 Android Design Support Library awhile ago. This makes it easy to add those bottom navigation menus that were previously more prevalent in iOS apps.

Previously, Android apps that adhered to the Material Design guidelines generally used the Drawer to navigate between menus. Some time last year, the Bottom Navigation View has been added as part of the Android Design Support Library to make it easy for developers to add the bottom menu bars. Before, it was an uphill battle to try to add these bottom navigation menu bars. Now, it’s super easy. By the Bottom Navigation View, I’m referring to something that looks like this.

One thing that I love about these Bottom Navigation Views is that I can easily navigate through different sections of the app while using my phone one-handed. My hands aren’t very big, and phones these days tend to be on the bigger side, so I’ve noticed that if the app I’m using uses that navigation drawer that activates via the hamburger menu bar that sits on the top left of the app, I can’t use the app one-handed. Perhaps that’s why the Android team made the Bottom Navigation View as part of the Support Library? Who knows.

While the library works great, I have come across one issue when I was using the Bottom Navigation View on one of my client projects. If there are more than 3 items in the menu bar, then there are animations that cannot be easily removed. Also, if there are more than 3 items, the currently selected item is more pronounced on the screen. Here’s an example of what the default Bottom Navigation View looks like with more than 3 items.

You see how the spacing between items are uneven and the actively selected menu item is more pronounced? If this is what your design calls for, then I guess this is fine. But the client project I’m working on right now needs more than 3 items in the Bottom Navigation View and needs the spacing between the items to be even, regardless of the activeness of the currently selected menu item. Also, I kind of think the unevenness between the 4 menu items look ugly.

Unfortunately, the BottomNavigationView library from Google doesn’t give you a straightforward way to remove this unevenness and the default animations that come with the library if you have more than 3 items. There is one answer on StackOverflow here but the accepted answer looks like an overly complicated workaround for something that seems simple. Also, I tried the accepted solution and it has some issues with the color of the actively selected menu.

For now, the best solution to have an easier and tighter control over the bottom navigation view is to use a third party library. There are many out there but the one I ended up choosing for one of my current client projects is called BottomNavigationViewEx. I picked this one because it simply extends the current BottomNavigationView library straight from Google and sprinkles on extra features.

With this library, to remove the unevenness and the default animations, all you have to do is call one line method on your BottomNavigation View like this.

Much cleaner than writing that helper class suggested in that StackOverflow answer right?

Of course there’s a downside to be relying on a third party library for a small issue like this, and I’m pretty sure Google will add these features over time to their native BottomNavigationView library. But for now, I think this is an acceptable solution to have your own pretty Bottom Navigation View. Also, since it’s only a one liner, when Google eventually does add this feature natively, all you would have to do is simply swap out the libraries and replace that one line with something else, which will probably be another one-liner from Google.