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

Question

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.

Could you please provide your custom theme `@style/PreferenceThemeOverlay.v14.Material`? — Elvis Xia - MSFT, Mar 13 '18 at 03:52
The Android.Support.V7.Preferences library provides `@style/PreferenceThemeOverlay.v14.Material`. I'm just referring to it. Have a look at [this tutorial](https://medium.com/@JakobUlbrich/building-a-settings-screen-for-android-part-1-5959aa49337c) on how to develop your own preference screen. He ends up in the same result, but there must be a way to remove the margin/padding. Else Google Play Store or Whats App, which are based on the same theme, wouldn't look like that. — pedzer, Mar 13 '18 at 13:40

score 3 · Accepted Answer · edited Mar 15 '18 at 00:20

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:

The purple gap problem is now fixed, but I want to add the padding left/right. I followed your steps, but the result looks like [that](https://i.imgur.com/mDxHk8i.jpg) and now I have like 3x 8dp peddings. How do I get only the outermost pedding (1) ? — pedzer, Mar 14 '18 at 16:29
These frames and gaps are automatically generated by `PreferenceCategory` and containers inside. You can see that from Layout Inspector. I don't think it's possible to remove them. please consider change to use other type of preference instead. — Elvis Xia - MSFT, Mar 15 '18 at 00:25

Raimo · Answer 2 · 2018-03-12T22:08:34.503

0

The purple area when looking at your layout with "use layout bounds" in the developer options enabled represent margins, not padding as far as I know.

I suggest trying to make a custom layout for your PreferenceCategory and your Preference's and setting them in your above axml using the android:layout attribute as such:

android:layout="@layout/layout_name"

(Might need to play around with both android:layout and android:widgetLayout attributes)

edited Mar 12 '18 at 22:08

answered Mar 12 '18 at 21:43

Raimo

1,494
1
10
19

Unfortunately, adding `android:layout_marginBottom="-5dp"` to `android.support.v7.preference.PreferenceCategory` or any other element in my preference_screen.xml doesn't help. – pedzer Mar 12 '18 at 22:00
@pedzer Updated my answer, have a look please. – Raimo Mar 12 '18 at 22:08
I already tried to make my own custom layout, but didn't manage to get resources of PreferenceCatogory in `@style/PreferenceThemeOverlay.v14.Material` to make it look like the Google Play Store. Nevertheless, I will check it a second time later this week. – pedzer Mar 13 '18 at 13:44

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

2 Answers2