Theming Floating Action Button with Bottom Navigation Bar in Android

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.
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:
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:
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:
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: 
adityamshidlyali
Android-Button
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.