3

I created custom marker on Android Google map api but it give a blurry image when it displayed. How do I get a better stunning custom marker and didn't give a blur in low resolution (my marker resolution is 25x26 px). I didn't use hight resolution image like 250x250 px because it shown a big custom marker in map.

1 Answers1

5

Your question is technically a duplicate of this question:

Different resolution support android

I say technically because the information contained above is sufficient for you to answer your own question, but it is not perhaps obvious how to piece everything together. The jist of the answers is that Android provides the following drawable folders to cover the various resolutions which your app might encounter when being run on actual device. Android will use the image which is appropriate to the resolution on your which app is being run. Taken from the duplicate link:

res/drawable        (default)
res/drawable-ldpi/  (240x320 and nearer resolution)
res/drawable-mdpi/  (320x480 and nearer resolution)
res/drawable-hdpi/  (480x800, 540x960 and nearer resolution)
res/drawable-xhdpi/  (720x1280 - Samsung S3, Micromax Canvas HD etc)
res/drawable-xxhdpi/ (1080x1920 - Samsung S4, HTC one, Nexus 5, etc)
res/drawable-xxxhdpi/ (1440X2560 - Nexus 6,Samsung S6edge).

Suppose you have a custom Google Maps marker whose original is 100x200, i.e. 100 pixels wide and 200 pixels tall. This would roughly fit what many of the bundled markers look like. Now, suppose you want to support hdpi resolution. Well, from the list above, you would then be expecting a 480x800 resolution. Let's also say you want the custom map marker to take up 10% of the width of the screen in portrait, or 48 pixels wide. Then you would make a copy of your original marker image scaled down such that the width is 48 pixels, i.e. it would be 48x96 pixels.

Now, place this custom resized image into the drawable/hdpi folder. When Android is running on hdpi resolution, it will use this image when rendering the marker, and it should not appear blurry.

So that the process is clear, here is the above again, but this time with the exact resolutions you can use for your custom Google Maps marker. Again, I assume that your original is 100x200.

folder                | device size | marker size
res/drawable          | (default)   | none (you don't need one here)
res/drawable-ldpi/    | 240x320     | 24x48
res/drawable-mdpi/    | 320x480     | 32x64
res/drawable-hdpi/    | 480x800     | 48x96
res/drawable-xhdpi/   | 720x1280    | 72x144
res/drawable-xxhdpi/  | 1080x1920   | 108x216
res/drawable-xxxhdpi/ | 1440X2560   | 144x288

Note that here you would actually have to stretch your image for xxhdpi and xxxhdpi. In this case, you might want to start with an even higher resolution image.

Tim Biegeleisen
  • 502,043
  • 27
  • 286
  • 360
  • Thanks for your support. I really appreciate it –  Sep 24 '17 at 15:06
  • @AmirullahAchmadNassardhi What I describe above I had to figure out by trial and error...but it works, at least it has worked well in my own apps. – Tim Biegeleisen Sep 24 '17 at 15:07
  • I confused for something bro. I have been searching about how to create drawabel-ldpi etc. But I don't know how to created the drawabel-ldpi folder like you did. Can you show me how? –  Sep 25 '17 at 04:33
  • My question is how do I created it. I really don't know about that? –  Sep 25 '17 at 05:32
  • Just right click the resources folder and do an add folder operation within Android Studio. – Tim Biegeleisen Sep 25 '17 at 05:43