Odd Button Spacing in Xamarin Forms (Android) When Using a StackLayout

Question

I have observed some odd spacing behavior when using a StackLayout control to layout a series of Button controls.

Using the following XAML:

<StackLayout Spacing="4">
    <Button Text="Option #1" />
    <Button Text="Option #2" />
    <Button Text="Option #3" />
</StackLayout>

Produces the following in my emulator:

Notice that there is considerably more spacing than the specified amount (of 4).

Now, using the following XAML:

<StackLayout Spacing="4">
    <Button BackgroundColor="LightPink" Text="Option #1" />
    <Button BackgroundColor="LightBlue" Text="Option #2" />
    <Button BackgroundColor="LightGreen" Text="Option #3" />
</StackLayout>

Produces the following in my emulator:

Here, the spacing looks much more (and indeed is) correct.

Can someone explain why the non-colored buttons appear the way that they do?

Found a similar issue on Xamarin forums here https://forums.xamarin.com/discussion/64848/backgroundcolor-changes-button-size. Looks like they created a platform specific feature to let you revert the style back once you apply a color to the button. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/button-padding-shadow — Andres Castro, Oct 01 '19 at 14:37

score 4 · Accepted Answer · answered Oct 01 '19 at 20:17

That spacing is part of the Android default Drawable background for the Buttons.

You can remove this by changing the color, as this will replace the background. As you just did.

If you want to remove the space without changing the color explicitly you could set the theme in the Android project on the styles.xml file and use the Android color from the button, something like this:

<style name="NoPaddingButton" parent="android:Widget.Material.Button">
   <item name="android:layout_margin">0dip</item>
   <item name="android:background">@color/button_material_light</item>
</style>

Then add this style to the Theme, usually called MainTheme.Base

<item name="android:buttonStyle">@style/NoPaddingButton</item>

The margin is part of this answer.

The only issue is that the above will remove the replay effect (the effect you see when you tap on the button).

To get it back you can follow this:

In the Drawable folder add a new XML file called button_gray_ripple.xml and paste the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- in drawable folder-->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/button_material_light" />
        </shape>
    </item>
</ripple>

Your previously created style will then look like this:

<style name="MyButton" parent="android:Widget.Material.Button">
    <item name="android:layout_margin">0dip</item>
    <item name="android:background">@drawable/button_gray_ripple</item>
</style>

All the above should look like this:

I was unable to get the ripple thing to work (the app kept throwing an exception) and since I am fairly *new* to Xamarin, I didn't spend a lot of time on it. Besides, I can set the background color of the button from the Xamarin Forms side and avoid all of this. I have marked your solution as the accepted answer because it explained what is happening with regard to my original question. — Jason Richmeier, Oct 02 '19 at 13:23

Odd Button Spacing in Xamarin Forms (Android) When Using a StackLayout

1 Answers1