 |
| Meow Bottom Navigation Bar in Android Studio |
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 Nowjcenter()
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:
Now run the App and you will see main topics and sub-topics listed.....
Watch this video