Implementing BottomAppBar : Material Components for Android Google new Material Design 2

One of the new Android Material Components that are introduced in Google I/O 2018 is BottomAppBar which is an extension of Toolbar. 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. With this paradigm shift Material Design team expects a new user experience. User can access BottomAppBar more easily compared to the ordinary toolbar. Bringing navigation drawer control and action menu to the bottom of an app, BottomAppBar suggests a fresh new design to Android apps.

Together with BottomAppBar, Floating Action Button(FAB) placement has also been changing. With the new design, FABs can be placed as either being cradled/docked into some notch of the bar or overlapping the bar.





Here is the Video if you want to watch


This article will show the implementation of the basics of BottomAppBar together with the new FAB placement options. And all components are done using Java.

Setting Up

In order to use BottomAppBar, an initial setup is required.

For a detailed explanation on how to include Material Components for your Android project you can visit this page. For this tutorial make sure that you are using Android Studio 3.2 or above (currently available as 3.2 Canary 15).

1. Make sure that you are using the latest SDK as targeted version if your build.gradle looks like this then you are good to go...


2. Now add this two dependency in order to use this new component.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
 
 //This two Dependency Important other are includer when You create your project
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
 
 
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
3. Make sure your app inherits Theme.MaterialComponents theme in order to make BottomAppBar use the latest style. Alternatively you can declare the style for BottomAppBar in widget declaration within layout xml file as follows but I recommend you to declare that in your style.xml file.


style="@style/Widget.MaterialComponents.BottomAppBar"

Implementation

You can include BottomAppBar in your layout as follows. BottomAppBar must be a child of CoordinatorLayout.

1. Once you done all thing you can now add bottomappbar to your layout just paste this bellow code under your layouts CoordinatorLayout.

 <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:navigationIcon="@drawable/ic_menu_black_24dp"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored">

    </android.support.design.bottomappbar.BottomAppBar>
After adding that you can see that bottom App Bar is added to your app and its look like this...




You can anchor a Floating Action Button (FAB) to BottomAppBar by specifying the id of the BottomAppBar in app:layout_anchor attribute of the FAB. BottomAppBar can cradle FAB with a shaped background or FAB can overlap BottomAppBar.

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fav"
        android:elevation="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        android:src="@drawable/ic_add_black_24dp"/>
After that it look like this..


BottomAppBar Attributes

Table below shows BottomAppBar attributes.


After Adding this two views the full code look like this...

 <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:navigationIcon="@drawable/ic_menu_black_24dp"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored">

    </android.support.design.bottomappbar.BottomAppBar>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fav"
        android:elevation="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        android:src="@drawable/ic_add_black_24dp"/>

</android.support.design.widget.CoordinatorLayout>
Now we done with the view now we have to add some java code to it work...



Open MainActivity.java.

1. Now initialize the BottomAppBar by finding view after that we need to create a menu folder and create a menu name as bottom_bar_menu.xml and under that add this menus as follows or you can use your own...

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/like"
        android:title="Like"
        android:icon="@drawable/ic_favorite_black_24dp"
        app:showAsAction="always"/>
    <item android:id="@+id/search"
        android:title="Search"
        android:icon="@drawable/ic_search_black_24dp"
        app:showAsAction="always"/>

    <item android:id="@+id/settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings_black_24dp"
        />
    <item android:id="@+id/logout"
        android:title="Logout"
        android:icon="@drawable/ic_settings_power_black_24dp"
        />

</menu>
2. Now we have to add this menu to bottom App Bar using java so add this code under the onCreate method...

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

  //This will initialize the BottomAppBar
        bar = findViewById(R.id.bar);
  
  //This will add the OptionMenu to BottomAppBar
        bar.replaceMenu(R.menu.bottom_bar_menu);
  
  //This will handle the onClick Action for the menu item
        bar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id){
                    case R.id.like:
                        Toast.makeText(MainActivity.this,"Like Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.search:
                        Toast.makeText(MainActivity.this,"Search Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.settings:
                        Toast.makeText(MainActivity.this,"Settings Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.logout:
                        Toast.makeText(MainActivity.this,"Logout Clicked",Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });
    }
}
Now it done we successfully add the on option menu to the BottomAppBar..



3. Now the next step is to add Navigation View we know that in bottom app bar navigation click the options are coming g from the bottom so we have to create a bottom sheet to archive that...


So come to the project now we have to create a new layout so create a new layout under the layout folder and name that as navigation_menu... And under that layout add this code...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_menu"
        app:menu="@menu/bottom_bar_navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.NavigationView>

</LinearLayout>
As you can see we added the NavigationView which have a menu so we have to create a new menu for the NavigationView so create a menu under the menu folder and name it as bottom_bar_navigation_menu and add this menu code under that or add your own...

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item1"
        android:title="Item 1"
        android:icon="@drawable/ic_add_black_24dp"/>
    <item
        android:id="@+id/item2"
        android:title="Item 2"
        android:icon="@drawable/ic_add_black_24dp"/>
    <item
        android:id="@+id/item3"
        android:title="Item 3"
        android:icon="@drawable/ic_add_black_24dp"/>
    <item
        android:id="@+id/item4"
        android:title="Item 4"
        android:icon="@drawable/ic_add_black_24dp"/>

</menu>
Ok Now first we have to get the click from the navigation icon so lets add this code under the onCreate ... and on click we will call a function which will open the menu from bottom...



bar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openNavigationMenu();
            }
        });
so you see that we call a function name openNavigationMenu so lets add this code outside onCreate...

private void openNavigationMenu() {
  
  //this will get the menu layout
        final View bootomNavigation = getLayoutInflater().inflate(R.layout.navigation_menu,null);
        bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
        bottomSheetDialog.setContentView(bootomNavigation);
        bottomSheetDialog.show();

  //this will find NavigationView from id
        NavigationView navigationView = bootomNavigation.findViewById(R.id.navigation_menu);
  
  //This will handle the onClick Action for the menu item
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id){
                    case R.id.item1:
                        Toast.makeText(MainActivity.this,"Item 1 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item2:
                        Toast.makeText(MainActivity.this,"Item 2 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item3:
                        Toast.makeText(MainActivity.this,"Item 3 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item4:
                        Toast.makeText(MainActivity.this,"Item 4 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                }
                return false;
            }
        });
    }
}
So we successfully add navigation menu with bottom sheet thats so cool right... but we forgot something yes we have to add the onclick action for the floating action button and I know you guys already know that just initialize the button and then add onclick and also add this under onCreate like the code bellow...

FloatingActionButton fab = findViewById(R.id.fav);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Floating Action Button Clicked",Toast.LENGTH_SHORT).show();
            }
        });
So all is done you successfully add Material Design 2 Bottom App Bar to your application look at the full java code if you forgot anything...



package com.example.sumandey.bottomappbar;

import android.support.annotation.NonNull;
import android.support.design.bottomappbar.BottomAppBar;
import android.support.design.widget.BottomSheetDialog;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    BottomAppBar bar;
    private BottomSheetDialog bottomSheetDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

  //This will initialize the BottomAppBar
        bar = findViewById(R.id.bar);
  
  //This will add the OptionMenu to BottomAppBar
        bar.replaceMenu(R.menu.bottom_bar_menu);
  
  //This will handle the onClick Action for the menu item
        bar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id){
                    case R.id.like:
                        Toast.makeText(MainActivity.this,"Like Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.search:
                        Toast.makeText(MainActivity.this,"Search Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.settings:
                        Toast.makeText(MainActivity.this,"Settings Clicked",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.logout:
                        Toast.makeText(MainActivity.this,"Logout Clicked",Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });

  //handle the onClick action for bottom app bar navigation icon
        bar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openNavigationMenu();
            }
        });
  
  //add the onClick to the floatingactionbutton
  FloatingActionButton fab = findViewById(R.id.fav);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Floating Action Button Clicked",Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void openNavigationMenu() {
  
  //this will get the menu layout
        final View bootomNavigation = getLayoutInflater().inflate(R.layout.navigation_menu,null);
        bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
        bottomSheetDialog.setContentView(bootomNavigation);
        bottomSheetDialog.show();

  //this will find NavigationView from id
        NavigationView navigationView = bootomNavigation.findViewById(R.id.navigation_menu);
  
  //This will handle the onClick Action for the menu item
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id){
                    case R.id.item1:
                        Toast.makeText(MainActivity.this,"Item 1 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item2:
                        Toast.makeText(MainActivity.this,"Item 2 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item3:
                        Toast.makeText(MainActivity.this,"Item 3 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                    case R.id.item4:
                        Toast.makeText(MainActivity.this,"Item 4 Clicked",Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                        break;
                }
                return false;
            }
        });

      
    }
}

Here is the Video if you want to watch


So thanks for your time I hope you understand if you thing this post help you then plz share it with your friends and if you find any problem adding this don't be shy to ask in the comment section...

I will come back with new tutorial very soon


Comments