Display label over Google Map

Question

I'm having problems displaying a TextView over my Google Map. I add the MapFragment programmatically in a FrameLayout during onCreate method and the TextView is in the XML file. For what I can see, the TextView is properly displayed but the MapFragment comes over it and hides the TextView when it is added to the FrameLayout. I already searched here on StackOverflow but every akin topic I could find was with a static MapFragment in XML.

here is my code : src/java/SearchMapFragment.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    ...
    mMapFragment = MapFragment.newInstance(options);
    FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
    fragmentTransaction.add(R.id.map_layout,mMapFragment);
    fragmentTransaction.commit();
    ((TextView)rootView.findViewById(R.id.map_label)).setVisibility(View.VISIBLE);
    ...
}

and my XML fil : res/layout/fragment_search_map.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/search_map_wrapper_layout"
    tools:context="com.appsolute.ParkYoo.SearchMapFragment">

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/map_layout"
        android:layout_weight="100">

        <TextView style="@style/DarkBlueText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/map_label"
            android:gravity="center"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:visibility="gone"/>

    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1">

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/search_map_frame_layout">

            <Button style="@style/WhiteText"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Lancer la recherche"
                android:layout_margin="5dp"
                android:id="@+id/launch_search"
                android:background="@drawable/lancer" />

        </FrameLayout>
    </LinearLayout>
</LinearLayout>

Any help would be greatly appreciated thanks in advance !

I would have done it if I knew how to do it. Do you suggest adding the TextView programmatically ? — user3476114, Oct 01 '14 at 13:46
Do you tried to user RelativeLayout instead LinearLayout? You can position your TextView on it. — ar-g, Oct 01 '14 at 13:46
After trying with a relative layout it goes the same. The TextView stays behind the GoogleMap. — user3476114, Oct 01 '14 at 14:06

user3476114 · Accepted Answer · 2014-10-02T08:34:07.387

Finally I have found an answer. Basically I remember seeing somewhere that the xml architecture of layout files on android was "back to front". Meaning that the lower you go on the xml layout file, the more in the front your widget will be. So the widgets are place one on top of the other.

So I tried placing a TextView after the FrameLayout in the xml file but it turned out to be the same, probably because the fragment was added in the FrameLayout at runtime so it's the last one added and overlaps the TextView inflated in the onCreate method.

To solve my problem I have reworked my XML like this :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/search_map_wrapper_layout"
    android:gravity=""
    tools:context="com.appsolute.ParkYoo.SearchMapFragment">

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/map_layout_leave_place"
        android:layout_above="@+id/utility_linear_layout">

    </FrameLayout>

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:id="@+id/leave_place_label">

    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/utility_linear_layout"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true">

        <TextView style="@style/DarkBlueText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:id="@+id/street_leave_parking_spot"
            android:layout_marginTop="10dp"
            android:text="Rue X"/>

        <TextView style="@style/TitleText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/city_leave_parking_spot"
            android:paddingBottom="15dp"
            android:background="@drawable/discontinued_line"
            android:text="75009 PARIS"/>

        <Button style="@style/WhiteText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Mémoriser ma place"
            android:id="@+id/remember_parking_spot"
            android:background="@drawable/lancer"
            android:layout_gravity="center_horizontal|bottom"/>

        </LinearLayout>

</RelativeLayout>

The first FrameLayout (map_layout_leave_place) is the deepest and is where my map will be displayed. The second FrameLayout (leave_place_label) is where my TextView will be palced it's positioned over the google map layout and is blank for now. The rest happens at runtime.

I created a LabelFragment containing only a TextView to be added at runtime using regular fragment transaction when I click on a button which will be hosted by leave_place_label.

LabelFragment frag = LabelFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.add(R.id.leave_place_label,frag);
ft.commit();

And here is whet it does :

https://drive.google.com/file/d/0B1KRFmgxHcLtMEY3dDQ1c0NRYWM/edit?usp=sharing

Display label over Google Map

1 Answers1