Fragment inside ScrollView gives black background flickering

Question

I have a LinearLayout in one of the activities as the main layout. I used Scrollview to encapsulated the LinearLayout. The Layout contains a fragment which displays a google map, but on scrolling it gave black background. I resolved the issue by using a transparent background inside a FrameLayout. The black background has gone, but during scrolling i get flickering black edges around the map. How to remove this? I tried setting the background of Scrollview to white color, but no change visible.

The XML of the activity is --

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:baselineAligned="false"
android:orientation="vertical"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical"
android:showDividers="none" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="#ec4d1d" >

    <TextView
        android:id="@+id/friend_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="7dp"
        android:background="@drawable/near_you_bg"
        android:gravity="center_horizontal|center_vertical"
        android:padding="6dp"

        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:textStyle="bold"
        android:typeface="sans" />

    <Button
        android:id="@+id/btnInviteFriends"
        android:layout_width="30dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="7dp"
        android:background="@drawable/menu_bg"
        android:onClick="inviteFriends" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="81dp"
    android:background="@drawable/list_bg"
    android:orientation="vertical" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:shrinkColumns="*"
        android:stretchColumns="*" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_marginTop="4dp"
            android:gravity="center_vertical|center_horizontal" >

            <RelativeLayout
                android:layout_width="65dp"
                android:layout_height="70dp" >

                <ImageView
                    android:id="@+id/user_image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignWithParentIfMissing="false"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_marginTop="7dp"
                    android:src="@drawable/d_bg" />

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="140dp"
                android:layout_height="70dp" >

                <TextView
                    android:id="@+id/name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp"
                    android:layout_toRightOf="@id/user_image"
                    android:paddingBottom="2dip"
                    android:text="Amrinder"
                    android:textColor="#000000"
                    android:textSize="16sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/distance"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/name"
                    android:layout_marginTop="2dp"
                    android:layout_toRightOf="@id/user_image"
                    android:text="description"
                    android:textColor="#000000"
                    android:textSize="10sp" >

                </TextView>

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/distance"
                    android:layout_marginTop="7dp"
                    android:orientation="horizontal" >

                    <ImageView
                        android:id="@+id/common_icon"
                        android:layout_width="26dp"
                        android:layout_height="19dp"
                        android:background="@drawable/common_icon" />

                    <TextView
                        android:id="@+id/common_number"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="3dp"
                        android:text="4"
                        android:textColor="#000000"
                        android:textStyle="bold" />

                    <ImageView
                        android:id="@+id/friends_icon"
                        android:layout_width="26dp"
                        android:layout_height="19dp"
                        android:layout_marginLeft="7dp"
                        android:background="@drawable/friends_icon" />

                    <TextView
                        android:id="@+id/friends_number"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="3dp"
                        android:text="5"
                        android:textColor="#000000"
                        android:textStyle="bold" />
                </LinearLayout>

                <TextView
                    android:id="@+id/nearUserInfo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:visibility="invisible" >
                </TextView>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <TextView
                    android:id="@+id/time_ago"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:text="10 min ago" 
                    />

                <ImageView
                    android:id="@+id/dir_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/time_ago"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="23dp"
                    android:background="@drawable/say_hi_button" />

            </RelativeLayout>
        </TableRow>
    </TableLayout>
</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
>

<ImageView
    android:id="@+id/map_bar"
    android:layout_width="fill_parent"
    android:layout_height="25dip"
    android:layout_centerInParent="false"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/map_box_bg" />


<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="25dp" >

    <TextView
        android:id="@+id/distance_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="1dp"
        android:text="X is 4 km north-east of you now"
        android:textColor="#ffffff"
        android:textStyle="bold" />

</RelativeLayout>
<FrameLayout
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.MapFragment"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:layout_below="@id/map_bar"

    />
<View
        android:id="@+id/trans_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/trans" />         
</FrameLayout>

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >

<ImageView
    android:id="@+id/like_bar"
    android:layout_width="fill_parent"
    android:layout_height="25dip"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/map_box_bg" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="25dp" >

    <ImageView
        android:id="@+id/like_button"
        android:layout_width="24dp"
        android:layout_height="23dp"

        android:layout_centerVertical="true"
        android:layout_marginLeft="1dp"
        android:background="@drawable/common_detail_icon" />

    <TextView
        android:id="@+id/likes_in_common"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/like_button"
        android:gravity="center_vertical"
        android:text=" 3 likes in common"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

    </RelativeLayout>

<ImageView
    android:id="@+id/like_bg"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/like_bar"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/list_bg" />

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >

<ImageView
    android:id="@+id/friends_bar"
    android:layout_width="fill_parent"
    android:layout_height="25dip"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/map_box_bg" />

    <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="25dp"
    android:layout_alignParentRight="true" >

    <ImageView
        android:id="@+id/friends_button"
        android:layout_width="24dp"
        android:layout_height="23dp"

        android:layout_centerVertical="true"
        android:layout_marginLeft="1dp"
        android:background="@drawable/common_friends_icon" />

    <TextView
        android:id="@+id/friends_in_common"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/friends_button"
        android:gravity="center_vertical"
        android:text=" 9 friends in common"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

    </RelativeLayout>

<ImageView
    android:id="@+id/friends_bg"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/friends_bar"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/list_bg" />



</RelativeLayout>


<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >

<ImageView
    android:id="@+id/friends_bar"
    android:layout_width="fill_parent"
    android:layout_height="25dip"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/map_box_bg" />

    <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="25dp"
    android:layout_alignParentRight="true" >

    <ImageView
        android:id="@+id/friends_button"
        android:layout_width="24dp"
        android:layout_height="23dp"

        android:layout_centerVertical="true"
        android:layout_marginLeft="1dp"
        android:background="@drawable/common_friends_icon" />

    <TextView
        android:id="@+id/friends_in_common"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/friends_button"
        android:gravity="center_vertical"
        android:text=" 9 friends in common"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

    </RelativeLayout>

<ImageView
    android:id="@+id/friends_bg"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/friends_bar"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/list_bg" />



</RelativeLayout>



<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >

<ImageView
    android:id="@+id/friends_bar"
    android:layout_width="fill_parent"
    android:layout_height="25dip"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/map_box_bg" />

    <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="25dp"
    android:layout_alignParentRight="true" >

    <ImageView
        android:id="@+id/friends_button"
        android:layout_width="24dp"
        android:layout_height="23dp"

        android:layout_centerVertical="true"
        android:layout_marginLeft="1dp"
        android:background="@drawable/common_friends_icon" />

    <TextView
        android:id="@+id/friends_in_common"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/friends_button"
        android:gravity="center_vertical"
        android:text=" 9 friends in common"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

    </RelativeLayout>

<ImageView
    android:id="@+id/friends_bg"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/friends_bar"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/list_bg" />
</RelativeLayout>
</LinearLayout>
</ScrollView>

Answer 1

The reason behind this is that the Map uses a SurfaceView, when the App creates this view it creates a Window behind your Activity's and punches a hole meaning things in your Activity's window cannot seen underneath the SurfaceView's original location.

For me this is worked like charm, You can use this library

https://github.com/NyxDigital/NiceSupportMapFragment/

Answer 2

Instead of using a transparent image above the map fragment you try using the transparent color becauz i was also facing the same issue and i solved using this method.

android:background="@android:color/transparent"

But technically speaking as suggested by Android you should not use a scrolling element inside another scrolling element.Rather you can use the Google map static map API to show static map inside scroll view and when you tap on scroll view you can open a Scrollable google map in a new window.