How to create/Implement Meow Bottom Navigation Bar in Android Studio With Java | Custom Bottom Navigation - Shamim Developer

 

Step 1: Creating a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

Step 2: Navigate to Build scripts > build.gradle(module) file and add the following dependency to it and Syne Now

//meow-bottom-navigation=========================================================

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

Step 3: Navigate to Build scripts > settings.gradle(Project Setting) file and add the following dependency to dependencyResolutionManagement and Syne Now

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
     
     jcenter()

    }
} 

Step 4: Open res -> layout ->activity_main.xml (or) main.xml and add following code:
In this step we open an XML file and add the code :-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">


    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />



    <com.etebarian.meowbottomnavigation.MeowBottomNavigation
        android:id="@+id/bnv_Main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_700"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:mbn_backgroundBottomColor="#ffffff"
        app:mbn_circleColor="#ffffff"
        android:layout_gravity="bottom"
        app:mbn_countBackgroundColor="#ff6f00"
        app:mbn_countTextColor="#ffffff"
        app:mbn_defaultIconColor="#90a4ae"
        app:mbn_rippleColor="#2f424242"
        app:mbn_selectedIconColor="#3c415e"
        app:mbn_shadowColor="#1f212121" />

</FrameLayout>

Step 5: Open Java -> package – > MainActivity.Java and add following code:
In this step we open an Java file and add the code :-
package com.rsmdeveloper.meowbottomnavigation;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

import android.content.Intent;
import android.os.Bundle;

import com.etebarian.meowbottomnavigation.MeowBottomNavigation;

import kotlin.Unit;
import kotlin.jvm.functions.Function1;

/**
* Created by RSM Developer on 16-01-2023.
* Follow Facebook : https://www.facebook.com/RSMDeveloper
* Subscribe Youtube : https://www.youtube.com/@RSMDeveloper
* Visit Website : https://rsmdeveloper.blogspot.com/
* Develope Your Creativity With RSM Developer
**/
public class MainActivity extends AppCompatActivity {
//=======================================
private MeowBottomNavigation bnv_Main;
//=======================================
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//=======================================
bnv_Main = findViewById(R.id.bnv_Main);
bnv_Main.add(new MeowBottomNavigation.Model(1,R.drawable.home));
bnv_Main.add(new MeowBottomNavigation.Model(2,R.drawable.search));
bnv_Main.add(new MeowBottomNavigation.Model(3,R.drawable.bookmark));
bnv_Main.add(new MeowBottomNavigation.Model(4,R.drawable.person));
//=======================================
bnv_Main.show(2,true);
replace(new SearceFragment());
bnv_Main.setOnClickMenuListener(new Function1<MeowBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(MeowBottomNavigation.Model model) {
switch (model.getId()){
case 1:
replace(new HomeFragment());
break;

case 2:
replace(new SearceFragment());
break;

case 3:
replace(new BookmarkFragment());
break;

case 4:
replace(new ProfileFragment());
break;

}
return null;
}
});


}//=======================================

private void replace(Fragment fragment) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.frame,fragment);
transaction.commit();

}//=======================================
}

Step 6: Create a New Blank Fragment (Home) with language as Java :-Open ->res -> layout ->fragment_home.xml and add following code:
In this step we open an XML file and add the code :-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E91E63"
android:gravity="center"
tools:context=".HomeFragment">

<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:textSize="50sp"
android:textColor="@color/white"
/>

</LinearLayout>
Step 7: Create a New Blank Fragment (search) with language as Java :-Open ->res -> layout ->fragment_search.xml and add following code:
In this step we open an XML file and add the code :-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF9800"
android:gravity="center"
tools:context=".SearceFragment">

<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Searce"
android:textSize="50sp"
android:textColor="@color/white"
/>


</LinearLayout>

Step 8: Copy and paste your Icon (drawable)

Output: