How to get Android system preferences look?

Question

The android system preferences screen on lollipop appears to be using a layout that resembles the "card layout".

I'm trying to get the same look for my app, but can't see how they achieved it with the default PreferenceFragment. Can anyone explain to me, how I can achieve the same effect without having to write my own preferences?

---

Note that I have seen and read these questions, but they don't provide a suitable answer:

• How to achieve preference category cards like Android System Settings (Answer simply shows how to create a layout that looks similar. Has nothing to do with PreferenceFragment)
• Android Lollipop Sections Separator/Divider (Refers to preferences screenshot, but OP doesn't seem to want to apply it to PreferenceFragment)

---

If it's of interest, my current preferences xml looks like this:

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

    <PreferenceCategory android:title="@string/preferences_title_general">
        <Preference
            android:key="Prefs.Delete.Row.Token"
            android:summary="@string/preferences_delete_row_token_summary"
            android:title="@string/preferences_delete_row_token_title"/>
        <Preference
            android:key="Prefs.Delete.Cell.Token"
            android:summary="@string/preferences_delete_cell_token_summary"
            android:title="@string/preferences_delete_cell_token_title"/>
        <Preference
            android:key="Prefs.Null.Token"
            android:summary="@string/preferences_null_token_summary"
            android:title="@string/preferences_null_token_title"/>
    </PreferenceCategory>
    <PreferenceCategory android:title="@string/preferences_title_appearance">
        <SwitchPreference
            android:dialogTitle="@string/preferences_theme_title"
            android:key="Prefs.Appearance.Theme"
            android:summaryOff="@string/preferences_theme_summary_off"
            android:summaryOn="@string/preferences_theme_summary_on"
            android:switchTextOff="@string/general_no"
            android:switchTextOn="@string/general_yes"
            android:title="@string/preferences_theme_title"/>
    </PreferenceCategory>
    <PreferenceCategory android:title="@string/preferences_title_misc">
        <SwitchPreference
            android:dialogTitle="@string/preferences_read_back_title"
            android:key="Prefs.Voice.Feedback"
            android:switchTextOff="@string/general_no"
            android:switchTextOn="@string/general_yes"
            android:title="@string/preferences_read_back_title"/>
        <Preference
            android:key="Prefs.Export.Barcode.Properties"
            android:title="@string/preferences_export_title"
            android:summary="@string/preferences_export_summary"/>
        <Preference
            android:key="Prefs.Show.Eula"
            android:title="@string/preferences_eula_title"
            android:summary="@string/preferences_eula_summary"/>
    </PreferenceCategory>

</PreferenceScreen>

And I extend PreferenceFragment and load the xml via

addPreferencesFromResource(R.xml.prefs);

Nival

Don't have any api >20 device at hand, did you try looking at it with your device monitor -> Dump view hierarchy? – Logan

@DavidMedenjak Doing that gives me a hierarchy of layouts. Now what do I do with that? As I said, I'm not looking to reproduce the layout structure in a normal layout, but I rather want to make my existing PreferenceFragment look the same. – Nival

Answer 1

I've "solved" this by adding a dummy Preference between the PreferenceCategory items that uses a layout which mimmicks the look in the screenshot in the question:

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:custom="http://schemas.android.com/apk/res-auto">
    <PreferenceCategory></PreferenceCategory>

    <Preference layout="@layout/preference_divider" />

    <PreferenceCategory></PreferenceCategory>
</PreferenceScreen>

With a layout that looks something like this:

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

    <View     android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/shadow_bottom" />

    <View     android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/shadow_top" />

</LinearLayout>

Nival

How have you defined shadow_top and shadow_bottom? – Intervalometer

@JavierDelgado They are just images (9-patch). – Nival

Any chance you share those? – Latrinalatrine

Answer 2

For me it didn't work to set a background via a custom layout. Also the height didn't apply.

That worked for me though:

public class PreferenceDivider  extends Preference {
    public PreferenceDivider(Context context) {
        super(context);
    }
    public PreferenceDivider(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    protected View onCreateView(ViewGroup parent) {
        Resources res=getContext().getResources();
        View v=super.onCreateView(parent);
        v.setLayoutParams(new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT, res.getDimensionPixelSize(R.dimen.divider_height)));
        v.setBackground(res.getDrawable(R.drawable.preference_category_divider, null));
        return v;
    }
}

---

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:custom="http://schemas.android.com/apk/res-auto">
    <PreferenceCategory/>>

    <your.package.path.PreferenceDivider/>

    <PreferenceCategory/>>

</PreferenceScreen>

9 patch images are here: https://drive.google.com/file/d/1M5uXXnFc0HHx2BOHQqLtvAXFet4ICDj0/view?usp=sharing

Latrinalatrine