Implementing BottomAppBar – Material Components

Implementing BottomAppBar – Material Components

Google I/O ‘18 came up with many exciting new stuff, one of them was the updated Material Design Components. The new BottomAppBar is placed at the bottom of app window in contrary to Toolbar which is located at the upper side of app window. It puts more focus on features, increases engagement, and visually anchors the UI.

So today we are going to learn how to implement BottomAppBar.

VIDEO DEMO

Example

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. First of all add the material components dependency in app level build.gradle.

Note : Currently this dependency is in alpha so make sure you update dependency whenever new update is available.

In case you get some error like below while building:

Build Error

Build Error

then add the below mentioned two lines of code in gradle.properties.

3. Create activity_main.xml and add the following code. Here we have taken BottomAppBar and FloatingActionButton.

There are few attributes of BottomBarApp as follows:

  • app:backgroundTint : The background color of BottomAppBar.
  • app:fabAlignmentMode : The position of the FloatingActionButton (Center or End).
  • app:fabCradleMargin : The space between the cradle in the Bottom App Bar and the Floating Action Button.
  • app:fabCradleRoundedCornerRadius: The cradle radius.
  • app:fabCradleVerticalOffset : The distance between the Floating Action Button and the Bottom App Bar
  • app:hideOnScroll : Whether to hide the BottomAppBar on scroll or not.

NOTE : Make sure you add  style=”@style/Widget.MaterialComponents.BottomAppBar” to BottomAppBar.

Below is the remaining layout of content_main.xml

4. Now open your MainActivity.java class and place the below code into it.

Center Aligned FAB

Center Aligned FAB

 

End Aligned FAB

End Aligned FAB

The above class have some features as follows:

Handling Menu Options : There are two ways to handle menu options. The first way is to directly call setOnMenuItemClickListener(OnMenuItemClickListener) and to handle the menu options in the callback:

The other way is to call setSupportActionBar() on the BottomAppBar. This will set up the menu callbacks in a similar way to Toolbar which hooks into Activity#onCreateOptionsMenu() and Activity#onOptionsItemSelected(). This makes it easier to transition from a Toolbar which was set as the action bar to a BottomAppBar. This will also allow you to handle the navigation item click by checking if the menu item id is android.R.id.home.

Handling Navigation Item Click: If you use setSupportActionBar() to set up the BottomAppBar you can handle the navigation menu click by checking if the menu item id is android.R.id.home. The other option is to call setNavigationOnClickListener(OnClickListener):

Toggling FAB Alignment Mode : If you want to change/toggle FAB alignment mode from Center to End or Vice-Versa. You can do by using below code:

FAB Center Mode

FAB Center Mode

 

FAB End Mode

FAB End Mode

 

Hide on Scroll

Hide on Scroll

5. Since we have added hamburger icon to open Navigation View. So let’s see how to implement NavigationView in BottomAppBar. We will implement it with the help of BottomSheet. If you are not aware of BottomSheet then check here. Let’s create an xml naming bottom_navigation_drawer.xml and place the below code to it. In this xml we have created one header and one NavigationView.

6. For NavigationView create a menu under res/menu naming bottom_navigation_menu.xml and place the below menus to it.

7. Now create a java class naming BottomSheetNavigationFragment.java and place the below code into it.

Bottom Sheet Navigation View

Bottom Sheet Navigation View

 

Bottom Sheet Full Expanded

Bottom Sheet Full Expanded

8. We have used menu for BottomBar too so below is the menu naming main_menu.xml for BottomBar.

9. Don’t forgot to change your base theme into MaterialComponents according to your requirement.

10. Finally, all done run your code.

Thanks. 🙂

Download Source Code

 

About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.

COMMENTS (2)
Reply

If I want to implement Behavior in this example, when I move to fragment 2, the animation transition does not work, why?

    Hi Armando,

    Which animation won’t work can you clarify?

    Thanks

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)