Is it possible to change the colour of the line below / Border of a TextBox (Entry)

Question

I am creating a Xamarin.Forms application on Android and I am trying to change the colour of the line below my Xamarin.Forms Entry control.

I have an Entry control like so:

<Entry Text="new cool street"/>

I would like to change the colour of the line below this Entry from the default white to more of a purple to match my theme.

Idealy it would be better to do using Android Styles as it would apply to all controls inheriting from Entry if possible

Is this possible to do?

@AkashAmin The `colorAccent` is only used when the `TextBox` is focused. I am looking to change the line colour when the `TextBox` is unfocused — JKennedy, Jul 05 '16 at 15:53
Possible duplicate of [How to change Border Color of Entry in Xamarin.Forms](http://stackoverflow.com/questions/37822668/how-to-change-border-color-of-entry-in-xamarin-forms) — Rodrigo Elias, Jul 05 '16 at 17:33

root · Accepted Answer · 2016-07-06T15:11:45.947

you can use custom renderer that will affect all entries,

here's for android:

[assembly: ExportRenderer(typeof(Entry), typeof(MyEntryRenderer))]
namespace Android.MyRenderers
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null) return;

            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                Control.BackgroundTintList = ColorStateList.ValueOf(Color.White);
            else
                Control.Background.SetColorFilter(Color.White, PorterDuff.Mode.SrcAtop);
         }    
    }
}

and iOS:

[assembly: ExportRenderer (typeof(Entry), typeof(MyEntryRenderer))]
namespace iOS.MyRenderers
{
    public class MyEntryRenderer : EntryRenderer
    {
        private CALayer _line;

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

            if (Control == null || e.NewElement == null)
                return;

            Control.BorderStyle = UITextBorderStyle.None;

            _line = new CALayer {
                BorderColor = UIColor.FromRGB(174, 174, 174).CGColor,
                BackgroundColor = UIColor.FromRGB(174, 174, 174).CGColor,
                Frame = new CGRect (0, Frame.Height / 2, Frame.Width * 2, 1f)
            };

            Control.Layer.AddSublayer (_line);
        }
    }
}

not sure about Windows solution on this

What platform is your example for and do you know where I can find code to do it for the other two? — JKennedy, Jul 06 '16 at 15:02
Thanks thats great! I'll look at windows and add it if I find out — JKennedy, Jul 06 '16 at 15:23
have you met with a width issue of the entry bottom line in ios ? — Akhil George, Aug 06 '19 at 10:53
@Akhil George see [my answer](https://stackoverflow.com/a/57994458/4922151) below — mahclark, Sep 18 '19 at 13:57

score 28 · Answer 2 · answered Jul 11 '17 at 04:48

28

I had the same problem and just changing the colorAccent value in styles.xml (in Xamarin.Android project) will change the colour of the cursor and the bottom border of an Entry field.

<item name="colorAccent">#BA55D3</item>

answered Jul 11 '17 at 04:48

Curiosity

1,753
3
25
46

It looks like this only changes the color when the control has focus. – CodeGrue Jan 15 '18 at 21:04
11

Focused: #FF73B72F Unfocused: #FF73B72F" – Xiokraze Nov 13 '19 at 22:22

djunod · Answer 3 · 2017-09-06T02:40:28.050

Since I have the content pages with one background color and dialogs with another, using Styles to specify the bottom bar color is totally the wrong answer. And since the OP only asked about Android, this is just Android...

I use a custom renderer to set the bottom bar color the same as the text color. Have to both ElementChanged and PropertyChanged.

[assembly: ExportRenderer(typeof(Xamarin.Forms.Entry), typeof(CustomEntryRenderer))]
namespace XamFormsConnect.Droid
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
            {
                var entry = (Xamarin.Forms.Entry)e.NewElement;
                if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                    Control.BackgroundTintList = ColorStateList.ValueOf(entry.TextColor.ToAndroid());
                else
                    Control.Background.SetColorFilter(entry.TextColor.ToAndroid(), PorterDuff.Mode.SrcAtop);
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == "TextColor")
            {
                var entry = (Xamarin.Forms.Entry)sender;
                if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                    Control.BackgroundTintList = ColorStateList.ValueOf(entry.TextColor.ToAndroid());
                else
                    Control.Background.SetColorFilter(entry.TextColor.ToAndroid(), PorterDuff.Mode.SrcAtop);
            }
        }
    }
}

I like how this answer uses the TextColor property instead of hard-coding "White" like the accepted answer. — CodeGrue, Jan 15 '18 at 21:17

PaulCrp · Answer 4 · 2022-01-06T00:44:06.370

UPDATE : Xamarin.Forms 2.5

I've trying the top rated solution and an error occurs : “Context is obsolete as of version 2.5. Please use a local context instead”.

After some quick search :

The code need to be updated :

using <YOUR_APP_NAME>.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Content;
using Android.OS;
using Android.Content.Res;
using Android.Graphics;

[assembly: ExportRenderer(typeof(Entry), typeof(MyRenderers))]
namespace Android.MyRenderers
{
    public class MyRenderers : EntryRenderer
    {

        public MyRenderers(Context context) : base(Android.App.Application.Context)
        {

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

            if (Control == null || e.NewElement == null) return;

            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Ivory);
            else
                Control.Background.SetColorFilter(Android.Graphics.Color.Ivory, PorterDuff.Mode.SrcAtop);
        }
    }
}

For who need the update.

score 2 · Answer 5 · answered Jul 05 '16 at 15:36

2

simple: edit your res/values/colors.xml as: #303F9F

You can place any hex color code in place of#303F9F

<color name="colorPrimaryDark">#303F9F</color>

answered Jul 05 '16 at 15:36

Ram Koti

2,203
7
26
36

Where do I implement this color to apply it to my `Entry`? So far this is just defining a new Color – JKennedy Jul 05 '16 at 15:56
see [https://developer.xamarin.com/guides/android/user_interface/material_theme/](https://developer.xamarin.com/guides/android/user_interface/material_theme/) for more info on what I mean – JKennedy Jul 05 '16 at 16:08

score 2 · Answer 6 · answered Sep 18 '19 at 13:55

If anyone is experiencing the width or y position misbehaving with root's iOS custom renderer, I found a solution.

Include the entry and two more variables as class fields:

private CustomEntry _entry;
private double _yPos;
private double _width;

Assign the value in OnElementChanged:

if (e.NewElement != null)
    _entry = e.NewElement as CustomEntry;

In OnElementPropertyChanged, include the following:

if (e.PropertyName == "Width")
{
    _width = _entry.Width;
}
else if (e.PropertyName == "Height")
{
    _yPos = _entry.Height;
}
_line.Frame = new CGRect(0, _yPos, _width, 1f);

score 0 · Answer 7 · answered Jan 11 '17 at 08:54

0

If you are using Xamarin Forms, go to Mobile.Droid, Resources, values and on the "Your Colur", it will work.

answered Jan 11 '17 at 08:54

Otshepeng Morena Tlalang

11
1

score 0 · Answer 8 · answered Aug 29 '19 at 10:21

Another simple visual solution that you can use is just to hide this line:

<Grid>
   <Entry Placeholder="Your Entry"/>
   <BoxView BackgroundColor="White" HeightRequest="10"/>
</Grid>

You can improve it by creating your own component instead of using hardcoded color.

score 0 · Answer 9 · answered Jul 31 '20 at 13:16

Change the entry cursor & underline color from pink in android. This can be achieved simply by adding <item name="colorControlActivated">#007bff</item> to your styles.xml file, which resides in Resources/values folder in the Xamarin forms Android project.

Note: this approach will apply the changes to every element within your app. If that is not desired, use the custom renderer approach.

Can reference this answer from xamarin forums

score 0 · Answer 10 · answered Aug 19 '21 at 15:53

Above solution is obsolete. This one here is the recommended one. (Also with all the neccissary usings. Can be confusing sometimes...)

using System;
using System.ComponentModel;
using Android.Content;
using Android.Content.Res;
using InteriorCircle.Droid.CustomComp;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntry))]
namespace InteriorCircle.Droid.CustomComp
{
    public class CustomEntry : EntryRenderer
    {
        public CustomEntry(Context context) : base(context)
        {

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

            if (Control == null || e.NewElement == null) return;

            Control.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Android.Graphics.Color.Black);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == Entry.TextProperty.PropertyName)
            {
                if (Control.Text.Length > 6)  //this is your condition(For example, here is the length of the text content)
                {
                    Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Red);
                }
                else
                {
                    Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Black);
                }
            }
        }

    }
}

Is it possible to change the colour of the line below / Border of a TextBox (Entry)

10 Answers10

UPDATE : Xamarin.Forms 2.5

Linked