Image centers differently on xaml page and Android drawable

Issue

I have a splash screen drawable and a splash page.

The drawable is set as the MainActivity Theme so it's the first thing you see when opening the app.

The app then navigates to SplashPage where it runs some code in background.

I placed an image in the center of both screens. There's a height difference. I want the two screens to be identical.

splash_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="@color/splash_background"/>
    </item>
    <item
        android:height="400dp"
        android:width="400dp"
        android:gravity="center">
        <bitmap
            android:src="@drawable/circle"
            android:gravity="fill"/>
    </item>
</layer-list>

SplashPage.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"
             x:Class="MyApp.Views.SplashPage"
             BackgroundColor="{Binding BackgroundColor}">
    <ContentPage.Content>
        <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image Source="{Binding SplashImage}" WidthRequest="400" HeightRequest="400" Aspect="AspectFit" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5"/>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Solution

This is because when you use the android:windowBackground property in the theme, its draw height contains the height of the Statusbar and the Navigationbar, whereas in Page.xaml the draw height is set between the two, so there is a difference in height.

The solution:

change

<item name="android:windowBackground">@drawable/splash_screen</item>

to

<item name="android:background">@drawable/splash_screen</item>

Answered By - Leo Zhu - MSFT