How can we create custom entry to fill the OTP automatically. like this in xamarin form cross paltfrom

Question

the entry box accepts only 1 character .ui design should be like this

Answer 1

I wrote a simple example to achieve what you want with Xamarin.forms:

In Xaml:

<StackLayout Padding="0,100,0,0">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>


            <StackLayout Grid.Column="0">

                <Label x:Name="label1" Text="" TextColor="Black" HorizontalTextAlignment="Center" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="1">

                <Label x:Name="label2" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="1" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="2">

                <Label x:Name="label3" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="2" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="3">

                <Label x:Name="label4" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="3" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

        </Grid>

        <Editor TextChanged="Editor_TextChanged" Keyboard="Numeric" TextColor="Transparent" BackgroundColor="Transparent"  HorizontalOptions="FillAndExpand" Grid.Row="0"/>

    </Grid>

</StackLayout>

And in code behiend:

public partial class MainPage : ContentPage
{

    List<Label> labels;
    public MainPage()
    {
        InitializeComponent();

        labels = new List<Label>();
        labels.Add(label1);
        labels.Add(label2);
        labels.Add(label3);
        labels.Add(label4);
    }

    private void Editor_TextChanged(object sender, TextChangedEventArgs e)
    {
        var oldText = e.OldTextValue;
        var newText = e.NewTextValue;

        Editor editor = sender as Editor;


        string editorStr = editor.Text;
        //if string.length lager than max length
        if (editorStr.Length > 4)
        {
            editor.Text = editorStr.Substring(0,4);
        }

        //dismiss keyboard
        if (editorStr.Length >= 4)
        {
            editor.Unfocus();
        }

        for (int i = 0; i < labels.Count; i++)
        {
            Label lb = labels[i];

            if (i < editorStr.Length)
            {
                lb.Text = editorStr.Substring(i, 1);
            }
            else {
                lb.Text = "";
            }
        }
    }
}

Also, I created custom renderer both in iOS and Android to hide the cursor. For more detail, you can check my sample project here. Feel free to ask me any question!