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.
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.
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));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With