CODEWITHSUNDEEP
androidgoogle-mapsmapfragment
Martin
Martin

Reputation: 1085

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

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)

Upvotes: 0

Views: 3929

Answers (4)

Lukas
Lukas

Reputation: 405

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

image

It's on my gist

Upvotes: 3

Billy
Billy

Reputation: 1374

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>

Upvotes: 3

danny117
danny117

Reputation: 5651

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.

Upvotes: 1

Rod_Algonquin
Rod_Algonquin

Reputation: 26198

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

Upvotes: 0

Related Questions