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



 Step 1Creating 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
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 shamimseoraj Developer on 16-01-2023.
* Follow Facebook : https://www.facebook.com/RSMDeveloper
* Subscribe Youtube : https://www.youtube.com/@RSMDeveloper
* Visit Website : shamimseoraj
* Develope Your Creativity With shamimseoraj 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:

Now run the App and you will see main topics and sub-topics listed.....

Post a Comment

Previous Post Next Post
Girl in a jacket