Xamarin.Forms App under Status bar (Display Cutouts)

773 Views Asked by At

I am creating an app where there will be GoogleMaps on Main page through Xamarin.Forms. I want app to look like Google Map app:
Google maps under status bar

So something like display under the status bar. On iPhone X it was easy. But for Android,it doesn't work.
My app looks like this now:
How my app looks now

And now the funny part. I am using Xamarin Shell and when I open the Flyout menu it looks like this:
Flyout is showing under status bar

So my flyout menu is showing under the status bar but the map is not. I am thinking if this is a problem with map nuget? I am using this GoogleMaps nuget for displaying maps: amay077/Xamarin.Forms.GoogleMaps

Or maybe it is a problem with my xaml structure.

Simplified xaml code:

<ContentPage>
    <!-- Absolute layout for positioning Map under Grid with buttons -->
    <AbsoluteLayout
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        >
        <!-- Grid with buttons -->
        <Grid
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All">
            <Grid.RowDefinitions>
                <RowDefinition Height="{Binding TopInset}" /> <!--This works for iPhone X in viewmodel i am getting some padding like "safe area" -->
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="10" />
            </Grid.ColumnDefinitions>

            <!-- Map control -->
            <maps:Map
                Grid.RowSpan="7"
                Grid.ColumnSpan="5"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1">
            </maps:Map>

            <!-- Example of button in grid -->
            <Button
                Text="TEST"
                TextColor="#fff"
                FontSize="20"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                BackgroundColor="#78c004"
                Grid.Row="1"
                Grid.Column="2"
                InputTransparent="False"
                Visual="Material"
            />
        </Grid>
    </AbsoluteLayout>
</ContentPage>   

Many thanks and Happy Coding

0

There are 0 best solutions below