Fragments overlapping while using replace()

Question

I use Fragments to show different content in my App. My main layout looks like this:

<FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <fragment
        android:id="@+id/fragmentContent"
        android:name="app.MainContentFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_main_content" />

</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

Then in my activity I switch the fragment with the following code:

public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragmentContent, new MainContentFragment(), "MainContentFragment").commit();
                    return true;
                case R.id.navigation_dashboard:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragmentContent, new DashboardFragment(), "DashboardFragment").commit();
                    return true;
                case R.id.navigation_notifications:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragmentContent, new SettingsFragment(), "SettingsFragment").commit();
                    return true;
            }
            return false;
        }

But the result is the following:

I want to replace the fragment and not just put it over the other "older" one.