Adding Google Map to MasterDetailPage causes rendering issues

FulvioFulvio AUMember ✭✭
edited November 2015 in Xamarin.Forms

I have the following MainActivity.cs class:

Xamarin.Forms.Forms.Init(this, bundle); Xamarin.FormsMaps.Init(this, bundle); FormsAppCompatActivity.ToolbarResource = Resource.Layout.toolbar; FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs; ViewerApplication a = new ViewerApplication(); App = a;

ViewerApplication.cs class:

public class ViewerApplication : Application, IMapApplication, IJobApplication { // The root page of your application this.MainPage = new MapManagerPage(); }


<?xml version="1.0" encoding="UTF-8"?> <MasterDetailPage xmlns="" xmlns:x="" xmlns:app="clr-namespace:Synchronoss.Platform.Gui.Forms.Views;assembly=Synchronoss.Platform.Gui.Forms" x:Class="ROAMviewer.Views.MapManagerPage"> <MasterDetailPage.Resources> <ResourceDictionary> <FileImageSource x:Key="EntitiesIcon" File="searchtoolbar.png" /> <FileImageSource x:Key="FieldJobsIcon" File="browserwindowstoolbar.png" /> <FileImageSource x:Key="PlacesIcon" File="maptoolbar.png" /> <FileImageSource x:Key="LayersIcon" File="layers2toolbar.png" /> </ResourceDictionary> </MasterDetailPage.Resources> <MasterDetailPage.Master> <TabbedPage x:Name="Tabs" Title="Detail"> <TabbedPage.Children> <NavigationPage Title="Features" Icon="{StaticResource EntitiesIcon}"> <x:Arguments> <app:EntityPage x:Name="EntityPage" Title="Search" Icon="{StaticResource EntitiesIcon}" /> </x:Arguments> </NavigationPage> <NavigationPage Title="Field Jobs" Icon="{StaticResource FieldJobsIcon}"> <x:Arguments> <app:FieldJobsPage x:Name="FieldJobsPage" Title="Field Jobs" Icon="{StaticResource FieldJobsIcon}" /> </x:Arguments> </NavigationPage> <NavigationPage Title="Places" Icon="{StaticResource PlacesIcon}"> <x:Arguments> <app:PlacesPage x:Name="PlacesPage" Title="Places" Icon="{StaticResource PlacesIcon}" /> </x:Arguments> </NavigationPage> <NavigationPage Title="Layers" Icon="{StaticResource LayersIcon}"> <x:Arguments> <app:LayerPage x:Name="LayerPage" Title="Layers" Icon="{StaticResource LayersIcon}" /> </x:Arguments> </NavigationPage> </TabbedPage.Children> </TabbedPage> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage Title="Map"> <x:Arguments> <app:MapPage Title="Map" /> </x:Arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage>

MapPage.xaml (which is the MasterDetailPage.Detail):

<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="" xmlns:x="" x:Class="Platform.Gui.Forms.Views.MapPage"> <ContentPage.Resources> <ResourceDictionary> <FileImageSource x:Key="SettingsIcon" File="geartoolbar.png"/> <FileImageSource x:Key="LocateIcon" File="locationtoolbar.png"/> <FileImageSource x:Key="HelpButton" File="questiontoolbar.png"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.ToolbarItems> <ToolbarItem x:Name="SettingsButton" Icon="{StaticResource SettingsIcon}" Order="Default"/> <ToolbarItem x:Name="LocateButton" Icon="{StaticResource LocateIcon}" Order="Default"/> <ToolbarItem x:Name="HelpButton" Icon="{StaticResource HelpButton}" Order="Default"/> </ContentPage.ToolbarItems> </ContentPage>

MapPage.xaml.cs class (this is how I'm rendering the map):

DroidMap map = new DroidMap(MapSpan.FromCenterAndRadius(new Position(-37.814107, 144.814107), Distance.FromMiles(0.3))) { IsShowingUser = true, HeightRequest = 100, WidthRequest = 960, VerticalOptions = LayoutOptions.FillAndExpand }; Content = _droidMap;

This is what happens if I don't load the Google Map (all the controls and the ListView work properly - see image below this one):


ListView controls work properly without the map loaded:


And then this is what happens when I do load the map (notice the search bar appearing over the map? That's not the only problem):


When the map is loaded none of the ListView controls work at all in Master, it also throws exceptions when I move around in that section. See the video below:

Notice in the video that I can't scroll the map below that strangely rendered search control (almost as if there's a transparent area below that doesn't allow clicks).

Any help would be appreciated as to how to fix this issue. I've tried setting the DroidMap to a StackLayout rather than Content and it has the same issue as well as playing around with Horizontal and Vertical options.

To add to this there's a problem where the ContentPage.ToolbarItems don't appear in Landscape in the MapPage.xaml. They appear fine when in Portrait though as you can see here (this is regardless of whether the map has been loaded or not):

These ContentPage.ToolbarItems don't appear in Landscape but appear fine in Portrait:


NOTE: These rendering issues occur on the device and in the Xamarin Android Player.

Here's an update:

When I move the controls around in MapManagerPage.xaml it renders them on the map (for example I've moved the search bar and placed the ListView in place of that and it's rendering in the same place):




  • FulvioFulvio AUMember ✭✭
    edited December 2015

    I've uploaded a sample project (password upon request) demonstrating the rendering issue:

    To test the scenario, comment or uncomment the following lines in MapManagerPage.xaml.cs

    this.Detail = new NavigationPage (new MapPage { Title = "Map" }) { Title = "Map" }; //this.Detail = new NavigationPage (new ContentPage { Title = "Map" }) { Title = "Map" };

    When you pass MapPage() to the NavigationPage it renders abnormally as opposed to just rendering an empty ContentPage(). This is the primary issue.

    Please also take note with the icons on the top-right hand corner that do not appear in Landscape mode. This is the secondary issue.

Sign In or Register to comment.