CODEWITHSUNDEEP
androidbuttongoogle-maps-android-api-2
lostintranslation
lostintranslation

Reputation: 24583

Android google maps button style

I would like to place a button on top of my google map, which is pretty easy. However I would like it to look like the buttons google uses (zoom buttons, locate me button). Is there a way I can 'cheat' and find the styles they used for their buttons. Or has anyone else created this style before?

Upvotes: 9

Views: 5656

Answers (4)

Lukas
Lukas

Reputation: 405

I made this 9-patch image to use as background for the view that you want to be like a google maps button:

google map style button background

The color of the button content is #666666.

Here is an example of a custom view that looks like a google maps button using that background and that color for the text:

example

Upvotes: 10

Display Name
Display Name

Reputation: 8138

If you disassemble Google Play Services apk by using apktool, and look into drawable* folders, you will find the resources for these buttons among other resources.

For example, this is the drawable of the upper zoom button:
res/drawable/maps_btn_zoom_up.xml, and this is the "empty" button: res/drawable/maps_btn_standalone.xml. Looking at them, it is a lot easier to match their style.

The apk will probably be named like com.google.android.gms-#.apk, where # is some number; you can snatch it from a device which has Google Play Services installed by using adb pull command, it doesn't even require rooting if you know the exact file name.

Update

Here is the archive with relevant resources for the empty standalone button, obtained by this way.
(sha256: 4b974a8c23bb8df54b9aa244489e8a7ab5d4d3e17d0c003f411bccbe8a75d622)

And some numbers:
Button height and width is 38dp
Shadow padding: top 1.5dp bottom 2.5dp side 2dp

The background image is NOT nine-patch, but it's pretty easy to create one if you need.

Upvotes: 21

Blueberry
Blueberry

Reputation: 2241

The button is a 70% semi-transparant white.

Or in HEX, #B3FFFFFF

Upvotes: 3

ThomQ
ThomQ

Reputation: 605

I was looking for the same thing, and found this question:Change zoom controls in a MapView

It appears a button is 2 images, a normal state and a clicked state. For your purposes, you'd need to style the button yourself / 'cheat' the system. You can get a good template from either the google play lib or the support library.

Upvotes: 0

Related Questions