Search code examples
xamarin.androidandroid-preferencespreferenceactivityandroiddesignsupportpreferencescreen

How to remove the padding between preference title and the following preference?


I would like to remove the purple gap in my preference screen: preference

so that it should look like this: Google Play Store example

I'm using Xamarin Android and c# to develop my app. The preference screen is an PreferenceFragmentCompat from Android.Support.V7.Preferences library. The material style is set in my custom theme:

<style name="Theme.DarkTheme" parent="Theme.AppCompat.NoActionBar">
   <item name="colorPrimary">#673AB7</item>
   <item name="colorPrimaryDark">#512DA8</item>
   <item name="colorAccent">#039be5</item><!--#FF4081-->
   <item name="colorControlHighlight">#242424</item>
   <item name="android:listDivider">@style/android:drawable/divider_horizontal_dim_dark</item> 
   <item name="preferenceTheme">@style/PreferenceThemeOverlay.v14.Material</item> 

Here is how my xml resource file looks like, which I call by AddPreferencesFromResource(Resources.Id.preference_screen) in my PreferenceFragmentCompats OnCreatePreferences() function:

<android.support.v7.preference.PreferenceScreen 
   xmlns:android="http://schemas.android.com/apk/res/android">
   <android.support.v7.preference.PreferenceCategory
    android:title="App">
        <Preference
            android:key="advsettings_preference"
            android:title="Erweiterte Einstellungen" />
        <Preference
            android:key="license_preference"
            android:title="Rechtliche Hinweise" />
   </android.support.v7.preference.PreferenceCategory>
</android.support.v7.preference.PreferenceScreen>

I already tried to fix it myself by adding padding attributes to PreferenceScreen, but nothing changed.

All the latest NuGet Packages from Xamarin Android are installed (v27.0.2). Thanks in advance.


Solution

  • Please try set the style like this;

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        ...
        <!-- Customize your theme here. -->
        <item name="preferenceTheme">@style/MyPreferenceStyle</item>
    </style>
    
    <style name="MyPreferenceStyle" parent="@style/PreferenceThemeOverlay.v14.Material">
        <item name="preferenceCategoryStyle">@style/MyPreferenceCategoryStyle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
    </style>
    
    <style name="MyPreferenceCategoryStyle" parent="@style/Preference.Category.Material">
        <item name="android:layout">@layout/preference_category</item>
    </style>
    

    And preference_category.axml:

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+android:id/title"
        android:textColor="?android:attr/colorAccent"
        android:textSize="14dp"
        android:fontFamily="sans-serif-medium"
        android:paddingStart="16dp"
        android:singleLine="true"
        android:paddingTop="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    

    And AppSettings:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.preference.PreferenceScreen
        xmlns:android="http://schemas.android.com/apk/res/android">
        <android.support.v7.preference.PreferenceCategory
            android:title="App">
            <Preference
                android:key="advsettings_preference"
                android:title="Erweiterte Einstellungen"
                android:summary="BenachRichtigung"/>
        </android.support.v7.preference.PreferenceCategory>
    </android.support.v7.preference.PreferenceScreen>
    

    It will resolve the gap issue. And also look similar to your screenshot of Google Play Store. Well, not exactly the same from the Layout Inspector, but similar:

    enter image description here