Using an SfTextInputLayout with a Label is Buggy on Android but not iOS

[Bryson Scales]

My app is using SfTextInputLayouts wherever I require input from the user and SfPopupLayouts to display animated dailog inputs. For my application to look and feel as professional as possible, making use of SfTextInputLayouts is an all or nothing approach. Meaning I can either use SfTextInputLayouts every time I require the user to input something that can simplify to a string, or I don't use it at all.

I am currently using the SfPopupLayouts and SfDatePicker to get my users birthday. An SfTextInputLayout does support SfDatePickers ootb but it doesn't have a clean animation when the dialog openes. In order to add a clean animation, I have put a grid in the SfTextInputLayout that has a SfPopupLayout to show the SfDatePicker and a Label to display to the users input. Next, I added a tap gesture recognizer to the Label that will open the SfDatePicker when it is tapped.

On iOS everything works perfectly! The SfTextInputLayout container is formatted correctly, the tap event works, and the SfPopupLayout correctly animates the SfDatePicker onto the screen. On Android, functions as expected however, the SfTextInputLayout container is horribly formatted.

Here is my Code:

<i:SfTextInputLayout Hint="Birthday">
    <Grid>
        <pop:SfPopupLayout IsOpen="{Binding IsBirthdayPickerOpen}" StaysOpen="True">
            <pop:SfPopupLayout.PopupView>
                <pop:PopupView ShowCloseButton="False" ShowHeader="False" ShowFooter="False"
                                AnimationMode="Zoom">
                    <pop:PopupView.ContentTemplate>
                        <DataTemplate>
                            <dtp:SfDatePicker OkButtonClicked="SetBirthday_Clicked"
                                                CancelButtonClicked="CloseBirthday_Clicked"
                                                Date="{Binding BirthDate.Value}"
                                                MaximumDate="{Static sys:DateTime.Today}"/>
                        </DataTemplate>
                    </pop:PopupView.ContentTemplate>
                </pop:PopupView>
            </pop:SfPopupLayout.PopupView>
        </pop:SfPopupLayout>
        <Label Text="{Binding BirthDateDisplay.Value}"
                Style="{StaticResource LabelDisplay}">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding OpenBirthdayPickerCommand}"/>
            </Label.GestureRecognizers>
        </Label>
    </Grid>
</i:SfTextInputLayout>

[Bryson Scales]

I forgot to change the Style "LabelDisplay" to show its associated values. The style only has 1 attribute that is Padding="0,5,0,0" so that it can be reused throught my app.

[Vijayakumar Viswanathan]

Hi Bryson,

Thanks for contacting Syncfusion support.

SfTextInputLayout only supports certain types of input views. We have already provided information about the list of input views that are compatible with SfTextInputLayout in our user guide document. Please refer to the link below and use the suggested input Views in SfTextInputLayout.

SupportInputViews: https://help.syncfusion.com/xamarin/text-input-layout/supported-input-views#date-picker

Please let us know if you have any further queries.

Regards,

Vijayakumar V