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:
Happy coding!
29 Comments
I have error Android.Content.Res.Resources+NotFoundException: Resource ID #0x0
It is not finding the image, are you putting your icon in the Resource folder and setting your Build Action: Android Resource https://puu.sh/xcmuU/f284fb053a.png?
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?
That is weird, running the sample working fine in IOS to you?
Yeah it works fine, I guess I’m just missing something on my end then.
Make sure when adding the icons in your iOS project have the Build Action as Bundle Resource https://puu.sh/xis4H/5ae3402244.png
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.
mmm, did you add [assembly: ExportRenderer(typeof(ImageEntry), typeof(ImageEntryRenderer))] to your renderer ?
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.
Yes! You can add a touch event to the Image (In Each renderer)
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.
You can add the touch event directly in each platform.
In the case of Android, https://docs.microsoft.com/en-us/xamarin/android/app-fundamentals/touch/android-touch-walkthrough if you want to have the event added in Xamarin forms, you can create a Command in your control, binding to that command and execute it each time the event created on Android is called.
(Same with UWP).
Android custom renderers in Xamarin.Forms 2.5 have compiler warnings because the parameterless constructors have been marked obsolete
Hi, Just updated the sample and the article https://xamgirl.com/image-entry-in-xamarin-forms/?preview_id=611&preview_nonce=1364b56a60&_thumbnail_id=614&preview=true
Thanks :).
Hello,
IS it possible to create two seperate CustomRenderer class with Entry Renderer in same project. i am facing problem to do this
Yes It is, what issue are you getting?
Thanks for the tutorial, It really helps me a lot .
I have made the build action to Android Resource as well
Is the sample working for you?
Will it work on Xamarin Forms 2.5? Because i don’t have option to use Xamarin Forms 3.0 which requires VS 2017
Sample App is working
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?
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?
Thanks for this tutorial!
I can solved my problem.
Have a good day:)
thanks for the tutorial. its really helpful.
Muchisimas gracias por el tutorial funciona perfectamente y pude comprender mas el funcionamiento de cusom entry, gracias por el valioso contenido.
Thanks for the tutorial, It really helps us a lot .
help me!
Xamarin.Forms.Xaml.XamlParseException: Position 11:25. StaticResource not found for key primary
it looks is an issue in your xaml