PreferenceFragment overlaps toolbar

Question

As the title, my PreferenceFragment overlaps my toolbar. I've already tryed different solutions but the problem persists. Hopes in any help. Here is my code.

Activity:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MyActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(toolbar);

        // Display the fragment as the main content
        getFragmentManager().beginTransaction().replace(android.R.id.content, new SettingsFragment()).commit();
    }
}

Activity XML (activity_settings.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.mypackage.MyActivity">

    <include
        layout="@layout/app_bar" />

    <FrameLayout
        android:id="@+id/pref_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/app_bar"/>

</RelativeLayout>

Fragment (SettingsFragment.java):

import android.preference.PreferenceFragment;
import android.os.Bundle;

public class SettingsFragment extends PreferenceFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Load the preferences from an XML resource
       addPreferencesFromResource(R.xml.pref_settings);
   }

}

Fragment XML (pref_settings.xml):

<?xml version="1.0" encoding="utf-8"?>

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

    <CheckBoxPreference
        android:key="pref_checkbox"
        android:title="Title"
        android:summary="Summary"
        android:defaultValue="false"/>

</PreferenceScreen>

Toolbar (app_bar.xml):

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/app_bar"
android:background="@color/primaryColor"
android:elevation="3dp"
app:theme="@style/ThemeOverlay.AppCompat.Dark" />

Answer 1

change this:

    getFragmentManager().beginTransaction().replace(android.R.id.content, new SettingsFragment()).commit();

to:

    getFragmentManager().beginTransaction().replace(R.id.pref_content, new SettingsFragment()).commit();

Answer 2

I also faced similar kind of problem. And I have solved it by adding padding to the view in onCreateView() method. This article also helped me to solve my problem.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = super.onCreateView(inflater, container, savedInstanceState);
    // calculate margins
    int horizontalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
    int verticalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
    int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int) getResources().getDimension(R.dimen.activity_vertical_margin) + 30, getResources().getDisplayMetrics());

    view.setPadding(horizontalMargin, topMargin, horizontalMargin, verticalMargin);
    return view;
}