Add padding to button renderer with Image on Android Xamarin

Question

I'm having trouble padding an button with Image on Android. I have it working using Insets on iOS but can't achieve the same thing on Android.

Here is my Android renderer code:

public class PaddedButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var button = (PaddedButton)Element;
                UpdatePadding();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(PaddedButton.Padding))
            {
                UpdatePadding();
            }
        }

        private void UpdatePadding()
        {
            var element = Element as PaddedButton;
            if (element != null)
            {
                Control.SetPadding(
                    (int)element.Padding,
                    (int)element.Padding,
                    (int)element.Padding,
                    (int)element.Padding);
            }
        }

    }

Here is my working iOS button:

public class PaddedButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var button = (PaddedButton)Element;

                Control.ContentEdgeInsets = new UIEdgeInsets((nfloat)button.Padding, (nfloat)button.Padding, (nfloat)button.Padding, (nfloat)button.Padding);
            }
        }
    }

Any suggestions? I'm starting to think padding is the wrong attribute to be changing on Android. Thanks.

Have you solved your problem ? – York Shen Dec 21 '17 at 07:10 — York Shen, Dec 21 '17 at 07:10

York Shen · Answer 1 · 2017-12-19T02:36:13.467

Add padding to button renderer with Image on Android Xamarin

I test your code, it did not work, but you could refer to @Dbl's Answer, it works fine both on Android and iOS.

First, make sure you have define the Padding in your PaddedButton :

public class EnhancedButton : Button
{ 
    public static BindableProperty PaddingProperty = BindableProperty.Create(nameof(Padding), typeof(Thickness), typeof(EnhancedButton), default(Thickness), defaultBindingMode: BindingMode.OneWay);

    public Thickness Padding
    {
        get { return (Thickness)GetValue(PaddingProperty); }
        set { SetValue(PaddingProperty, value); }
    }
}

Second, in your UpdatePadding() method, when you using this.Control.SetPadding(), modify your code like this :

private void UpdatePadding()
{
    var element = this.Element as EnhancedButton;
    if (element != null)
    {
        this.Control.SetPadding(
            (int)element.Padding.Left,
            (int)element.Padding.Top,
            (int)element.Padding.Right,
            (int)element.Padding.Bottom
        );
    }
}

Sorry, I was away on vacation. Your solution is the same as mine, except I don't specify left/top/right/bottom padding since my padding is uniform. Yours probably works because your image is already the "correct" size while mine is too big. I've never had this problem until my images were apparently too big, but the renderer should be able to resize them with padding. I eventually just went with stacking an `Image` on top of a `Frame` inside a `RelativeLayout` with a `GestureRecognizer`. — Will Nasby, Jan 02 '18 at 20:52
@WillNasby, if you solved your problem by your method, could you please post the answer so that someone else who have encounter the problem can see the answer? — York Shen, Jan 04 '18 at 09:07

Add padding to button renderer with Image on Android Xamarin

1 Answers1