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

Gibert

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

Replicate

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

Behm

Works super great! – Beatriz

On my tablet this is not correct. There I need to have +50 instead of +30. – Merkle

Instead of topMargin one should use the actionbar height: #12302010 – Merkle