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



3-Use the control

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

Happy coding!

You may also like


  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 ?