Search code examples
androidxamarin.formsmultiplatform

Need to apply a style for getting rid of bottom line on Entry


First off, I'm brand new to Xamarin Forms so be gentle. I'm needing to get rid of the bottom line that shows for Entry input in Android. It displays fine in iOS. I've done some research and found that this:

<style name="NoBaseline" parent="android:style/Widget.EditText">
    <item name="android:background">#D3D3D3</item>
</style>

should do the trick by simply just making the underline the same color as the background color of the Entry box. I've placed this code in my styles.xml file, but I feel like I need to apply this style somewhere, but I'm just not sure where. Any help for a newb would be greatly appreciated.

Here's the whole file:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="MyTheme" parent="MyTheme.Base">
    </style>

    <style name="MyTheme.Base"
           parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">#2196F3</item>
        <item name="colorPrimaryDark">#1976D2</item>
        <item name="colorAccent">#FF4081</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    </style>

    <style name="NoBaseline" parent="android:style/Widget.EditText">
        <item name="android:background">#D3D3D3</item>
    </style>

    <style name="AppCompatDialogStyle" 
           parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#FF4081</item>
    </style>

    <style name="Splash" parent ="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item>
    </style>
    <style name="MyTheme.Splash" 
           parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

Solution

  • In case you didn't see this while you were researching, here is a solution posted to Github by dkudelko which is probably a little simpler if you are just trying to remove the underline.

    To do this simply create a class in you Android project called NoUnderlineEntry then add this code.

    using <YourApp>.Droid;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;    
    
    [assembly: ExportRenderer(typeof(Entry), typeof(NoUnderlineEntry))]
    namespace <YourApp>.Droid
    {
        public class NoUnderlineEntry : EntryRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
            {
                base.OnElementChanged(e);
                Control?.SetBackgroundColor(Android.Graphics.Color.Transparent);
            }
        }
    }
    

    After you replace with the name of your app, you will have created a custom renderer that overrides the default Entry on Android to set the control background color to transparent.

    Here is documentation for creating custom renderers for Entry.

    **Note: I haven't personally tested it, but multiple people commented that it works.