Add custom button to MapFragment with the same style of Maps app

Question

I need add some custom buttons on my MapFragment.

I use this code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--suppress AndroidDomInspection -->

<fragment
    android:id="@+id/map"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true">

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="10sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="60sp"
        android:layout_marginTop="10sp"
        android:src="@android:drawable/ic_menu_mylocation"/>

</RelativeLayout>

I'd like that these button have the same style of zoom buttons: white semitrasparent background, gray border and gray background on click.

How can I set the same style? Is there a more simple way? (for example official api)

Sphene

Answer 1

This is my current approximation of a button for the google map api v2. It's all in the XML. I'm happy to share this technique.

<fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    class="com.google.android.gms.maps.SupportMapFragment" />


<Button
    android:id="@+id/btnFollow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="34dp"
    android:background="@drawable/mapbutton"
    android:padding="14dp"
    android:text="@string/btnFollowText"
    android:textColor="@color/black" />


/drawable/mapbutton

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="2dp" />

    <stroke
        android:width="1dp"
        android:color="#CC444444" />

    <solid android:color="#88FFFFFF" />

</shape>

/color/black

<color name="black">#000000</color>

Tailor it for your app.

Janaye

Thanks you. I have make a small change on you code and now my button it's very similar to maps button. – Sphene

@Sphene maybe then share your change, too? – Deprecate

Answer 2

The best that I could style it is as follows:

Style your button with ImageButton, and set the android:layout_width and android:layout_height to 40dp. Set android:src to your own drawble, and android:tint to #ff595959. Set the android:background to the following drawable.

/drawable/mapbutton_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#77888888" />
            <solid android:color="#44FFFFFF" />
        </shape>
    </item>
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A95badce" />
        </shape>
        </item>
    <item
        android:state_focused="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
    </item>
    <item
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="1.3dp" />
            <stroke android:width="1dp" android:color="#DD888888" />
            <solid android:color="#A9FFFFFF" />
        </shape>
        </item>
</selector>

Superpose

Answer 3

I made a 9-patch image with a similar background of Google Maps button:

It's on my gist

Ligure

Answer 4

You can achieve it using the 9Patch tool of the android SDK and using photoshop.

white semitrasparent background.

when you want semitransparent background you can photoshop your 9patch image using a background transparency eg. 80% transparent which will have the same background effect as the zoom button of the map.

gray background on click

You can use State List of drawable with 2 image, 1 image for light transparency and the other is the graybackground

Tortola