How to Implement MeowBottomNavigation in Andriod?

Last Updated : 04 Jul, 2023

Meow Bottom Navigation in Android is simple & curved & material bottom navigation, it allows the user to switch to different activities/fragments easily with a beautiful animation in the bottom navigation. A sample video is given below to get an idea about what we are going to do in this article.

Note: In order to implement OtpView, Android 4.1+ (API 16) must be used.

Step-by-Step Implementation

Step 1: Create a new project in Android Studio and select Java as the language. If you are new to Android refer to How to Create/Start a New Project in Android Studio.

Step 2: Navigate to Gradle Scripts > settings.gradle(Project Setting) and add the jcenter() inside repositories in dependencyResolutionManagement {}.

allprojects {
repositories {
...
jcenter()
}
}

Step 3: Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation 'com.etebarian:meow-bottom-navigation:1.2.0'

Step 4: Navigate to the app > res > layout > activity_main.xml and add the below code to that file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

      <!-- Meow Bottom Navigation-->
    <com.etebarian.meowbottomnavigation.MeowBottomNavigation
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mbn_circleColor="#ffffff"
        app:mbn_backgroundBottomColor="#D9E4ED"
        app:mbn_countBackgroundColor="#ff6f00"
        app:mbn_countTextColor="#ffffff"
        app:mbn_defaultIconColor="#90a4ae"
        app:mbn_rippleColor="#2f424242"
        app:mbn_selectedIconColor="#3c415e"
        app:mbn_shadowColor="#1f212121"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

Step 5: Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.

Java

package com.example.meowbottomnaviagtaion;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.etebarian.meowbottomnavigation.MeowBottomNavigation;
import kotlin.Unit;
import kotlin.jvm.functions.Function1;

public class MainActivity extends AppCompatActivity {

    private MeowBottomNavigation bottomNavigation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigation=findViewById(R.id.bottomNavigation);
        bottomNavigation.show(2, true);

        // add your bottom navigation icon here
        bottomNavigation.add(new MeowBottomNavigation.Model(1,R.drawable.baseline_home_24));
        bottomNavigation.add(new MeowBottomNavigation.Model(2, R.drawable.baseline_perm_contact_calendar_24));
        bottomNavigation.add(new MeowBottomNavigation.Model(3,R.drawable.baseline_settings_24));

        bottomNavigation.setOnClickMenuListener(new Function1<MeowBottomNavigation.Model, Unit>() {
            @Override
            public Unit invoke(MeowBottomNavigation.Model model) {

                switch(model.getId())
                {
                    case 1:
                        break;
                    case 2:
                        break;
                    case 3:
                        break;
                }
                return null;
            }
        });

        bottomNavigation.setOnShowListener(new Function1<MeowBottomNavigation.Model, Unit>() {
            @Override
            public Unit invoke(MeowBottomNavigation.Model model) {

                switch(model.getId())
                {
                    case 1:
                        break;
                }
                return null;
            }
        });

        bottomNavigation.setOnShowListener(new Function1<MeowBottomNavigation.Model, Unit>() {
            @Override
            public Unit invoke(MeowBottomNavigation.Model model) {

                switch(model.getId())
                {
                    case 2:
                        break;
                }
                return null;
            }
        });


        bottomNavigation.setOnShowListener(new Function1<MeowBottomNavigation.Model, Unit>() {
            @Override
            public Unit invoke(MeowBottomNavigation.Model model) {

                switch(model.getId())
                {
                    case 3:
                        break;
                }
                return null;
            }
        });
    }
}