Android MapView disappears using a ViewPager and PageTransformer

Issue

I'm having trouble setting up a ViewPager using a PageTransformer and a MapView. The problem is when the viewpager is set to use the PageTransformer, the mapview disappears(goes transparent) while panning. However, if I don't use a transformer and just pan the Mapview is fine. Does anyone know what is causing this behavior?

Currently the PageTransformer does nothing special but just setting it seems to affect the way the mapview is drawn. I should note that the map goes transparent while the mapview(Legal Notice)remains. When the ViewPager enters an Idle state the Map appears.

viewPager.setPageTransformer(true, this);
...
@Override
public void transformPage(View view, float position) {
}

XML: ViewPager Fragment

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
        <com.google.android.gms.maps.MapView
                    android:id="@+id/mapcontainer"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="false"/>
</FrameLayout>

Map Fragment:

private GoogleMap map;
private MapView mapView;
private Bundle mapBundle;

@Override
public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    mapBundle = savedInstanceState;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.mapfragment, container, false);
    MapsInitializer.initialize(getActivity());
    mapView = (MapView) rootView.findViewById(R.id.mapcontainer);
    mapView.onCreate(mapBundle);

    map = mapView.getMap();

    return rootView;
}
@Override
public void onResume(){
     super.onResume();
     mapView.onResume();
}

@Override
public void onPause(){
     super.onPause();
     mapView.onPause();
}

@Override
public void onDestroy(){
     super.onDestroy();
     mapView.onDestroy();
}

Solution

I found a solution from the discussion thread Bug: Black rectangle background on scroll that pointed me in the right direction. There seems to be some bugs in Google Play Services that can be resolved by setting the map to "Lite Mode". In my case it did the trick and the map is now working in the pagetransformer. From what I understand lite mode changes the map to a Bitmap Image. You can read more about it here Google Maps - Lite Mode. Lite mode has some limitation such as not being able to pan or zoom, but in my case it is not a requirement.

I updated my XML to this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
    <com.google.android.gms.maps.MapView
                xmlns:map="http://schemas.android.com/apk/res-auto"
                android:id="@+id/mapcontainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clickable="false"
                map:liteMode="true"/>
</FrameLayout>

You can also set this option in the code:

GoogleMapOptions options = new GoogleMapOptions().liteMode(true);
MapView mapView = MapView (context, options);

Answered By - mdbox