UI, Xamarin, XamarinForms

Picker with right side icon in Xamarin Forms

31 Comments

Using a Picker in Xamarin Forms is really simple you just need to add the control to a page, set items and that’s it. But what happens when we have a design in which we have an icon on the right side of our picker (To add some styling to it)? a solution could be to add an Image next to our Picker and remove the border of the picker with a custom renderer, but that might not be the best way to do it.

In this article, I’m going to show you how to add an icon to the right side of a picker. To do so we are going to create a custom renderer for each platform and a custom picker control with an “Image” bindable property in which we will set our desired image.

Let’s do it step by step

1-Let’s start with the control

First, we are going to create a new class called CustomPicker and add a new Bindable Property called Image which will be the icon shown on the right side of our picker.

2-Let’s create a Picker Custom Renderer 

iOS

On iOS custom renderer, the native picker has a property called RightView in which you can set a view. In our case, we’ll create an ImageView and set it to the RightView.

Android

On Android, we are going to add a new background to our picker that will have a border and our right side icon, we can load a specific drawable file with the border and icon or create the drawable by code. In our case, we are going to create it by code because that way we can load the drawable for the icon dynamically. For that, we’ll create a LayerDrawable to combine a drawable that will be our border with the drawable image of our right side icon.

3-Use the control  

PDT: In case you want to add the right side icon to all your pickers, then use Xamarin Forms default picker and in the custom renderer use [assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]

 

You can check the full source code here:

https://github.com/CrossGeeks/PickerWithIcon

Happy coding! 🙂

 

You may also like

31 Comments

  3. Hi XamGirl. Thank you for this helpful post. I have tested this and in iOS it works perfect, but on Android there is some bugs.

    First:
    To get the drawable I use

    var drawable = Resources.GetDrawable(imagePath);

    It’s easier, faster and more reliable.

    Second:

    If the selected item text is longer the text overlaps the down arrow icon and it’s really not cool. So I will think about a workaround for the Android version and will share it (if I get a working solution).

    Thanks again!

    1. Thank you! Please send me a pull to request once you have it ready, if not let me know to find a solution together.
      Regards.

  8. Cool tutorial, thanks.
    I am having issue with android. When I click on the control, my application breaks, with the message : Android.Views.WindowManagerBadTokenException: Unable to add window.
    Any help please

    1. What version of android are you using? Also, are you having that issue with this sample or a new project you created?

  10. Android.Content.Res.Resources+NotFoundException: Resource ID #0x0
    this exception thrown to me also i want icon in the left what i should change ?

  11. Great article. One problem with the Android side is that you’re setting the image to a hard-coded size, which doesn’t look good on all devices sizes. A better approach is to made a down arrow icon for each of the sizes and use its size. To do that, use:

    var result = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, bitmap.Width, bitmap.Height, true));

    1. Hi Mike! Thanks, will update the code with your feedback. Or better send me a request, so you stay as collaborate in the project 🙂

  12. Hola buen día muy buenos aportes. Tengo un error al usar el control no se a que se deba.
    Unhandled Exception:

    System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.

  13. excelent post, it’s work on all platforms, UWP no need template, it has its own arrow icon

  15. i am getting
    Error CS1061: ‘Picker’ does not contain a definition for ‘Image’ and no extension method ‘Image’ accepting a first argument of type ‘Picker’ could be found

  16. Hi Charlin
    Do you have solution with search bar in the picker.
    Its very handy for a long list.
    Please let me know
    Regards
    Bandu

  17. Hi Charlin
    Thank you for the quick response. Yes that what I was looking for.
    That link is so useful if I can get it done with a minimum effort.

    I have a another question for you, If you don’t mind.
    I have an activityIndicator. Its running good while loading the data to a list. But it hangs at the end of it , may be at the time of data loading from the RESTful api. Have you come across situation like that.
    Please let me know.
    Appreciate it.
    Regards
    Bandu