Image Entry in Xamarin Forms

Sometimes we have a design in which one we need an entry with an icon inside, in this article I will show you how to achieve that in Xamarin Forms by using a custom renderer per platform.

Let’s code

1- Create the control 

As you can see here, I created five main properties:

  • Image: Property to set the source of the image
  • ImageAligment: This is an Enum, and you can set if you want the image on the left or right (By default is Left).
  • ImageWight: To set the weight of the image. (By default is 40).
  • ImageHeight: To set the height of the image. (By default is 40).
  • LineColor: To set the color of the entry line. (By default is White).

2-Create the renderers

iOS:  

Android:

3-Use the control

That’s all for now, you can see the full source code used here:

https://github.com/CrossGeeks/Xamarin.Forms.UI/blob/master/UISampleApp/Views/Logins/LoginDaniaPage.xaml

Happy coding!

You may also like

29 Comments

  1. Thanks for the tutorial! I’m not able to get the images to show on iOS though. I’m not really sure why either, any ideas?

          1. I have them set as BundleResource :/ I went through and I can’t find the issues still. It just shoes as an Entry with a background and different text color, no image or underline.

          2. mmm, did you add [assembly: ExportRenderer(typeof(ImageEntry), typeof(ImageEntryRenderer))] to your renderer ?

  2. Hey I used your custom renderer. It was really helpful.

    Is there a way to extend the touch area of the control to cover the image as well? I sort of have a calendar icon and I want to trigger the datepicker when I click on the icon.

      1. Can you pls help me to add touch event on android & uwp.
        I’ve implemented touch event on image but if I want to edit the text then i’m unable to do.

  3. Android custom renderers in Xamarin.Forms 2.5 have compiler warnings because the parameterless constructors have been marked obsolete

  4. Hello,
    IS it possible to create two seperate CustomRenderer class with Entry Renderer in same project. i am facing problem to do this

      1. Will it work on Xamarin Forms 2.5? Because i don’t have option to use Xamarin Forms 3.0 which requires VS 2017

        1. it should work on Xamarin 2.5, I think the issue is with the icons you are using, can you try to use the same icons in the sample project?

  5. It’s a great custom component but I got a issue. When you put it on landscape, the ImageEntry is not resizing and stay small. Can you help me?

  6. Muchisimas gracias por el tutorial funciona perfectamente y pude comprender mas el funcionamiento de cusom entry, gracias por el valioso contenido.