Bottom Navigation Bar in Android Studio using Java – Bottom Navigation View

• Step 1 : colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="purple_200">#FFBB86FC</color>

    <color name="purple_500">#FF6200EE</color>

    <color name="purple_700">#FF3700B3</color>

    <color name="teal_200">#FF03DAC5</color>

    <color name="teal_700">#FF018786</color>

    <color name="black">#FF000000</color>

    <color name="white">#FFFFFFFF</color>

    <color name="lavender">#8692f7</color>

</resources>

• Step 2: themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->

<stylename="Base.Theme.BottomNavigationBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <!-- Customize your light theme here. -->

        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->

        <item name="colorPrimary">@color/purple_700</item>

        <item name="colorPrimaryVariant">@color/purple_700</item>

        <item name="colorOnPrimary">@color/white</item>

        <!-- Secondary brand color. -->

        <item name="colorSecondary">@color/teal_200</item>

        <item name="colorSecondaryVariant">@color/teal_700</item>

        <item name="colorOnSecondary">@color/black</item>

        <item name="android:statusBarColor">@color/purple_700</item>

        <item name="android:navigationBarColor">@color/purple_700</item>

    </style>

    <style name="Theme.BottomNavigationBar" parent="Base.Theme.BottomNavigationBar" />

</resources>

 

• Step 3 : Add all  Icon drawable

 

• Step 4 :transparent_bg.xml

• Step 5: bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/home"

        android:title="Home"

        android:icon="@drawable/baseline_home_24"/>

    <item

        android:id="@+id/shorts"

        android:title="Shorts"

        android:icon="@drawable/baseline_fmd_good_24"/>

    <item

        android:id="@+id/fab"

        android:title=""

        android:enabled="false"/>

    <item

        android:id="@+id/subscriptions"

        android:title="Sub"

        android:icon="@drawable/baseline_favorite_24"/>

    <item

        android:id="@+id/library"

        android:title="Library"

        android:icon="@drawable/baseline_perm_contact_calendar_24"/>

</menu>

• Step 6: activity_main.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:id="@+id/main"

    android:layout_width="match_parent"

    android:background="@color/white"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@color/white"

        >

        <FrameLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:id="@+id/frame_layout"/>

        <com.google.android.material.bottomappbar.BottomAppBar

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:id="@+id/bottomAppBar"

            android:layout_gravity="bottom"

            android:background="@color/white"

            app:fabCradleMargin="10dp"

            app:fabCradleRoundedCornerRadius="50dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:id="@+id/bottomNavigationView"

                android:layout_marginEnd="10dp"

                app:labelVisibilityMode="labeled"

                android:background="@drawable/transparent_bg"

                app:menu="@menu/bottom_menu"/>

        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:backgroundTint="@color/white"

            android:src="@drawable/baseline_add_24"

            app:layout_anchor="@id/bottomAppBar"

            app:maxImageSize="40dp"

            app:tint ="@color/purple_700"

            tools:ignore="ContentDescription" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

 

• Step 7: all fragments create

• Step 8: MainActivity.java

 

package com.apps.bottomnavigationbar;

import android.os.Bundle;

import android.view.MenuItem;

import androidx.activity.EdgeToEdge;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentManager;

import androidx.fragment.app.FragmentTransaction;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import com.google.android.material.navigation.NavigationBarView;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        FragmentManager fragmentManager = getSupportFragmentManager();

        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        fragmentTransaction.replace(R.id.frame_layout,new Fragment1());

        fragmentTransaction.commit();

        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                int itemId = item.getItemId();

                if (itemId==R.id.home){

                    FragmentManager fragmentManager = getSupportFragmentManager();

                    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

                    fragmentTransaction.replace(R.id.frame_layout,new Fragment1());

                    fragmentTransaction.commit();

                } else if (itemId==R.id.shorts) {

                    FragmentManager fragmentManager = getSupportFragmentManager();

                    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

                    fragmentTransaction.replace(R.id.frame_layout,new Fragment2());

                    fragmentTransaction.commit();

                } else if (itemId==R.id.subscriptions) {

                    FragmentManager fragmentManager = getSupportFragmentManager();

                    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

                    fragmentTransaction.replace(R.id.frame_layout,new Fragment3());

                    fragmentTransaction.commit();

                }

                else if (itemId==R.id.library) {

                    FragmentManager fragmentManager = getSupportFragmentManager();

                    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

                    fragmentTransaction.replace(R.id.frame_layout,new Fragment4());

                    fragmentTransaction.commit();

                }

                return true;

            }

        });

    } //.....................onCreate................................

} //...................public class................................................