How to fix fragment appearing below bottom navigation activity?

Question

I have a bottom navigation activity inside my main activity which is also my fragment container. And in that bottom navigation activity I have a two linear layouts which contains google maps and below it contains live coordinates.

The problem is when I tap on the second menu, the fragment for the second menu appears below the bottom navigation bar which is not what I want.

I have tried changing layout types from linear to relative, does not work. Makes it worse even. I have tried following a youtube tutorial about this and mine still does not work as intended.

Code for main menu which is fragment container containing two items (map above, live coordinates below in a split screen, below that is the code for bottom navigation menu)

<LinearLayout
    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:id="@+id/fragment_container"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".5">

        <fragment
            xmlns:map="http://schemas.android.com/apk/res-auto"
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            map:layout_constraintEnd_toEndOf="parent"
            map:layout_constraintHorizontal_bias="1.0"
            map:layout_constraintStart_toStartOf="parent"
            map:layout_constraintTop_toTopOf="parent"
            tools:context=".MapsActivity" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".5">

        <TextView
            android:id="@+id/id_textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text=""
            android:textSize="20sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </LinearLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

Code for calling the fragments

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

    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);

    BottomNavigationView navView = findViewById(R.id.nav_view);
    navView.setOnNavigationItemSelectedListener(this);

    loadFragment(new CheckpointFragment());
}

private boolean loadFragment(Fragment fragment) {
    if (fragment != null) {
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.fragment_container, fragment)
                .commit();
        return true;
    }
    return false;
}

Code for when bottom menu pressed to switch fragments

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    Fragment fragment = null;

    switch (item.getItemId()) {
        case R.id.navigation_checkpoint:
            fragment = new CheckpointFragment();
            break;

        case R.id.navigation_clocking:
            fragment = new ClockingFragment();
            break;
    }
    return loadFragment(fragment);
}

Code for CheckpointFragment

public class CheckpointFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_checkpoint, null);
    }
}

Code for ClockingFragment

public class ClockingFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_clocking, null);
    }
}

XML for the second menu that contains only a placeholder text for testing

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textStyle="bold"
        android:text="PLACEHOLDER" />

</LinearLayout>

This is what it currently looks like:

Placeholder text should be replacing the whole screen instead of appearing below the bottom nav bar

I expect the first screen to disappear and only show the placeholder text I created for testing this when the second bottom menu is pressed. But the actual output shows that the placeholder text is appearing below the bottom navigation menu.