Get rid of underline from Entry in Xamarin Android

Have you ever felt annoyed by the entry’s underline on Android? I know it’s there by default, and the designers in Google’s headquarter must have reason for it. But. sometime it just doesn’t suit the design of your app, so you just need to get rid of it. I once tried to do it, I searched on the internet, but all I found was how to do it in Android Studio. There’s bunch examples how to do it if you’re developing an Android app in Android Studio, all you have to do is just doing some simple search on internet. But, what if you’re developing a Cross Platform app with Xamarin? Nah, it will be bit more complicated.

Create Background for Entry

So, this is what I did with my project. I created an .axml file and I put it in drawable folder in Droid project. I will use this file to be the background of the entry. The shape of the entry will be a transparent rectangle. Why’s transparent? Because it’s Android’s default background color. Why’s rectangle? It’s just for simplicity and normality sake, you can make a circle instead, if you want. The following code is Background Entry code.

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#00ffffff"/>
    </shape>
  </item>
</selector>

Let’s discuss it a little bit. The shape is rectangle, no question about it. And the color is #00ffffff. As you know that #ffffff is Hex code for the color white. And the two zeroes in front of it is the degree of the transparency. The smaller the number, the more transparent the color. So, if you don’t want it to be too transparent, you can just add the number, like 20 or 70. But for this example I will use the ’00’ number.

Custom Renderer

Now after we have new background for our Entry, all we need to do just create custom renderer to apply the background. Here’s the code for the custom entry renderer.

public class CustomEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.Background = Forms.Context.GetDrawable(Resource.Drawable.BackgroundEntry);
        Control?.SetPadding(20, 20, 20, 20);
    }
}

This method has one weakness, we don’t actually remove the underline, we just cover it with a background. So, the underline is still there, you just can’t see it anymore. It makes an awkward appearance that the text user inputing will slightly closer to the top. It’s vertically above the middle. And it also look too close to the left edge. So, I set some padding to make sure the the text of the entry will be in right place.

Let’s try it out

Now that we have our Entry ready, let’s try it out. When you’re using an Entry in a project, usually when you’re creating some kind of a form, there will be many states of the entry. For example, one normal state of a blank entry, or a disable entry that require user to fill other field first, or an error state when user submit the form but left the requirement field empty. To try out that condition, I created a simple app to show different state of an entry. Here’s the xaml code.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="ColorfulEntry" xmlns:control="clr-namespace:Testing.CustomControls" x:Class="Testing.Views.ColorfulEntry">
	<ContentPage.Content>
         <StackLayout VerticalOptions="StartAndExpand" Padding="30,30,30,0">
            <control:CustomEntry Placeholder="This is normal Entry"/>
            <control:CustomEntry Placeholder="This entry is disabled" IsEnabled="false" BackgroundColor="Gray"/>
            <control:CustomEntry Placeholder="This field must be filled" BackgroundColor="Red"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Entry1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s