[SOLVED] Picker with down icon on the right and over the text

Picker with down icon on the right and over the text - Android

I successfully implemented the picker with down icon on the right from this wonderful post in Xamarin Forms project, but when the text in picker is long (than the picker control's width), the text overlaps the down image, which looks very bad.

Basically the down icon drawable image is set as background drawable, so I tried using Control.Foreground in the custom renderer, but I got this error - "Java.Lang.LinkageError: no non-static method".

...
if (Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
              Control.Background = AddPickerStyles(element.Image);
...

Please assist. It would be very helpful, if you point out any solution for text ellipsis also (ie.., dots for long texts in picker like iOS) Thanks in advance

NOTE: This is obviously not a problem in iOS.

Solution

I ended up using a Grid that has a picker and image in each column as given in a xamarin forums discussion. This works fine!

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*"/>
   </Grid.ColumnDefinitions>
   <userControl:BindablePicker Grid.Row="0" Grid.Column="0" ItemsSource="{Binding x, Mode=TwoWay}" SelectedItem="{Binding x}"/>
   <Image Grid.Row="0" Grid.Column="0" Source="arrow.png" HeightRequest="x" WidthRequest="x" InputTransparent="True" HorizontalOptions="End" VerticalOptions="Center"/>
</Grid>

NOTE : I used this above XAML code for my case as I have very little number of dropdowns, also because I didnt have any other way to overcome this problem.