Xamarin Forms Android Keyboard moves whole Page upwards

Question

I was trying to write a Xamarin.Forms chat-app. The problem is: On Android, as soon as the keyboard shows up the whole page (including the ActionBar) moves upwards. I could fix the problem on IOS by using a NuGet package that resizes the page.

I already tried to set WindowSoftInputMode = Android.Views.SoftInput.AdjustResize in the MainActivity.cs in the Android project but it didn't work. I also tried to resize the page manually by recalculating the screen size, but I haven't found a solution to get the keyboard size for an exact calculation on different devices.

Has anyone had the same problem before? Is there an official Xamarin.Forms solution for all supported platforms?

This is my chat layout so far:

<ContentPage.Content>
<StackLayout Padding="0">
  <ScrollView>
    <ListView HasUnevenRows="true" x:Name="lvChat" >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">


              <Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14"  />
              <Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
              <Label Text="{Binding Time}" TextColor="Black" FontSize="14"  />
              <!-- Format for time.. , StringFormat='{0:HH:mm}' -->

            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ScrollView>


  <StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
    <Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
    <Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>

  </StackLayout>
</StackLayout>

Thanks in advance!

Fabien Mwamba Fabien Mwamba · Accepted Answer · 2017-10-10T07:59:16

Hi try putting the stacklayout that contains your input and send button inside the scrollview, that way when you tap on the input it pushes the keyboard up shows you your input and the rest of your chat works fine on both iOS and Android. Try this:

 <ContentPage.Content>
       <StackLayout Padding="0">
          <ScrollView>

           <StackLayout>

             <ListView HasUnevenRows="true" x:Name="lvChat" >
                <ListView.ItemTemplate>
                   <DataTemplate>
                      <ViewCell>
                        <StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">


                        <Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14"  />
                        <Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
                        <Label Text="{Binding Time}" TextColor="Black" FontSize="14"  />
                  <!-- Format for time.. , StringFormat='{0:HH:mm}' -->

                </StackLayout>
              </ViewCell>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>

        <StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
        <Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
        <Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
       </StackLayout>

      </StackLayout>

      </ScrollView>
    </StackLayout>
    </ContentPage.Content>

Xamarin Forms Android Keyboard moves whole Page upwards

2 Answers