Google Maps Android API V2 blacking out part of la

Question

I'm trying to integrate Google Maps Android API v2 into my Android Application. I'm placing the Google Map in the middle of my layout. It works great when the layout is able to fit on the screen, but when the layout is too big to fit, and the user scrolls down to see the rest of the content, the rest of the layout is blacked out by the Google Map. See the following screenshot:

(Note: All the map gestures are disabled to allow the user to scroll.)

My layout XML:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="20sp" >

    <TextView
        android:id="@+id/race_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="14sp"
        android:textSize="@dimen/DetailsTop"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/race_in_chase" />
    <TextView
        android:id="@id/race_in_chase"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/in_the_chase"
        android:textSize="@dimen/DetailsTop"
        android:background="@drawable/inthechase"
        android:paddingLeft="20sp"
        android:paddingRight="20sp"
        android:visibility="gone"
        android:layout_alignParentRight="true" />

    <TextView
        android:id="@+id/race_name"
        style="@style/RaceDetailsName"
        android:layout_below="@id/race_num" />
    <TextView
        android:id="@+id/race_track"
        style="@style/RaceDetailsText"
        android:paddingBottom="20sp"
        android:layout_below="@id/race_name" />

    <TextView
        android:id="@+id/race_time"
        style="@style/RaceDetailsText"
        android:layout_below="@id/race_track" />
    <TextView
        android:id="@+id/race_tv"
        style="@style/RaceDetailsText"
        android:layout_below="@id/race_time" />

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="380dp"
        android:layout_marginTop="20sp"
        android:layout_marginBottom="20sp"
        class="com.google.android.gms.maps.SupportMapFragment"
        android:layout_below="@id/race_tv" />

    <TextView
        android:id="@+id/race_track_size"
        style="@style/RaceDetailsText"
        android:layout_below="@id/map" />

</RelativeLayout>

</ScrollView>

My map setup in my Activity:

private void setUpMapIfNeeded() {
    if (mMap == null) {
        mMap = ((SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map)).getMap();
        if (mMap != null) {
            setUpMap();
        }
    }
}

private static final LatLng CHICAGOLAND = new LatLng(41.474856, -88.056928);

private void setUpMap() {
    mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
    mMap.getUiSettings().setZoomControlsEnabled(false);
    mMap.getUiSettings().setAllGesturesEnabled(false);
    CameraPosition cameraPosition = new CameraPosition.Builder()
        .target(CHICAGOLAND)
        .zoom(14.5f)
        .bearing(53)
        .build();
    mMap.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}

My hunch is the maps fragment does not like the ScrollView since the layout if fine if the entire layout fits on the screen and scrolling isn't required. The map itself appears to be the correct size. The blackout is the exact size of the remaining items in the view. Does anyone have any ideas how I can get rid of the blackout below the map so I can see the TextView below it? Everything I've tried until now hasn't worked.

Answer 1

I was able to adapt the above for the same issue in a Viewpager by overriding onPageScrolled in the FragmentPagerAdapter:

@Override
public void onPageScrolled(int position, float positionOffset, 
                           int positionOffsetPixels) {
    if ((position == 0 && positionOffsetPixels > 0) ||
        (position == 1 && positionOffsetPixels == 0)) {
        MyFragment blackedOutFragment = (MyFragment) getSupportFragmentManager()
                .findFragmentByTag("android:switcher:" + R.id.pager + ":1");
        if (blackedOutFragment != null) {
            blackedOutFragment.getView().setVisibility(View.GONE);
            blackedOutFragment.getView().setVisibility(View.VISIBLE);
        }
    }
}

Where position 0 in the Viewpager is a Fragment holding a MapFragment and position 1 is the Fragment getting blacked out after the scroll.

Answer 2

My guess is the MapFragment's height is 0 during the Activity's initialization . Try with

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20sp" >

....

      <TextView
            android:id="@+id/race_track_size"
            style="@style/RaceDetailsText"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="2dp"/>

</RelativeLayout>