how to implement "Soft Keyboard Input Mode" and fix keyboard overlap issue in Xamarin.Forms iOS?

Question

I am facing trouble to implement "Soft Keyboard Input Mode" and fix keyboard overlap issue in Xamarin.Forms iOS app.

The following solutions that I have tried:

• Scroll View: Which is not work for me because I am already using one scroll view in my content page so nested scroll view will not work as defined in following article https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scroll-view.

• Xamarin.IQKeyboardManager: Which is solve the overlap issue but hides the top content by taking it up which I am not be able to scroll down.

I have also tried following articles

• https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms/
• https://github.com/adamped/SoftInput/blob/master/SoftInput/SoftInput.iOS/Render/KeyboardRender.cs

Also facing another issue without "Soft Keyboard Input Mode" getting blank white space sometime top and bottom while focusing to Entry control that trigger keyboard up and down on multiple clicks.

The following page layout designs I am using in my two pages (Facing issue in 2 pages which has I am already using scroll view)

Page 1:

`<ContentPage.Content>
            <StackLayout >
                <ScrollView Margin="10,10,10,0">
                    <StackLayout x:Name="pageContentLayout">
                    </StackLayout>
                </ScrollView>
                <AbsoluteLayout HorizontalOptions="FillAndExpand" 
                                VerticalOptions="FillAndExpand">
                    <StackLayout x:Name="mainEntryLayout" 
                                 AbsoluteLayout.LayoutFlags="All" 
                                 AbsoluteLayout.LayoutBounds="0,0,1,1">
                        <ActivityIndicator x:Name="entryIndicator" 
                                   IsVisible="False" 
                                   IsRunning="False">
                        </ActivityIndicator>
                        <Grid VerticalOptions="EndAndExpand" 
                          HorizontalOptions="EndAndExpand"
                          x:Name="entryGrid" 
                          BackgroundColor ="{StaticResource Color}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="85*"/>
                                <ColumnDefinition Width="15*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60"/>
                            </Grid.RowDefinitions>
                            <custom:CustomEntry CornerRadius="4"  
                                                IsCurvedCornersEnabled="True"  
                                                BorderColor="{StaticResource Color}"                     
                                                PlaceholderColor="{StaticResource Color}"                     
                                                TextColor="{StaticResource Color}"   
                                                VerticalOptions="FillAndExpand" 
                                                HeightRequest="100"
                                                HorizontalOptions="FillAndExpand" 
                                                Grid.Column="0" 
                                                FontSize="12"                   
                                                BackgroundColor ="{StaticResource Color}"
                                                x:Name="commentCustomEntry"
                                                Keyboard="Chat"                 
                                                Margin="10"/>
                            <ImageButton VerticalOptions="CenterAndExpand" 
                                         HorizontalOptions="CenterAndExpand"                                                     
                                         Grid.Column="1"
                                         HeightRequest="30" 
                                         WidthRequest="30" 
                                         x:Name="SendBtn"
                                         BackgroundColor="Transparent"/>
                        </Grid>
                    </StackLayout>
                    <StackLayout x:Name="pageIndicatorLayout" 
                                 IsVisible="false"                              
                                 AbsoluteLayout.LayoutFlags="PositionProportional"
                                 AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
                        <Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
                        <ActivityIndicator IsRunning="true" 
                                           Color ="{DynamicResource Color}"/>
                    </StackLayout>
                </AbsoluteLayout>
            </StackLayout>
        </ContentPage.Content>
    `


Page 2:



`
    <StackLayout>
            <AbsoluteLayout HorizontalOptions="FillAndExpand" 
                                VerticalOptions="FillAndExpand">
                <StackLayout x:Name="pageContentLayout" 
                                 AbsoluteLayout.LayoutFlags="All" 
                                 AbsoluteLayout.LayoutBounds="0,0,1,1">
                    <StackLayout x:Name="ImgLayout" ></StackLayout>
                    <ScrollView>
                        <StackLayout>
                            <StackLayout Orientation="Vertical"  
                                         HorizontalOptions="FillAndExpand">
                                <Label Text="{Binding titleLable}" 
                                       FontAttributes="Bold" 
                                       TextColor="{StaticResource Color}" 
                                       Margin="10, 0, 0, 0" 
                                       FontSize="14"/>
                                <Label x:Name="resourceLabel"
                                       TextColor="{StaticResource Color}" 
                                       FontSize="11" 
                                       Margin="10, 0, 0, 0" />
                                <Label Text="{Binding sourceLabel}" 
                                       TextColor="{StaticResource Color}" 
                                       FontSize="11" 
                                       FontAttributes="Bold" 
                                       Margin="10, 0, 0, 0" />
                                <Label x:Name="personLabel"
                                       TextColor="{StaticResource Color}" 
                                       FontSize="11" 
                                       Margin="10, 0, 0, 0" />
                                <Label FontAttributes="Bold, Italic"    
                                   FontSize="12" 
                                   Padding="10,10,10,0"
                                   Text="{Binding hightlightLabel}"/>
                            </StackLayout>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <local:ExtendedWebViewModel x:Name="webContentView"
                                                        Grid.Row="0"
                                                        HorizontalOptions="FillAndExpand"
                                                        VerticalOptions="FillAndExpand"/>
                            </Grid>
                        </StackLayout>
                    </ScrollView>
                    <Grid Padding="10,0,10,0" RowSpacing="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60*"/>
                            <ColumnDefinition Width="40*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>                    
                        <StackLayout Grid.Column="1"
                                     Grid.Row="0"
                                     Grid.RowSpan="2"
                                     Orientation="Horizontal" 
                                     HorizontalOptions="EndAndExpand"
                                     VerticalOptions="CenterAndExpand">
                            <Image Source="{Binding lImg, Converter={StaticResource Converter}}"
                                                   HeightRequest="20" 
                                                   WidthRequest="20">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnLImgTapped" 
                                                                          CommandParameter="{Binding item}"/>
                                </Image.GestureRecognizers>
                            </Image>
                            <Label x:Name="tCount" 
                                                   VerticalOptions="CenterAndExpand"
                                                   Text="{Binding tCount}" 
                                                   FontSize="12">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OntCountTapped" 
                                                                          CommandParameter="{Binding item}"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Image Source="{Binding cImg, Converter={StaticResource Converter}}"
                                                   HeightRequest="20" 
                                                   WidthRequest="20">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnCImgTapped" 
                                                                          CommandParameter="{Binding item}"/>
                                </Image.GestureRecognizers>
                            </Image>
                            <Label Text="{Binding cCount}"
                                                   VerticalOptions="CenterAndExpand"
                                                   FontSize="12">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnCCountTapped" 
                                                                          CommandParameter="{Binding item}"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Image Source="{Binding SImg, Converter={StaticResource Converter}}"
                                                   HeightRequest="20" 
                                                   WidthRequest="20">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnSImgTapped" 
                                                                          CommandParameter="{Binding item}"/>
                                </Image.GestureRecognizers>
                            </Image>
                        </StackLayout>
                    </Grid>
                    <Grid VerticalOptions="EndAndExpand" 
                          HorizontalOptions="EndAndExpand"
                          x:Name="entryGrid" 
                          BackgroundColor ="{StaticResource Color}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="85*"/>
                            <ColumnDefinition Width="15*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <custom:CustomEntry CornerRadius="4"  
                                                IsCurvedCornersEnabled="True"  
                                                BorderColor="{StaticResource Color}"                     
                                                PlaceholderColor="{StaticResource Color}"
                                                TextColor="{StaticResource CommentEntryValueColor}"   
                                                VerticalOptions="FillAndExpand" 
                                                HeightRequest="100"
                                                HorizontalOptions="FillAndExpand" 
                                                Grid.Column="0"                        
                                                FontSize="12"                   
                                                BackgroundColor ="Color"
                                                x:Name="commentCustomEntry"
                                                Keyboard="Chat"                 
                                                Margin="10"/>
                        <ImageButton VerticalOptions="CenterAndExpand" 
                                         HorizontalOptions="CenterAndExpand"Grid.Column="1"
                                         HeightRequest="30" 
                                         WidthRequest="30" 
                                     Clicked="OnSendButtonClicked"
                                         x:Name="SendBtn"
                                         BackgroundColor="Transparent"/>
                    </Grid>
                </StackLayout>
                <StackLayout x:Name="pageIndicatorLayout" 
                                 IsVisible="false" 
                                 Padding="12"
                                 AbsoluteLayout.LayoutFlags="PositionProportional"
                                 AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
                    <Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
                    <ActivityIndicator IsRunning="true" 
                                           Color ="{DynamicResource Color}"/>
                </StackLayout>
            </AbsoluteLayout>
        </StackLayout>
`

Could you please suggest the better solution?

Thanks

Answer 1

If you are targeting ios only, Remove the scrollview and try this plugin. https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap

After installing this nuget , Add these line in your Appdelegate class after Xamarin.Forms.Init().

KeyboardOverlapRenderer.Init ();

No need for you to do anything other then initialize the plugin. The keyboard will no longer overlap your Controls!!!