CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.androidpicker
Shubham Tyagi
Shubham Tyagi

Reputation: 838

Xamarin.Forms Picker long text overflow

In Xamarin.Forms Picker if there's a item with very large text it is overflowing in Android. iOS is able to truncate at the end but Android is not able to.

<Picker x:Name="picker" Title="Select a monkey" TitleColor="Red">
    <Picker.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Baboon</x:String>
            <x:String>Capuchin Capuchin Capuchin Capuchin Capuchin</x:String>
            <x:String>Blue Monkey</x:String>
            <x:String>Squirrel Monkey</x:String>
            <x:String>Golden Lion Tamarin</x:String>
            <x:String>Howler Monkey</x:String>
            <x:String>Japanese Macaque</x:String>
        </x:Array>
    </Picker.ItemsSource>
</Picker>

Overflow Image

See Image for reference.

I Guess if there's even a way to left align the items instead of center align, that would still be enough. But if there's a way to add ellipsis , that'll be the best. I've looked through the custom renderer and was not able to find anything useful.

Upvotes: 2

Views: 517

Answers (3)

Jai Gupta
Jai Gupta

Reputation: 1404

Create CustomPickerRenderer and inherits with Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer. I didn't try this but this should create new picker dialogue without upgrading xamarin forms version.

public class CustomPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
{
    public CustomPickerRenderer(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
    }
}

Upvotes: 2

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4521

I tested the code and I found that the long text will not overflow on my side. I tested on the different devices by using different Android versions.

Here is the view of the code on my side:

enter image description here

Upvotes: 0

pr96
pr96

Reputation: 1211

As an alternative solution as well that you can change the alignment of the Picker Item(Default is Center), which can make it left.

Customizing the Text and Style in, Custom Rendering in Android & IOS look at the example here.

Also, I found a bug related to the mentioned problem, which could not find any answer. I hope the above solution will workaround.

Upvotes: 1

Related Questions