Android Floating Action Button with Bottom App Bar | Android Studio | Java

Android Floating Action Button with Bottom App Bar | Android Studio | Java

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Here we will see how to add a floating action button in bottomAppBar.

So let’s start creating.

Before going to create let’s see what you’re going to see.

Step 1: add the dependency

make sure to add the material design dependency in your build.gradle app file.

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

Step 2: add the drawable files

before going to design the main XML file, first, import the drawable files. Below drawable files that I used in my project.

Step 3: create bottom nav menu

First, create a bottom menu, create a new Android Resource Directory inside the res folder (/res/New/Android Resource Directory/menu/bottom_nav.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">
    
    <item
        android:id="@+id/home"
        android:icon="@drawable/home"
        android:title="Home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/Settings"
        android:icon="@drawable/settings"
        android:title="Settings"
        app:showAsAction="always" />
    <item
        android:icon="@drawable/person"
        android:title=""
        app:showAsAction="always" />
</menu>

Step 4: centered FAB

now in the main XML file, add our bottom menu inside BottomAppBar. Also, add our floating action button with fabAlignmentMode center app:fabAlignmentMode=”center”. For the floating action button, BottomAppBar is acting as an anchor. This line app:layout_anchor=”@id/bottomAppBar”of code indicates that.

<?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"
    android:background="@color/white"
    tools:context=".FabWithBottomNavActivity">
    <!--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/black"
        app:backgroundTint="@android:color/white"
        app:fabCradleMargin="10dp"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="20dp"
        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/black"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/black"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/add"
        app:tint="@color/white"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

preview

Step 4: end FAB

now in the main XML file, add our bottom menu inside BottomAppBar. Also, add our floating action button with fabAlignmentMode end app:fabAlignmentMode=”end”. For the floating action button, BottomAppBar is acting as an anchor. This line app:layout_anchor=”@id/bottomAppBar”of code indicates that.

<?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"
    android:background="@color/white"
    tools:context=".FabWithBottomNavActivity">
    <!--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/black"
        app:backgroundTint="@android:color/white"
        app:fabCradleMargin="10dp"
        app:fabAlignmentMode="end"
        app:fabCradleRoundedCornerRadius="20dp"
        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/black"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/black"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/add"
        app:tint="@color/white"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

preview

Feel free to visit my previous tutorial

You can follow me on YouTube:

Golap Barman

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs