Theming Floating Action Button with Bottom Navigation Bar in Android

Last Updated : 19 Feb, 2021

In the previous article How to Add a Floating Action Button to Bottom Navigation Bar in Android?, it's well discussed how to add the Floating Action Button to the Bottom Navigation Bar in Android. Now to increase the UI/UX experience theming also can be done for the Bottom Navigation Bar. So in this article, it's been discussed how we can theme the Bottom Navigation Bar with a Floating Action Button in Android. Have a look at the following image on what all the perspective it can be themed.

Theming Floating Action Button with Bottom Navigation Bar

Steps to theme the Bottom Navigation Bar with Floating Action Button

Step 1: Create an empty activity Android Studio project

Create an empty activity android studio project. To create an empty activity Android Studio project refer to Android | How to Create/Start a New Project in Android Studio?.

Step 2: Invoke the material design dependency

Invoke the following dependency in the app-level gradle file.
To get the app level gradle goto app -> build.gradle file and invoke the following dependency.
Make sure the system is connected to the network and click on the "Sync Now" button which pops up top right corner.

implementation 'com.google.android.material:material:1.3.0-alpha03'

Refer to the following image if unable to get app level gradle file and invoke the dependency.

Step 3: Add the menu layout for the BottomAppBar

Create an Android Resource directory "menu" under the res folder.
Under the menu, the folder creates an XML Android layout bottom_nav_menu.xml and invoke the following code.

XML

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">

    <!--these items will be always visible
         on the Bottom navigation bar-->
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/Settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="always" />

    <!--these items will be under the more 
        button of the Bottom navigation bar-->
    <item
        android:icon="@drawable/ic_more"
        android:title=""
        app:showAsAction="always">

        <menu>
            <item
                android:id="@+id/Search"
                android:icon="@drawable/ic_search"
                android:title="Search"
                app:showAsAction="ifRoom" />

            <item
                android:id="@+id/Profile"
                android:icon="@drawable/ic_person"
                android:title="Profile"
                app:showAsAction="ifRoom" />
        </menu>

    </item>

</menu>

Step 4: Working with the activity_main.xml file

In the main layout of the application two widgets are to be implemented. Those are BottomAppBar and one Floating Action Button.
Here the Floating Action Button should be anchored to the BottomAppbar so that it can be stick to BottomAppBar.
Invoke the following code inside the activity_main.xml file. Comments are added for better understanding.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />

    <!--the normal Floating action button which is
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output UI:

Theming Floating Action Button with Bottom navigation Bar in Android

1. Change the position of the Floating Action button

app:fabAlignmentMode="end" tag needs to invoked under the BottomAppBar

Invoke the following code inside the activity_main.xml file to implement the same.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />

    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output UI:

2. Change the Cradle Margin for Floating Action Button

app:fabCradleMargin="14dp" tag needs to be invoked under BottomAppBar to make the changes to the cradle margin

Invoke the following code inside the activity_main.xml file to implement the same.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="14dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />

    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output UI:

3. Change the Cradle Margin for Floating Action Button

app:fabCradleRoundedCornerRadius="14dp" needs to be invoked under the BottomAppBar widget.

Invoke the following code inside the activity_main.xml file to implement the same.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="8dp"
        app:fabCradleRoundedCornerRadius="8dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />

    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>