Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

xamarin Forms: Move the view Upward according to keyboard height

I am using xamarin forms. I have designed a login form page in xaml. I want to shift the login form view upward when the keyboard appears, so that both the text field and login button is visible in case of both the platform Android and IOS. How to calculate the keyboard height and shift the Login form view upward by dynamically calculating the keyboard height.

enter image description here

Below is my xaml code :

<ContentPage>
    <ScrollView>
        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid Padding="20, 30, 20, 20" RowSpacing="20" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Image Grid.Row="0" Source="login.png" HorizontalOptions="Center" VerticalOptions="Center"/>

                <Entry Grid.Row="2" x:Name="entryUserName" HorizontalOptions="Fill"  Placeholder="Username" PlaceholderColor="#707070" Text="{Binding UserName,Mode=TwoWay}" Margin="5"/>

                <BoxView Grid.Row="2" HeightRequest="1" HorizontalOptions="Fill" BackgroundColor="#707070" VerticalOptions="End"/>

                <Entry Grid.Row="3" x:Name="entryPassword" Text="{Binding Password,Mode=TwoWay}" Placeholder="Password" PlaceholderColor="#707070" Margin="5" HorizontalOptions="Fill" IsPassword="True"/>

                <BoxView Grid.Row="3" HeightRequest="1" HorizontalOptions="Fill" BackgroundColor="#707070" VerticalOptions="End"/>

                <Button Grid.Row="5" HorizontalOptions="Center" VerticalOptions="Center" Text="Login" Command="{Binding doLoginCommand}" CommandParameter="entryUserName,entryPassword" />

            </Grid>         
        </AbsoluteLayout>
    </ScrollView>
</ContentPage>

I don't want to perform any kind of custom rendering of the page. Is there any resource through which I can write the dependency service to calculate the keyboard height of different mobile view cross platform. I gone through this but it has some kind of custom rendering which I don't want.

like image 371
Himanshu Dwivedi Avatar asked Sep 22 '16 14:09

Himanshu Dwivedi


1 Answers

Option 1:

Android: Add this to your manifest:

<activity //Your MainActivity
        android:windowSoftInputMode="stateVisible|adjustResize" ... >
        ...
</activity>

Ios: Add this nuget package: https://www.nuget.org/packages/Xam.Plugins.Forms.KeyboardOverlap/

and init it:

Xamarin.Forms.Init();//platform specific init
KeyboardOverlapRenderer.Init ();

Option 2:

Add this code to your Page class:

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

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

        void InputUnfocused(object sender, EventArgs args){
            Content.LayoutTo(new Rectangle(0,0, Content.Bounds.Width, Content.Bounds.Height));
        }
like image 148
Artem Zelinskiy Avatar answered Oct 22 '22 10:10

Artem Zelinskiy