Removing Padding from Entry

Question

So Entry does not have a padding attribute, however there is some definite padding that goes on the Entry.

Example

I have the "Michigan" Entry lined up with the "Select" Label below, however they look misaligned because the entry has some padding to the left. I tried the margin attribute that entry does have, however it did not work.

How do I get rid of that gap/padding?

I'd like to add that adding an offset margin does not working.

Look at this thread, http://stackoverflow.com/questions/39082015/how-to-set-left-and-right-padding-to-an-entry-cell-in-xamarin-forms/39082057#39082057 — Himanshu Dwivedi, Nov 24 '16 at 06:31

score 12 · Accepted Answer · answered Nov 23 '16 at 20:48

12

You need to make a custom renderer for the entry and set the Android EditText's PaddingLeft to 0 using the SetPadding method.

Excerpt from CustomEntryRenderer on Android:

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
    base.OnElementChanged(e);
    if (e.NewElement == null) return;
    Control.SetPadding(0, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);
}

answered Nov 23 '16 at 20:48

Will Decker

3,216
20
30

In what file is that code supposed to go at what place? – Christian Oct 29 '18 at 11:08
A clean and elegant way to change only the left padding, thank you! @Christian this is the CustomEntryRenderer File in the Android project, google it you will find a lot of examples :) – Elelio Aug 07 '19 at 07:01

score 3 · Answer 2 · answered Nov 12 '18 at 00:33

For me the custom render that worked was:

[assembly: Xamarin.Forms.ExportRenderer(typeof(MyApp.Views.Controls.CustomEntry), typeof(MyApp.Droid.Views.Controls.CustomRenderer.Android.CustomEntryRenderer))]
namespace MyApp.Droid.Views.Controls
{
 namespace CustomRenderer.Android
    {
        public class CustomEntryRenderer : EntryRenderer
        {
            public CustomEntryRenderer(Context context) : base(context)
            {
            }

            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
            {
                base.OnElementChanged(e);

                if (Control != null)
                {
                    Control.Background = new ColorDrawable(Color.Transparent);
                    Control.SetPadding(0, 0, 0, 0);
                    Control.Gravity = GravityFlags.CenterVertical | GravityFlags.Left;
                    Control.TextAlignment = TextAlignment.Gravity;
                }
            }
        }
    }
}

score 1 · Answer 3 · answered May 21 '19 at 15:57

I was struggling with the same issue, but I solved it by creating a custom Entry type which adds a Padding property to Xamarin Forms' Entry:

public class CustomEntry : Entry
{
    public static readonly BindableProperty PaddingProperty =
        BindableProperty.Create(
            nameof(Padding),
            typeof(Thickness),
            typeof(CustomEntry),
            new Thickness());

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

Then I render this CustomEntry with a custom renderer, just as Danilow proposed, with the only difference, that I read the PaddingProperty from CustomEntry and apply it in the CustomEntryRenderer.

[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntryRenderer))]

namespace CrossPlatformLibrary.Forms.Android.Renderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null)
            {
                return;
            }

            if (this.Element is CustomEntry customEntry)
            {
                var paddingLeft = (int)customEntry.Padding.Left;
                var paddingTop = (int)customEntry.Padding.Top;
                var paddingRight = (int)customEntry.Padding.Right;
                var paddingBottom = (int)customEntry.Padding.Bottom;
                this.Control.SetPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
            }
        }
    }
}

Beware: This code needs to be extended if you want to react on PaddingProperty changes - AND - you will need to write a custom renderer for IOS if you want to support the Padding property there too.

score 0 · Answer 4 · answered May 17 '20 at 12:44

Here's the same thing implemented on iOS for anyone who needs it there too. It's basically setting the left view to have 0 width that does it, but you can also play with the "LeftViewMode" to hide it completely.

 this.Control.LeftView = new UIView(new CGRect(0, 0, 0, this.Control.Frame.Height));

Full code

using CoreGraphics;
using UIKit;
using YourNamespace.iOS.CustomRenderers;
using YourNamespace.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace YourNamespace.iOS.CustomRenderers
{

    public class BorderlessEntryRenderer : Xamarin.Forms.Platform.iOS.EntryRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {

            base.OnElementChanged(e);
            if (this.Control != null)
            {

                this.Control.LeftView = new UIView(new CGRect(0, 0, 0, this.Control.Frame.Height));
                this.Control.LeftViewMode = UITextFieldViewMode.Always;

            }

        }
    }
}

Removing Padding from Entry

4 Answers4