Related Articles

Related Articles

How to Add a Floating Action Button to Bottom Navigation Bar in Android?
  • Last Updated : 29 Oct, 2020

The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app’s UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like adding an item to the existing list. Bottom navigation bars allow movement between primary destinations in an app. Some popular examples include Instagram, WhatsApp, etc. In this article, we will learn how to add a Floating Action Button (FAB) in the middle of the Bottom Navigation bar in android. A sample image is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

How to Add a Floating Action Button to Bottom Navigation Bar in Android?

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency to the build.gradle file



Inside build.gradle(app) add Material Design Dependency.

implementation ‘com.google.android.material:material:1.3.0-alpha03’

After adding the material design dependency click on the Sync now.

Step 3: Change the theme of the app to Material Components

Below is the code for the styles.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
      
    <!-- Base application theme. -->
    <style name="Theme.Fab_Bottom_app_bar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">#0F9D58</item>
        <item name="colorPrimaryVariant">#0F9D58</item>
        <item name="colorOnPrimary">#000</item>
    </style>
  
</resources>

chevron_right


Step 4: Import Icons from Vector assets



Go to res > drawable (right-click) > new -> vector assets and import five icons from there namely Home, Search, Person, Add, Settings. And your project structure should look like this after this step.

Step 5: Create menu items that have to be shown in the bottom navigation view

Go to res (right-click) > New > Android resource file and in the pop-up menu choose the resource type to menu and name the file bottom_nav_menu. It should look like this.

Inside bottom_nav_menu.xml add items that we want to show in the bottom app bar. Below is the code for the bottom_nav_menu.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
  
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_baseline_home_24"
        android:title="Home" />
  
    <item
        android:id="@+id/Search"
        android:icon="@drawable/ic_baseline_search_24"
        android:title="Search" />
  
    <item
        android:id="@+id/placeholder"
        android:title="" />
  
    <item
        android:id="@+id/Profile"
        android:icon="@drawable/ic_baseline_person_24"
        android:title="Profile" />
  
    <item
        android:id="@+id/Settings"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="Settings" />
      
</menu>

chevron_right


Step 6: Working with the AndroidManifest.xml file

Change the theme inside the AndroidManifest.xml file. Below is the code for the AndroidManifest.xml file.

XML



filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
    package="com.example.floatingactionbuttontobottomnavigation">
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
          
        android:theme="@style/Theme.Fab_Bottom_app_bar">
          
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

chevron_right


Step 7: Working with the activity_main.xml file

  • Change the root layout to Coordinator Layout
  • Add Bottom App bar.
  • Inside the Bottom app, the bar adds the bottom Navigation View and adds the menu items that we created in the last step.
  • Add the Floating action button.

Below is the code for the activity_main.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp">
  
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="16dp"
            android:background="@android:color/transparent"
            app:menu="@menu/bottom_nav_menu" />
  
    </com.google.android.material.bottomappbar.BottomAppBar>
  
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_anchor="@id/bottomAppBar" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

chevron_right


Step 8: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file.

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        bottomNavigationView.background = null
        bottomNavigationView.menu.getItem(2).isEnabled = false
    }
}

chevron_right


Output

Floating Action Button to Bottom Navigation Bar

My Personal Notes arrow_drop_up
Recommended Articles
Page :