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'
}
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"
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
}
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>
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>
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()
}
}
}
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.
Well, this looks fine. To stay tuned for my further articles on Android stuffs follow me and connect me on LinkedIn here
Top comments (0)