PreferenceFragment overlapping on Fragment layout

Question

I have been able to implement a settings page using a PreferenceFragment. This displays just fine until I navigate to another page. The settings page is still showing on top of other pages and I don't know how to replace it completely.

This image is an example of what I mean. I have navigated from the settings page to the home page via the navigation drawer. I think I am missing something from the replace() method but I don't know what.

AccountSettings.java

public class AccountSettings extends PreferenceFragment {

Activity mActivity;

private static final String ARG_SECTION_NUMBER = "section_number";

public static AccountSettings newInstance(int sectionNumber) {
    AccountSettings fragment = new AccountSettings();
    Bundle args = new Bundle();
    args.putInt(ARG_SECTION_NUMBER, sectionNumber);
    fragment.setArguments(args);
    return fragment;
}

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    addPreferencesFromResource(R.xml.settings);

}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    getView().setBackgroundColor(Color.WHITE);
    getView().setClickable(true);
}


@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
    mActivity = activity;

}


@Override
public void onDestroy() {
    super.onDestroy();
}


@Override
public void onDetach() {
    super.onDetach();
}


public void restoreActionBar() {
    ActionBar actionBar = ((AppCompatActivity)getActivity()).getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setTitle("Account Settings");
}

public AccountSettings() {

}

}

MainPage.java (nav drawer)

public void onNavigationDrawerItemSelected(int position) {
    // update the main content by replacing fragments
    FragmentManager fragmentManager = getSupportFragmentManager();
    if (position == 0) {
        fragmentManager.beginTransaction()
                .replace(R.id.container, PlaceholderFragment.newInstance(1))
                .commit();

    } else if (position == 1) {
        fragmentManager.beginTransaction()
                .replace(R.id.container, Search.newInstance(2))
                .commit();

    }

    else if (position == 2) {
        fragmentManager.beginTransaction()
                .replace(R.id.container, Favourites.newInstance(3))
                .commit();
    }

    else if (position == 3) {
        fragmentManager.beginTransaction()
                .replace(R.id.container, History.newInstance(4))
                .commit();

    }

    else if (position == 4) {
        getFragmentManager().beginTransaction()
                .replace(R.id.container, AccountSettings.newInstance(5))
                .commit();

    }

}

settings.xml

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
android:key="prefs">

<PreferenceCategory android:title="@string/pref_search_category" >
<CheckBoxPreference
    android:defaultValue="false"
    android:key="prefDateTime"
    android:summary="@string/pref_night_day_description"
    android:title="@string/pref_night_day" >
</CheckBoxPreference>
</PreferenceCategory>

</PreferenceScreen>

activity_main_page.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainPage">

<FrameLayout android:id="@+id/container" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".AccountSettings"
    />

<fragment android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"
    android:layout_gravity="start"
    android:name="com.example.laptop.whatsfordinner.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer"
    />

Please help!

Answer 1

In the fragments' oncreateView method add this line

container.removeAllViews()

before inflating the view of the fragment. This helped me in this problem