The material design team at Google defines the functionality of bottom navigation bars in Android as follows:
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.
According to the official material design guidelines for the bottom navigation bar, it should be used when your app has:
three to five top-level destinations
destinations requiring direct access
An example of a popular app that implements the bottom navigation bar is the Google+ Android app from Google, which uses it to navigate to different destinations of the app. You can see this yourself by downloading the Google+ app from Google Play store (if you don’t already have it on your device). The following screenshot is from the Google+ app displaying a bottom navigation bar.
In this post, you’ll learn how to display menu items inside a bottom navigation bar in Android. We’ll use the BottomNavigationView API to perform the task. For an additional bonus, you’ll also learn how to use the Android Studio templates feature to quickly bootstrap your project with a bottom navigation bar.
A sample project (in Kotlin) for this tutorial can be found on our GitHub repo so you can easily follow along.
To be able to follow this tutorial, you’ll need:
Android Studio 3.0 or higher
Kotlin plugin 1.1.51 or higher
1. Create an Android Studio Project
Fire up Android Studio and create a new project (you can name it BottomNavigationDemo) with an empty activity called MainActivity. Make sure to also check the Include Kotlin support check box.
2. Adding the BottomNavigationView
To begin using BottomNavigationView in your project, make sure you import the design support and also the Android support artifact. Add these to your module’s build.gradle file to import them.
Also, visit your res/layout/activlty_main.xml file to include the BottomNavigationView widget. This layout file also includes a ConstraintLayout and a FrameLayout. Note that the FrameLayout will serve as a container or placeholder for the different fragments that will be placed on it anytime a menu item is clicked in the bottom navigation bar. (We’ll get to that shortly.)
Here we have created a BottomNavigationView widget with the id navigationView. The official documentation says that:
BottomNavigationView represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.
Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations.
The important attributes you should take note of that were added to our BottomNavigationView are:
app:itemBackground: this attribute sets the background of our menu items to the given resource. In our case, we just gave it a background colour.
app:itemIconTint: sets the tint which is applied to our menu items’ icons.
app:itemTextColor: sets the colours to use for the different states (normal, selected, focused, etc.) of the menu item text.
To include the menu items for the bottom navigation bar, we can use the attribute app:menu with a value that points to a menu resource file.
Here is the res/menu/navigation.xml menu resource file:
Here we have defined a Menu using the
Build a Music App With an Android App Template
15 Best Android App Templates of 2017
Android From Scratch: Using REST APIs
How to Code a Navigation Drawer for an Android App
Best Developer in Spain!
Outstanding web services no matter where you are in the world. Great support and attention to detail.
Kate is a real life developer. She can work across multiple platforms and understands the technology your company is using on a line to line basis.
Pure Organic CBDWeb development and support
Professional and rapid support for the development and ongoing maintenance of our business website. Nothing too much trouble. Highly recommended.
Cafe CiclistaWeb maintenance
Superb service very professional and quick
very responsive I was kept informed and consulted throughout the entire process.
Paul JacksonWeb design & Development
Kate Langshaw of Medianic is awesomely recommended by us for all your website needs. Kate translated our story and brand into an elegant, transparent and to the point representation of CaffèMilano -The Italian Coffee House.
CaffèMilanoWeb design and Development
Absolute Class service from Start to finish, nothing is too much hassle for them and will recommend to everybody looking to update or have their website designed by the Amazing Kate Langshaw
Dragon InsureWeb design and Development
I have to say that my experience with Medianic has been different to any previous. I have been constantly kept up to date, communication has been fluid, and we had no down time at all.
Dr BanulsWeb Hosting
I’m very happy about Kate’s work! Recommend her services to everybody. Looking for a good website builder/designer? Look no further and contact Medianic.
Voice ProductionsWeb development
On Behalf of all at the Marina Alta Classic Car Club I would like to thank Kate for the wonderful work she did in Kick starting our Club website this year. I can highly recommend her. Thanks Kate
Marina Alta Car ClubWeb Design
Excellent knowledge and service, competitive pricing too. Definitely a solid go to company. Thanks for the great results we’ve had
Jim JimneyDesign and Branding
Totally reliable, totally capable and totally delivers. I’m loving working with Kate to help grow my business. I’m full of motivation because of you Kate
Javea BlindsWeb Design
I cannot praise Medianic enough. They have built the Javea Connect website quickly and efficiently, taught and old dog new tricks and have been there for me, sometimes within minutes, when I needed help. Excellent service and very very competitively priced. Highly recommended for both website and design work. Kate is to be congratulated on such a high standard of work and customer loyalty.
Javea ConnectWeb Design & Development
Medianic has done a outstanding job in creating our company website in such a short time at unbeatable prices, rovtec marine services recommended Medianic for their superior skill in Web design, thank you outstanding job!
The only thing that beat the quality of the work Medianic did for us was how quick and responsive they were whenever we had feedback or needed something extra. Would highly recommend.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.