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

Golap Gunjan Barman
3 min readMar 15, 2021

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

--

--

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.