keyboard Overlap On login screen -Xamarin .forms

Question

I have a xamarin forms app with a login screen.The problem I am facing is keyboard overlap when user enter details.The Username and password entering field is inside frame.

What I am getting

What I want

My Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"          
             BackgroundColor="#173F5F"           
             x:Class="app.Login">
    <ScrollView>
        <RelativeLayout>
            <Image Source="backgrnd.png" Aspect="Fill"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint=     "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"  RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                <StackLayout Orientation="Vertical"  VerticalOptions="StartAndExpand" Margin="15,30,15,0">
                    <Image Source="logo.png" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="150" WidthRequest="150"></Image>
                    <Image Source="backlogo.png" HorizontalOptions="Center" VerticalOptions="Center" ></Image>
                </StackLayout>
                <StackLayout VerticalOptions="End"  Margin="15,0,15,50"  >
                    <Frame  BackgroundColor="Snow" OutlineColor="Snow" HasShadow="True"  HorizontalOptions="FillAndExpand"  Padding="10,10,10,10" 
                            CornerRadius="5"                             
                                Margin="15,10,15,0">
                        <StackLayout VerticalOptions="End" >
                            <StackLayout Orientation="Horizontal">
                                <Image Source="userlogo.png" HorizontalOptions="Start" HeightRequest="30" WidthRequest="30"></Image>
                                <Entry TextColor="Black" 
                        x:Name="userName"
                        PlaceholderColor="Gray" 
                        ReturnType="Next"
                        BackgroundColor="Snow"                        
                        Placeholder="User ID" 
                        VerticalOptions="Center"
                        HorizontalOptions="FillAndExpand"/>
                            </StackLayout>
                            <StackLayout Orientation="Horizontal">
                                <Image Source="locklogo.png" HorizontalOptions="Start" HeightRequest="30" WidthRequest="30"></Image>
                                <Entry TextColor="Black" 
                         PlaceholderColor="Gray"                              
                        x:Name="password"                      
                        BackgroundColor="Snow"
                        VerticalOptions="Center"
                        Placeholder="Password"
                        IsPassword="true"
                        HorizontalOptions="FillAndExpand"/>                                
                            </StackLayout>                            
                            <Grid>
                                <Button x:Name="LoginButton" BackgroundColor="#4080a6" TextColor="White" Text="Sign In" Clicked="Login_Clicked"  BorderRadius="7" BorderColor="#4080a6" BorderWidth = "2" HorizontalOptions="FillAndExpand" />                               
                            </Grid>
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </StackLayout>
        </RelativeLayout>
    </ScrollView>
</ContentPage>

I tried Xam.Plugins.Forms.KeyboardOverlap but it doesnt solved my problem.Any help is appreciated.

Answer 1

Take a look at the answer here I tried option 2 on Android and it works fine.

For your case, try to add this Code to your page class

  protected override void OnAppearing()
    {
        base.OnAppearing();
        userName.Focused += InputFocused;
        password.Focused += InputFocused;
        userName.Unfocused += InputUnfocused;
        password.Unfocused += InputUnfocused;
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        userName.Focused -= InputFocused;
        password.Focused -= InputFocused;
        userName.Unfocused -= InputUnfocused;
        password.Unfocused -= InputUnfocused;
    }
    void InputFocused(object sender, EventArgs args)
    {
        Content.LayoutTo(new Rectangle(0, -270, Content.Bounds.Width, Content.Bounds.Height));
    }

    void InputUnfocused(object sender, EventArgs args)
    {
        Content.LayoutTo(new Rectangle(0, 0, Content.Bounds.Width, Content.Bounds.Height));
    }

Update

this code should be working on both Android and IOS