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

c# android xamarin xamarin.forms

31,650

Solution 1

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

Solution 2

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>

Solution 3

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);
            }
        }
    }
}

Solution 4

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.

Solution 5

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>

View more solutions

31,650

User1

A Desktop, Mobile and Web Developer from the United Kingdom

Updated on January 06, 2022

Comments

User1 over 2 years
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?
- Akash Amin almost 8 years
  
  User android styles. <item name="colorAccent">@android:color/yourcolour</item>
- User1 almost 8 years
  
  @AkashAmin The colorAccent is only used when the TextBox is focused. I am looking to change the line colour when the TextBox is unfocused
- Rodrigo Elias almost 8 years
  
  Possible duplicate of How to change Border Color of Entry in Xamarin.Forms
User1 almost 8 years

Where do I implement this color to apply it to my Entry? So far this is just defining a new Color
User1 almost 8 years

see https://developer.xamarin.com/guides/android/user_interface/‌material_theme/ for more info on what I mean
User1 almost 8 years

What platform is your example for and do you know where I can find code to do it for the other two?
root almost 8 years

@user1, this was android, just added iOS
User1 almost 8 years

Thanks thats great! I'll look at windows and add it if I find out
Cícero Moura almost 7 years

I'd like to kiss you! Thanks dude
CodeGrue over 6 years

It looks like this only changes the color when the control has focus.
CodeGrue over 6 years

I like how this answer uses the TextColor property instead of hard-coding "White" like the accepted answer.
Akhil George almost 5 years

have you met with a width issue of the entry bottom line in ios ?
mahclark over 4 years

@Akhil George see my answer below
Xiokraze over 4 years

Focused: <item name="colorAccent">#FF73B72F</item> Unfocused: <item name="colorControlNormal">#FF73B72F</item>"