Display a button on top of Google maps Android

Question

Hi I am trying to display a button on top of google maps, could someone please tell me how I could acheive this please as I have tried different positions and my button displays behind the map.

This is my code so far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/BlanchedAlmond" >

<Button
    android:id="@+id/startActivityButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"   
    android:onClick="startActivity"
    android:text="@string/start_activity" 
    android:layout_alignParentBottom="true"  />

   <fragment        
    android:id="@+id/map"      
    android:name="com.google.android.gms.maps.MapFragment"        
    android:layout_width="wrap_content"        
    android:layout_height="wrap_content"
    android:layout_above="@id/startActivityButton"    
    /> 

</RelativeLayout>

Answer 1

If you are giving a try to an alternate solution by doing it in java file you can try the code below in onCreate method ,this will create a button on top of google map

Button button = new Button(this);
button.setText("Click me");
addContentView(button, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

button.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    Intent i=new Intent(this,SecondActivity.class);
                    startActivity(i);

                }
            });

Answer 2

Use this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/BlanchedAlmond"
    android:orientation="vertical" >

    <Button
        android:id="@+id/startActivityButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:onClick="startActivity"
        android:text="@string/start_activity" />

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/startActivityButton"
       />

</RelativeLayout>

Answer 3

If you're using a RelativeLayout it's important that your layers has the same order as your components So if you want a button to be on top of your map you need FIRST place the map, and THEN a button.

correct:

<RelativeLayout>
    <fragment android:id="@+id/map"/> 
    <Button .../>
</RelativeLayout>

incorrect:

<RelativeLayout>
    <Button .../>
    <fragment android:id="@+id/map"/> 
</RelativeLayout>

Answer 4

try this it may help you, to keep as header

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/BlanchedAlmond"
    android:orientation="vertical" >

    <Button
        android:id="@+id/startActivityButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:onClick="startActivity"
        android:text="@string/start_activity" />

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

to Overlay button on Map use this

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/BlanchedAlmond" >

    <Button
        android:id="@+id/startActivityButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal|center_vertical"
        android:onClick="startActivity"
        android:text="@string/start_activity" />

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="wrap_content"
        android:layout_above="@+id/startActivityButton"
        android:layout_height="wrap_content" />
</RelativeLayout>

Answer 5

use this..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<Button
    android:id="@+id/startActivityButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/map"
    android:layout_alignParentBottom="true"
    android:gravity="center_horizontal|center_vertical"
    android:onClick="startActivity"
    android:text="start_activity" />

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.MapFragment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/startActivityButton" />

Answer 6

Have you tried FrameLayout?

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/BlanchedAlmond" >



<fragment        
 android:id="@+id/map"      
 android:name="com.google.android.gms.maps.MapFragment"        
 android:layout_width="wrap_content"        
 android:layout_height="wrap_content"
 android:layout_above="@id/startActivityButton"    
 /> 

<Button
    android:id="@+id/startActivityButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"   
    android:onClick="startActivity"
    android:text="@string/start_activity" 
    android:layout_alignParentBottom="true"  />

</FrameLayout >

What I do in my app is to add a fragment dynamically on top when the map is shown.

Code and layout as requested by MD:

Main XML:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/details"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Turios" >

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/display_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#333"
            android:paddingBottom="4dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="4dp"
            android:textColor="#fff" >
        </android.support.v4.view.PagerTitleStrip>
    </android.support.v4.view.ViewPager>

    <View
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_gravity="bottom"
        android:background="@drawable/shape_background_darkgrey"
        android:padding="5dp" />

</FrameLayout>

Mapoptions XML (I just add buttons dynamically to the LinearLayout):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|right"
    android:orientation="vertical"
    android:paddingTop="65dp"
    android:paddingRight="10dp" >

    <LinearLayout
        android:id="@+id/map_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:orientation="vertical">

    </LinearLayout>

</RelativeLayout>

And the code:

private FragmentTransaction addMapFragment(FragmentTransaction ft) {
    if (mapsFragment == null) {
        AddressHolder address = (device.isMultiPane()) ? null
                : getSelectedAddressHolder();
        mapsFragment = GoogleMapFragment.newInstance(address);
        ft.add(R.id.details, mapsFragment, Turios.FRAGMENT_MAP_TAG);

        mapsOptionsFragment = new GoogleMapOptionsFragment();
        ft.add(R.id.details, mapsOptionsFragment, FRAGMENT_MAP_OPTIONS_TAG);
    } else {
        ft.attach(mapsFragment);
        ft.attach(mapsOptionsFragment);
    }
    return ft;
}

@Override public void onTabSelected(Tab tab,
        android.app.FragmentTransaction ft) {
    int position = tab.getPosition();
    FragmentTransaction t = fm.beginTransaction();

    ft.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_left);

    if (position == DisplayFragment.NAVIGATION_INDEX) {

        if (!device.isMultiPane() && mapsFragment != null
                && mapsOptionsFragment != null) {
            t.detach(mapsFragment);
            t.detach(mapsOptionsFragment);
        }

        if (browserFragment != null) {
            t.detach(browserFragment);
        }

    }

    if (position == GoogleMapFragment.NAVIGATION_INDEX) {

        t = addMapFragment(t);

    }
    if (position == BrowserFragment.NAVIGATION_INDEX) {

        if (browserFragment == null) {
            browserFragment = new BrowserFragment();
            t.add(R.id.details, browserFragment,
                    Turios.FRAGMENT_BROWSER_TAG);
        } else {
            t.attach(browserFragment);
        }
    }

    t.commit();

}

@Override public void onTabUnselected(Tab tab,
        android.app.FragmentTransaction ft) {
    int position = tab.getPosition();
    FragmentTransaction t = fm.beginTransaction();

    if (position == GoogleMapFragment.NAVIGATION_INDEX) {

        t.detach(mapsFragment);
        t.detach(mapsOptionsFragment);

    }
    if (position == BrowserFragment.NAVIGATION_INDEX) {

        t.detach(browserFragment);
    }
    t.commit();
}

Answer 7

do this :

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/BlanchedAlmond"
        android:orientation="vertical" >

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <Button
            android:id="@+id/startActivityButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal|center_vertical"
            android:onClick="startActivity"
            android:text="@string/start_activity" />
    </LinearLayout>

    <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.MapFragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/startActivityButton"
           />
    </RelativeLayout>