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:
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:
And now the funny part. I am using Xamarin Shell and when I open the Flyout menu it looks like this:
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