Search code examples
androidlayoutmaterial-designandroid-preferences

How to get Android system preferences look?


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

Solution

  • 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>