Curved bottom navigation Android tutorial (Java/Kotlin)

Welcome, In today’s post I will be sharing “Curved bottom navigation Android tutorial (Java/Kotlin)” a programming tutorial for Android developers who wish to add this cool Curved Bottom Navigation in their Android Application.

Prerequisite

• Knowledge of Navigation Component(for Navcontroller)
• Knowledge of Animated Vector Drawables

So, let move to the tutorial. I am using Android Studio for this tutorial.

Also Read: Watch free movies and web shows

Curved Android Bottom Navigation Tutorial:

First of all, we need to add a dependency for curved bottom navigation bar for android, developed by Suson Thapa. This post is inspired by his medium blog post, but that was only for Kotlin and I thought maybe I should write tutorial for Java developers. If you are a Kotlin Developer just visit Github Repository of this library.

To add the library add the following code to app level build.gradle file:

implementation 'np.com.susanthapa.curved_bottom_navigation:curved_bottom_navigation:0.6.3'

Now add the following code to project level build.gradle file:

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url  "https://dl.bintray.com/susonthapa/curved-bottom-navigation"
        }
    }
}

Now open gradle.properties file and all the following code(ignore if already exits):

android.useAndroidX=true
android.enableJetifier=true

Then open the layout file in which you want to add Curved Bottom Navigation. For example: activity_main.xml and add the following code:

<np.com.susanthapa.curved_bottom_navigation.CurvedBottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Now open MainActivity.java file and inside onCreate() method add the following code:

CurvedBottomNavigationView cbn = findViewById(R.id.nav_view);
CbnMenuItem notification = new CbnMenuItem(R.drawable.vd_notifications, R.drawable.avd_notifications, R.id.notification);
CbnMenuItem newOrder = new CbnMenuItem(R.drawable.vd_add, R.drawable.avd_add, R.id.newOrderFragment);
CbnMenuItem profile = new CbnMenuItem(R.drawable.vd_profile, R.drawable.avd_profile, R.id.profile);
CbnMenuItem[] navigation_items = {notification,newOrder,profile};
cbn.setMenuItems(navigation_items, 1);
cbn.setupWithNavController(Navigation.findNavController(this, R.id.nav_host_fragment_container));

In the above code inside CbnMenuItem(), I passed three parameters. The first parameter is normal vector drawable, the second parameter is Animated Vector drawable (you can visit ShapeShifter.design to create animated vector drawable), and the third parameter I passed is the id of the fragment.

Now in the last line of code, we have used the Navigation Controller for navigation because it makes it very easy and convenient. If you don’t know how you use it, I would recommend you to learn and believe me it is very easy.

But still if you want alternate way, you can use listeners for handling the click events of Curved Bottom Navigation.

cbn.setOnMenuItemClickListener();

I haven’t actually used the onMenuItemListener() as it was confusing, instead I used NavController to do the job.

So this was it guys for bottom navigation android tutorial, if you have any doubts just ask in comment section, I would love to help you.