How to get Android system preferences look?

6
votes

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

enter image description here

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:

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);
2
androidlayoutmaterial-designandroid-preferences
Don't have any api >20 device at hand, did you try looking at it with your device monitor -> Dump view hierarchy? – David Medenjak
@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. – Baz

2 Answers

4
votes

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>
0
votes

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