Android Java Bottom navigation bar not visible when using fragments

Question

I am trying to implement a bottom navigation view. The navigation bar displays perfectly without the use of fragments, but after implementing fragments it is no longer visible. The navigation bar is still clickable however, and it seems as though the fragments are rendering over it. I'm not sure what I'm missing.

Bottom nav without fragments: bottom navigation without fragments

Bottom nav with fragments: bottom navigation with fragments

Main.java

package com.example.rentalz.User;

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

import android.os.Bundle;

import com.example.rentalz.R;
import com.ismaeldivita.chipnavigation.ChipNavigationBar;

public class Main extends AppCompatActivity {

ChipNavigationBar chipNavigationBar;

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

    chipNavigationBar = findViewById(R.id.bottom_nav_menu);
    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new HomeFragment()).commit();
    bottomMenu();

}

private void bottomMenu() {

    chipNavigationBar.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
        @Override
        public void onItemSelected(int i) {
            Fragment fragment = null;
            switch (i) {
                case R.id.home:
                    fragment = new HomeFragment();
                    break;
                case R.id.search:
                    fragment = new SearchFragment();
                    break;
                case R.id.favourites:
                    fragment = new FavouritesFragment();
                    break;
                case R.id.profile:
                    fragment = new ProfileFragment();
                    break;
            }
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, fragment).commit();
        }
    });

}

}

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".User.Main"
    android:background="#eeeeee"
    android:id="@+id/fragment_container">

    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:id="@+id/bottom_nav_menu"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:cnb_unselectedColor="@color/black"
        app:cnb_radius="8dp"
        app:cnb_menuResource="@menu/bottom_navigation_menu"/>

</RelativeLayout>

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".User.HomeFragment"
    android:background="#3498db">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Home Fragment" />

HomeFragment.xml

package com.example.rentalz.User;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.rentalz.R;

public class HomeFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
         // Inflate the layout for this fragment
         return inflater.inflate(R.layout.fragment_home, container, false);
    }
 v}

Answer 1

just separate the fragments from the navigation and they won't overlap it

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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eeeeee">
    
    <FrameLayout
        android:layout_width="match_parent"
        android:id="@+id/fragment_container"
        android:layout_above="@+id/bottom_nav_menu"
        android:layout_height="match_parent"/>

    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:id="@+id/bottom_nav_menu"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:cnb_unselectedColor="@color/black"
        app:cnb_radius="8dp"
        app:cnb_menuResource="@menu/bottom_navigation_menu"/>

</RelativeLayout>