Xamarin forms – Clear entry control effect

When using the Entry control of Xamarin forms, we don’t have a standard fast way to let the user clear his typed in text.

It would be nice if we could add a Clear icon on the right side of the entry control that clears the current text when tapped.
Example Android and iOS:

Android previewiOS preview

Let me show you how this can be done with an Effect for Xamarin forms!

Do read up on how to create effects in Xamarin forms here…

First iOS, because this is actually the easiest to implement.
In your iOS project add a folder called Effects and in it add a new class file called ClearEntryEffect.cs.
The code for this file is as follows

In this effect, we just get hold of the UITextField native control of the Entry and adjust the ClearButtonMode property to UITextFieldViewMode.WhileEditing. This is possible due to the fact that the iOS UITextField actually has this feature build in, we only need to trigger it.
So one down, one more to go…

Android is a bit trickier, because the native EditText control does not have this pre build in, in other words we need to add this ourselves.
Again add an Effects folder, but now in the Android project and again add a ClearEntryEffect.cs class file.
The code for this one looks like

The code is not all that different, we just need to add some extra tweaking…
First, we add a Clear icon on the right side of the EditText control, this can be done with the editText.SetCompoundDrawablesRelativeWithIntrinsicBounds method on the EditText control.
You add a correct resource id to the correct position, we want it to the right hand side, so it needs to be the third parameter.
Secondly we are going to add a touch listener to the EditText control, using the SetOnTouchListener method.
In this touch listener, we verify if the EditText control is being tapped, MotionEventActions.Up, if so we verify what the actual position was where the user has tapped. If this location is anywhere inside the region of the right drawable, we clear the text of the EditText control.
You get the actual position from the touch event through the event arguments, e.RawX and we calculate the position of the drawable and compare these two values: e.RawX >= (editText.Right – editText.GetCompoundDrawables()[2].Bounds.Width())

So that wasn’t that hard, only needed to read up a bit on Android because I’m still a novice on this one.

After adding these 2 effects, only thing left to do is use them in your Xamarin forms pages!
Thing to remember here is that you still have to create a dummy class in the PCL as well… so add a class file called ClearEntryEffect.cs inside the PCL with following code

And when this is all done, you can use it in your xaml as follows

As always everything can be found on my GitHub here…

15 thoughts on “Xamarin forms – Clear entry control effect”

  1. Hey Depechie, thanks a lot for the article!

    I’m just getting started with Xamarin Forms and this helped me get a clear button in iOS in under 10 minutes. Much appreciated!

  2. Hey this is awesome, much appreciated.

    I noticed though, on android, the icon is always visible. Is there a way to only show it when focused && not empty like in ios?

    Thanks again!

  3. Joseph this could be done, but you’ll need to add that logic in the custom renderer on Android.
    Haven’t done this myself yet… could be a nice addition though.

  4. Thanks for the response!

    And I figured as much. I’ll see what I can come up with, and may post back to contribute.

    Thanks again!

  5. Cheers Glenn, nice article!
    This built-in icon seems to do the job:

  6. How about Entry in ViewCell in TablleView? For me it not work. When Entry is out of TableView – it’s ok. But when I move Entry Control inside ViewCell then clear icon is still visible, but when I tapped icon nothing happens.
    Help me please 🙂

  7. Hmm not tried the tableview option myself. It’s actually also suggested to not use that control anymore but try creating same design in ListView because it’s more performant.

  8. Hey Depechie, thanks for the article!
    I followed it and got ClearEntryEffect working on Android. But I have the following issues with the feature on iOS:
    PlatformEffect fails to attach to Page elements in iOS
    cf https://bugzilla.xamarin.com/show_bug.cgi?id=40271

    The issue should have been fixed long time ago.
    I use Xamarin.forms, still have the same problem.

    For iOS, I have to add an EntryRenderer EntryWithClearButonRenderer in iOS project, and a derived Entry control EntryWithClearButon, which is placed in the Renders folder in shared project.

    In this way I got it working. But this just a workaround because PlatformEffect doesn’t call OnAttached in iOS even though I have the ClearEentryEffect in xaml of the page.

    Please let me know if I did an unnecessary thing.


  9. Very helpful article indeed, but how would I add the effect using code behind (NOT XAML)?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.