Theming Floating Action Button with Bottom Navigation Bar in Android

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.

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:

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>

Output UI: