Xamarin.Forms (Android) Entry custom renderer - entry bottom border only

Is there any custom renderer solution, for customizing Entry in order to achieve bottom border only (with some custom color)?

There are indeed some solutions for iOS, like that:
https://gist.github.com/davidtavarez/e3580c98357edd89de6f
but I couldn't found anything for Android (and not using any XML border definition - I would like to have everything in code).

Thanks!

Best Answer

Answers

  • JordanWeber-FlinkJordanWeber-Flink USUniversity ✭✭

    As it happens, I wrote a quick and dirty custom entry renderer to hide the border. You may be able to adapt it for your purpose:

    PCL:

    public class CustomEntry : Entry
        {
            public static readonly BindableProperty BorderStyleProperty = BindableProperty.Create ("BorderStyle", typeof (string), typeof (CustomEntry), "");
    
            public string BorderStyle {
                get { return (string)GetValue (BorderStyleProperty); }
                set { SetValue (BorderStyleProperty, value); }
            }
        }
    

    Droid:

    public class CustomEntryRenderer : EntryRenderer
        {
            protected override void OnElementChanged (ElementChangedEventArgs<Xamarin.Forms.Entry> e)
            {
                base.OnElementChanged (e);
    
                var entry = (CustomEntry)Element;
    
                if (entry != null) {                
                    SetBorderStyle (entry);
                }
    
                if (e.OldElement == null) {
                    //Wire events
                }
    
                if (e.NewElement == null) {
                    //Unwire events
                }
            }
    
            protected override void OnElementPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e)
            {
                base.OnElementPropertyChanged (sender, e);
    
                if (Control == null) {
                    return;
                }
    
                var entry = (CustomEntry)Element;
    
                if (e.PropertyName == CustomEntry.BorderStyleProperty.PropertyName) {
                    SetBorderStyle (entry);
                }
            }
    
            void SetBorderStyle (CustomEntry entry)
            {
                if (entry.BorderStyle == "None") {
                    Control.SetBackground (null);
                    Control.SetPadding (0, 0, 0, 0);
                }
            }
        }
    

    You would need to change the SetBorderStyle method to check for your named style (e.g. "BottomOnlyBlue" or what have you) and apply whatever you need on the Control object. HTH!

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭
    edited September 2016

    Actually I've already prepared PCL Entry class:

    public class CustomEntry : Entry
    {
        /// <summary>
        /// The PlaceholderTextColor property
        /// </summary>
        public static readonly BindableProperty BorderColorProperty = BindableProperty.Create("BorderColor", typeof(Color), typeof(Entry), Color.White);
    
        /// <summary>
        /// Gets or sets the color of the border.
        /// </summary>
        /// <value>The color of the border.</value>
        public Color BorderColor
        {
            get { return (Color)GetValue(BorderColorProperty); }
            set { SetValue(BorderColorProperty, value); }
        }
    }
    

    So that the BorderColor would be used for changing bottom border color in custom renderers (as I've already prepared for iOS), but I'm not able to define bottom border only at Control object (EntryEditText), like that:

    As I understand from you, is that I need to have style defined at XML Android file (like mentioned BottomOnlyBlue), but I'd like to do everything from code.

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭

    Anyone? I'd like to prepare some reusable CustomEntry at github, but I can't get it work at Android.
    Anyone?
    Thanks

  • madhav.shenoy83madhav.shenoy83 AUMember ✭✭
    edited January 31

    This stackoverflow post helped me stackoverflow.com/questions/25481244/how-add-a-border-only-on-bottom-of-edittext

    What worked for me was to create an Xml file called entry_underline.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <item android:bottom="1dp"
          android:left="-20dp"
          android:right="-20dp"
          android:top="-20dp">
        <shape android:shape="rectangle" >
          <stroke android:width="1dp"/>
        </shape>
      </item>
    </layer-list>
    

    Then I used this code to import the xml as a background for my Entry

    Control.Background = Resources.GetDrawable("entry_underline");

    Still figuring out how to color this thing. If anyone has any ideas , they're welcome

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭

    I've already posted solution - only code, without Android XML - previous post https://forums.xamarin.com/discussion/comment/223030/#Comment_223030

  • madhav.shenoy83madhav.shenoy83 AUMember ✭✭

    I tried your solution, but it didn't work for me since there was absolutely no space between the text and the underline and adding padding wouldn't work. This solution works well in that aspect
    My solution.

    Your solution.

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭

    Empty space between your password and forgot/reset is be removed - set spacing to 0, if you put it inside StackLayout, or ColumnSpacing to 0, if you put it inside Grid.

    Position of bottom border is to be adjusted at custom renderer side. I personally tweaked my solution, but didn't have time yet, to share it here. And inside my new solution, it's possible to put border a little bit up or down.

  • CedGabrangCedGabrang USMember ✭✭

    If someone already tried this workaround, it's working but don't forget to put this code in your CustomEntryRenderer.cs:

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

    You have to register your custom renderer to be able to access by your PCL project.

Sign In or Register to comment.