Why settings.xml layout is overlapping the ActionBar/Toolbar?

Question

I'm developing a material design app.

After adding settings.xml in SettingsActivity.java & running the app, the activity is appearing like this:

Here's SettingsActivity.java file's code:

public class SettingsActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        SpannableString s = new SpannableString("Settings");
        s.setSpan(new TypefaceSpan(this, "Roboto-Medium.ttf"), 0, s.length(),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

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

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle(s);

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

    }

    public static class SettingsFragment extends PreferenceFragment implements SharedPreferences.OnSharedPreferenceChangeListener {

        public static final String SHARE_APP_PREFERENCE_KEY = "pref_key_share_app";

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

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

        }

        public void onSharedPreferenceChanged(SharedPreferences sharedPreferences,
                                              String key) {
            if (key.equals(SHARE_APP_PREFERENCE_KEY)) {
                // do something
            }
        }

    }

}

Here's activity_settings.xml file's code:

<RelativeLayout 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:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.abc.xxx.SettingsActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:elevation="4dp"/>

</RelativeLayout>

Here's settings.xml file's code:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

    <PreferenceCategory android:title="@string/pref_notification" >
        <CheckBoxPreference
            android:defaultValue="true"
            android:key="prefNotification"
            android:summary="@string/pref_notify_summary" >
        </CheckBoxPreference>
    </PreferenceCategory>

</PreferenceScreen>

I don't know why the settings.xml layout is overlapping the ActionBar/Toolbar!

Please let me know.

Thanks in advance.

Hardfavored

Answer 1

Change your activity_settings.xml to this

    <RelativeLayout 
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:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:context="com.abc.xxx.SettingsActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:elevation="4dp"/>

    <FrameLayout 
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_below="@id/toolbar"
        android:layout_height="match_parent" />
    </RelativeLayout>

And change code to this

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

Featherstitch

How can I change the preference title's text color? – Hardfavored

You can look in this link #6298135 – Featherstitch

Why do I need to put <FrameLayout /> below the toolbar? – Quadragesimal

Answer 2

When you call the fragment on the activity, don't use

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

Instead use

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

I had the same problem for using android.R.id.content so changing it to the ID you use for the frame to hold the fragment on the xml fixed it.

Ody

Answer 3

Discovered that PreferenceActivity in Sunny's solution above may crash due to it loads a content view without a ListView. This is fixed by adding it to activity_settings.xml, but the PreferenceFragment will just ignore it. The activity_settings.xml will the look something like this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Cotinga