Xamarin Forms : Hide Editor or Entry underline - xamarin.forms

Question

I am using an editor in my UI. But the black underline is irritating, is there any way to remove that underline?
Thanks in advance

Answer 1

I have done the entry and editor underline removal features using custom renders.
##In PCL##
CustomEntry.cs
using Xamarin.Forms;
namespace Entry_Editor_Sample
{
public class CustomEntry : Entry
{
}
}
CustomEditor.cs
using Xamarin.Forms;
namespace Entry_Editor_Sample
{
public class CustomEditor : Editor
{
}
}
##In android##
CustomEntryRenderer.cs
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.Text;
using Entry_Editor_Sample;
using Entry_Editor_Sample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Entry_Editor_Sample.Droid
{
class CustomEntryRenderer : EntryRenderer
{
public CustomEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
//Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
}
}
}
}
CustomEditorRenderer.cs
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.Text;
using Entry_Editor_Sample;
using Entry_Editor_Sample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Entry_Editor_Sample.Droid
{
class CustomEditorRenderer : EditorRenderer
{
public CustomEditorRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
//Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));
}
}
}
}
##In IOS##
CustomEntryRenderer.cs
using Entry_Editor_Sample;
using Entry_Editor_Sample.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Entry_Editor_Sample.iOS
{
class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BorderStyle = UITextBorderStyle.None;
Control.Layer.CornerRadius = 10;
//Control.TextColor = UIColor.Black;
}
}
}
}
CustomEditorRenderer.cs
using Entry_Editor_Sample;
using Entry_Editor_Sample.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Entry_Editor_Sample.iOS
{
class CustomEditorRenderer : EditorRenderer
{
public CustomEditorRenderer()
{
UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
}
});
UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
}
});
}
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Layer.CornerRadius = 10;
Control.TextColor = UIColor.Black;
}
}
}
}
##Finally in MainPage.xaml##
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Entry_Editor_Sample"
mc:Ignorable="d"
BackgroundColor="White"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
x:Class="Entry_Editor_Sample.MainPage">
<StackLayout
VerticalOptions="CenterAndExpand"
HorizontalOptions="FillAndExpand"
BackgroundColor="White">
<local:CustomEntry
BackgroundColor="SkyBlue"
Placeholder="Entry"
PlaceholderColor="Black"
TextColor="Black"/>
<local:CustomEditor
BackgroundColor="SkyBlue"
Placeholder="Editor"
HeightRequest="100"
PlaceholderColor="Black"
TextColor="Black"/>
</StackLayout>
</ContentPage>
I uploaded a sample on here :)

Answer 2

Create a custom renderer in your Android project:
public class CustomEntryRenderer : EntryRenderer {
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) {
base.OnElementChanged(e);
Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
Then in your XAML:
<ContentPage xmlns:xyz="clr-namespace:PclNamespaceForCustomControls">
...
<xyz:CustomEntry Placeholder="Lorem ipsum" />
</ContentPage>
See Microsoft docs for more info: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/entry

Answer 3

You can use custom renderers to achieve entry and editor underline removal.
I am using the below code to apply these feature for all entries and editors in the project and it is working with Xamarin Forms 4.8+
Xamarin Android
Entry
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendererAndroid), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.Droid.Renderers
{
public class EntryRendererAndroid : EntryRenderer
{
public EntryRendererAndroid(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);
}
}
}
}
Editor
[assembly: ExportRenderer(typeof(Editor), typeof(EditorRendererAndroid), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.Droid.Renderers
{
public class EditorRendererAndroid : EditorRenderer
{
public EditorRendererAndroid(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Background = null;
Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
}
Xamarin iOS
Entry
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendereriOS), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.iOS.Renderers
{
public class EntryRendereriOS : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}
}
Editor
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendereriOS), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.iOS.Renderers
{
public class EntryRendereriOS : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}
}