CODEWITHSUNDEEP
xamarinxamarin.forms
Jazab Najeb
Jazab Najeb

Reputation: 71

Remove underline from Entry Control in Xamarin Forms

I am new to Xamarin-Forms and developing a login form and using Material Design (IVisual). I have created a custom Entry class and inherited it with MaterialEntryRenderer to customize it. Thing i want to achieve is to remove underline Entry have. I have see alot of examples but all of them use EntryRenderer instead. 

public class CustomEntryRenderer : MaterialEntryRenderer
{
    public CustomEntryRenderer(Context context) : base(context) { }

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

        if (Control != null)
        {
           Control.Background = null;
           Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
        }
    }
}

it work fine with EntryRenderer but not for MaterialEntryRenderer.

Upvotes: 7

Views: 17142

Answers (6)

Tathata
Tathata

Reputation: 59

You can remove it, just using Xamarin.CommunityToolkit

First step

How to remove

How it looks :]

Effect

xmlns:tool="http://xamarin.com/schemas/2020/toolkit"

<Entry.Effects>
    <tool:RemoveBorderEffect />
</Entry.Effects>

Upvotes: 4

Yanar AlDaghestani
Yanar AlDaghestani

Reputation: 13

I am using Xamarin Form 5 version(5.0.0.2291)

you can follow this

https://kudzaidube.medium.com/xamarin-forms-how-to-remove-android-entry-underline-4628a8d1f058

just change this line

Android.Graphics.Color entryLineColor = Android.Graphics.Color.White;

to

Android.Graphics.Color entryLineColor = new Android.Graphics.Color(0,0,0,0);

in order to use transparent color

Upvotes: 0

Tam Almur
Tam Almur

Reputation: 69

In the new version of Xamarin Forms Visual Material 4.8+, I am using the below code and it is working fine for Android and iOS.

Xamarin Android

Entry

[assembly: ExportRenderer(typeof(Entry), typeof(EntryMaterialRendererAndroid), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace XFTest.Droid.Renderers
{
    public class EntryMaterialRendererAndroid : MaterialEntryRenderer
    {
        public EntryMaterialRendererAndroid(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.BoxStrokeWidth = 0;
                Control.BoxStrokeWidthFocused = 0;
            }
        }
    }
}

Xamarin iOS

Entry

[assembly: ExportRenderer(typeof(Entry), typeof(EntryMaterialRendereriOS), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace XFTest.iOS.Renderers
{
    public class EntryMaterialRendereriOS : MaterialEntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            EntryRemoveUnderLine();
        }

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

            EntryRemoveUnderLine();
        }

        protected void EntryRemoveUnderLine()
        {
            if (Control != null)
            {
                Control.BorderStyle = UITextBorderStyle.None;
                Control.Underline.Enabled = false;
                Control.Underline.DisabledColor = UIColor.Clear;
                Control.Underline.Color = UIColor.Clear;
                Control.Underline.BackgroundColor = UIColor.Clear;
                // Remove underline on focus
                Control.ActiveTextInputController.UnderlineHeightActive = 0f;
                // Remove placeholder background
                Control.PlaceholderLabel.BackgroundColor = UIColor.Clear;
            }
        }
    }
}

Upvotes: 1

Kudzai Dube
Kudzai Dube

Reputation: 101

Create an effect and apply it to the control, I just wrote a detailed article on how to do that in easy steps here: How to remove android entry underline

Upvotes: 4

Jonathan Freire
Jonathan Freire

Reputation: 41

Try this, it worked for me

Control.EditText.Background = null;
Control.EditText.SetBackgroundColor(Android.Graphics.Color.Transparent);

Upvotes: 4

Oleg Levin
Oleg Levin

Reputation: 3621

Try to change the Text Color property.

According to source it will change what you want:

_textInputLayout.BoxBackgroundColor = MaterialColors.CreateEntryFilledInputBackgroundColor(Element.BackgroundColor, Element.TextColor);

Look at: https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Material.Android/MaterialEntryRenderer.cs

Upvotes: -2

Related Questions