Customizing Text Entry for 16 character code input (one text box per character)

drwdrw Member ✭✭

Hi all,

I'm somewhat new to xamarin forms. I am required to make the following text input screen:

As can be seen, I would like to achieve a text entry where it's split into separate text entries and one entry can hold one character. The cursor should also re-adjust itself.

I've already managed to achieve a multiple text entry approach using Grid Layout and event handlers that take you from one entry to another - but it seems like that is not the ideal solution. Customizing a singular text entry is preferred.

Any ideas? Thank you very much

Tagged:

Answers

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    The best approach I've found for doing something similar (phone number entry) is to use an Entry and auto-format it to add the dashes in in the TextChanged handler.

  • XamtasticXamtastic Member ✭✭✭

    Something easy, what you could do is have a looping task that watches each value.

    You can clear any extra values in a control that has more than 1 char.
    Set the FOCUS on and ENABLE the next empty instance - this helps to prevent the user from getting creative of messing up

  • drwdrw Member ✭✭

    Xamtastic said:
    Something easy, what you could do is have a looping task that watches each value.

    You can clear any extra values in a control that has more than 1 char.
    Set the FOCUS on and ENABLE the next empty instance - this helps to prevent the user from getting creative of messing up

    But I'd like the whole thing to be a singular Entry, not create multiple text entries. Is this possible?

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    If you feel like coding up the native solutions to this, I found I liked the approach of

    https://github.com/Philio/PinEntryView

    This can pretty reasonably be converted to Xamarin and use a renderer to show it, then you would just need to code up the approach for iOS as well.

  • drwdrw Member ✭✭

    AdamMeaney said:
    If you feel like coding up the native solutions to this, I found I liked the approach of

    This can pretty reasonably be converted to Xamarin and use a renderer to show it, then you would just need to code up the approach for iOS as well.

    Thanks, I found a similar solution that includes iOS too. I'll have a look at this first as it seems like it's more customisable.

  • drwdrw Member ✭✭

    Bump. Maybe someone could suggest an approach I have not tried as of yet.

Sign In or Register to comment.