DEV Community

Cover image for How to add a FAB within BottomNavigationView ⚡️
raystatic
raystatic

Posted on

How to add a FAB within BottomNavigationView ⚡️

In this article I will show you how to make a custom bottom navigation view in your Android Projects.

So first of all lets update our build.gradle files.
Open your build.gradle(app) file and add some sruffs there.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
    id 'androidx.navigation.safeargs.kotlin'
}
Enter fullscreen mode Exit fullscreen mode

Add these plugins on top of your file. These are necessary for having bottom navigation view.

Now add a dependency in the same file in the dependencies block


    implementation "androidx.navigation:navigation-ui-ktx:2.3.1"

Enter fullscreen mode Exit fullscreen mode

After adding these, now move on to build.gradle(project-level) file.

    dependencies {
        classpath "com.android.tools.build:gradle:4.1.0"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.3.1"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
Enter fullscreen mode Exit fullscreen mode

It is must to add this classpath otherwise your dependency will not be imported.

Logically we cannot add another view (fab) inside the bottom navigation view but we can achieve this by doing a workaround.

First change your root view to Coordinator Layout then we will add a widget called BottomAppBar. Our bottom navigation view will be wrapped inside this bottomAppBar.

Then we will add a FAB which will be anchored with the bottomAppBar.

<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">
    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:id="@+id/bottomAppBar"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="20dp">
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bttom_nav_menu"
            android:background="@android:color/transparent"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp" />

    </com.google.android.material.bottomappbar.BottomAppBar>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:src="@drawable/ic_camera"
        app:layout_anchor="@id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Enter fullscreen mode Exit fullscreen mode

Now let’s create a menu for our navigation called bottom_nav_menu. This will be placed under the menu directory in resources.

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/miHome"
        android:title="Home"
        android:icon="@drawable/ic_home"/>

    <item
        android:id="@+id/miChat"
        android:title="Chat"
        android:icon="@drawable/ic_chat"/>

    <item
        android:id="@+id/miPlaceholder"
        android:title=""/>

    <item
        android:id="@+id/miCloud"
        android:title="Cloud"
        android:icon="@drawable/ic_cloud"/>


    <item
        android:id="@+id/miSettings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"/>

</menu>
Enter fullscreen mode Exit fullscreen mode

Here we have added five items to our menu because we want to place out FAB in the middle and to evenly space the items.

We have made the third item as a placeholder and will disable it so that it’s functionality doesn’t create any conflicts.

Right now, the bottomNavigationView is not looking nice because of overlapping background, so will set its background to null.
We cannot do that in the XML file, so we will it the MainActivity class.

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

        fab.setOnClickListener {
            Toast.makeText(this, "I'm working dude!", Toast.LENGTH_SHORT).show()
        }

    }
}
Enter fullscreen mode Exit fullscreen mode

Here, we have set the background to null and disabled the functionality of 3rd item of the menu.

I am adding a working demo for the same.

demo_gif

Well, this looks fine. To stay tuned for my further articles on Android stuffs follow me and connect me on LinkedIn here

Discussion (0)