Android 如何修复底部导航活动下方出现的片段？

我的主活动中有一个底部导航活动，它也是我的片段容器。在底部导航活动中，我有两个线性布局，其中包含谷歌地图，下面包含实时坐标

问题是当我点击第二个菜单时，第二个菜单的片段出现在底部导航栏下方，这不是我想要的

我尝试过将布局类型从线性更改为相对，但不起作用。让事情变得更糟。我已经试着跟随youtube上关于这方面的教程，但我的教程仍然没有达到预期的效果

主菜单的代码是包含两个项目的片段容器（上面是地图，下面是分割屏幕中的活动坐标，下面是底部导航菜单的代码）

按下底部菜单切换片段时的代码

@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;
}

@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);
}

检查点片段代码

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);
    }
}

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);
    }
}

时钟片段代码

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);
    }
}

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

<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>

这就是它目前的样子：

占位符文本应取代整个屏幕，而不是出现在底部导航栏下方

当按下第二个底部菜单时，我希望第一个屏幕消失，只显示我为测试这个而创建的占位符文本。但实际输出显示占位符文本显示在底部导航菜单的下方