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

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

Step 2: add the drawable files

Step 3: create bottom nav menu

<?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

<?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

<?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:

Follow me on Instagram

Follow me on Facebook

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store