Xamarin.Forms: Remove padding inside Button

Question

I want to have a small button. The height of the button is 30. On some plattforms (Android, UWP) the text inside the button is cut off. That's because there is a padding between the text and the outside border.

One option is to make the button bigger, but there is enough space for the text. Is there an option for setting the inside padding?

Solution 1

On Android, you can do this with styling.

Resources/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="myTheme" parent="android:Theme.Material">
    <item name="android:buttonStyle">@style/noPaddingButtonStyle</item>
  </style>

  <style name="noPaddingButtonStyle" parent="android:Widget.Material.Button">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
  </style>
</resources>

AndroidManifest.xml

Set custom theme as application theme.

<application android:label="$safeprojectname$" android:theme="@style/myTheme"></application>

It's setting the left and right margin to 0dp. The default style has a padding.

This is working on Android >= 5. If you want to support lower android versions, you have to add multiple style folders and use other base themes like Theme.Holo or Theme.AppCompat.

---

Or you go for the Renderer:

using App6.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Button), typeof(ZeroPaddingRenderer))]
namespace App6.Droid
{
    public class ZeroPaddingRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            Control?.SetPadding(0, Control.PaddingTop, 0, Control.PaddingBottom);
        }
    }
}

Solution 2

One option is to use a Label instead of a Button, and use a TapGestureRecognizer instead of Click events. The Label gives you more control over the layout of the text than a Button, but you don't get the advantage of it being translated into the native button control on each platform.

Solution 3

Maybe you can play with the FontSize in order to fit the button HeightRequest, unless that you need to create a custom renderer to set the padding.

Comments

[testing]

So there is no option. I could use different FontSize for each platform, but if I want to have it perfect I'll need the custom renderer.

[Kala J]

Hi Sven, I'm new to custom renderers. I want to add that custom renderer. I have it saved under my Droid project. How do I make sure my Button can get access to SetPadding method above in Xamarin.Forms? Thanks!

[Sven-Michael Stübe]

You have to crate a custom Xamarin.Forms Control MyButton : Button with a bindable property Padding and then use the shown renderer but with [assembly: ExportRenderer(typeof(MyButton), typeof(ZeroPaddingRenderer))] here is a step by step developer.xamarin.com/guides/xamarin-forms/custom-renderer/…

[Sven-Michael Stübe]

Or maybe easier use an Effect instead of custom renderer: codeworks.it/blog/?p=433

[Kala J]

I'm going to try the custom renderer. Thank you so much for your help!

[Kala J]

Before I screw up my code, can show you me an example of what a Bindable property for Padding would look like? The documentation link you sent does not show an example of creating a Bindable property. Thank you!

[Sven-Michael Stübe]

blog.bitbull.com/2015/01/17/… with type Thickness instead ob bool.

[Kala J]

Great, almost got it. I have one more question... what the second parameter in Create<> What should it be?: public static readonly BindableProperty PaddingProperty = BindableProperty.Create<UIButtonWithoutPadding, Thickness>(s => s.Padding, whatisthis?);

[Sven-Michael Stübe]

Let us continue this discussion in chat.

[François]

I do that a lot. But I noticed a performance hit on Android compared to a button. 1) you have to exactly tap on the text (which is sometimes thin) and 2) the attached command doesn't fire as fast as with a button.

[matfillion]

TapGestureRecognizers will conflict with ScrollViews also.

[Shimmy Weitzhandler]

@François Is there a way to overcome tapping exactly on text?

[François]

you can cheat and add a transparent boxview on top of the label and add the tap gesture on the box. However, buttons offers more behaviors around a command that just recognizing a tap so I try to use them as much as possible.

[Shimmy Weitzhandler]

@François WOW tx for your quick reply. Is there a way to achieve Pressed and Released events of a Button with GestureRecognizers? I need information on the duration of the tap/click/mouse-down.

[François]

I've never tried. Why would you rewrite the button control? Is your issue the padding as in my initial post? Maybe you should ask an entirely new question?

[Shimmy Weitzhandler]

@François my issue is getting rid of the Padding on Android indeed. Please see this and this suggestions. Any other ways to achieve Press and Release with zero padding other than custom renderers?