Material Design Component Bottom App Bar in Android
Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use the Bottom App bar in android. Have a look at the following image to get an overview of the discussion.
Create an empty activity project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Add Required Dependency
Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner. Note that the Navigation Rail is introduced in the latest release of the material design components version that is 1.4.0 and above.
Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.
Why Bottom App Bar?
The bottom app bar provides easy access to the navigation drawer and up to four primary actions of the current activity including the Floating Action Button. By including this component in the application provides a huge response to the User Experience because, the user shouldn’t have to stretch their fingers to touch the primary actions on the top of the screen whereas by including this, the user can easily click on primary actions and access the navigation drawer.
When to use Bottom App Bar?
- This should be used only for mobile devices.
- Users seeking easier access to navigation drawer that can be placed at the bottom.
- An activity with two to five primary actions.
When not to use Bottom App Bar?
- Application which is having a bottom navigation bar.
- An activity with one or two actions.
Anatomy of the Bottom App Bar
In the above anatomy taking the example of an e-commerce application, one can see the primary action here is search and also the cart icon may be the primary action for the current screen so the cart can also be included beside the search icon.
Steps to implement Bottom App Bar in an Application
Step 1: Creating menu items for Bottom App Bar
Creating a separate menu for Bottom App Bar so that we can make what items should appear on the bar and what items should appear under the Overflow menu control. To implement the sample menu invoke the following in the bottom_app_bar_menu.xml file under the menus folder.
Step 2: Working with activity_main.xml file
The main layout of this sample contains one floating action button which is anchored to Bottom App Bar, which in turn both the views should be under the CoordinatorLayout otherwise error will occur. And the size of the Floating Action Button should be auto. To implement the same invoke the following code inside the activity_main.xml file.
The above diagram is an example of the Bottom App Bar with the Floating Action Button. However, the Floating action button is optional. To implement the Bottom App Bar without floating action button without the Floating Action Button invoke the following code in the activity_main.xml file.
Step 3: Working with MainActivity.kt file
In the MainActivity.kt file there is a need to handle the buttons and the hamburger icon to perform the appropriate actions. Upon clicking the hamburger icon Navigation Drawer needs to be shown. To know how to implement Navigation Drawer refer to Navigation Drawer in Android, upon clicking the search icon the search screen should appear, etc. To implement the same invoke the following code inside the MainActivity.kt file.