Preference Screen adding a entity header

Question

How can I add such called "Entity Header" in a PreferenceScreen like listed in the docs here: https://source.android.com/devices/tech/settings/settings-guidelines#entity_header https://source.android.com/devices/tech/settings/settings-guidelines#user_education

I can't find any element in Jetpack Preferences or other resource how I can add such header inside the PreferenceScreen.

Answer 1

There is no Entity header preference built in. You have to create your own.

1. Create a xml file with your own Entity header design. This is a file in res/layout folder. In my case: entity_preference.xml:

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/md_theme_light_secondaryContainer"
    android:gravity="center_horizontal|center_vertical"
    android:paddingVertical="16dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
   
    <ImageView
        android:id="@+id/entity_image"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_foreground" />
   
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="6dp"
        android:orientation="vertical">
    <TextView
        android:id="@+id/entity_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.Material3.HeadlineSmall"
        />
   
    <TextView
        android:id="@+id/entity_description"
        android:textAppearance="@style/TextAppearance.Material3.BodySmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Brief description"
        />
    </LinearLayout>
   

2. Use that custom design in your Preference screen. In my case this is a xml file in res/xml: preference_screen.xml:

    <EditTextPreference
        app:key="title_text"
        app:title="Title"
        app:useSimpleSummaryProvider="true" />
   

   [...]

Result preference screen