24

I want to create a drawable, which consists of a map pin(bubble) and some text. The bubble should be in the background and the text in the foreground.

This drawable should be passed in super(drawable) of the class BalloonItemizedOverlay which extends ItemizedOverlay<Item>.

In other words, I want to show text in the bubble that appears in the map.

I am using the Hello Mapview tutorial

JulianHarty
  • 3,178
  • 3
  • 32
  • 46
Abhi
  • 8,935
  • 7
  • 37
  • 60
  • 2
    Give us some code ! At least try to write what you explaining here and we will help – iTurki Jul 14 '11 at 10:37
  • thank for quick response actually I want to pass drawable containg text in following class MyItemizedOverlay which extends ItemizedOverlay itemizedOverlay = new MyItemizedOverlay(drawable,mapView); point= new GeoPoint((int)(Search.slat[i]*1E6),(int)(Search.slon[i]*1E6)); OverlayItem overlayItem = new OverlayItem( point, Search.address[i], Search.city[i]); – Abhi Jul 14 '11 at 11:02
  • Could you update your question with the code? Really hard to read here – iTurki Jul 14 '11 at 11:05
  • I want to add text so is there any way to create drawable contaning image (bubble) as background and some text over it at runtime so that I can pass drawable(with image and text) in super() ,which is displayed as bubble in map. thank you – Abhi Jul 14 '11 at 11:24

1 Answers1

64

This method takes a drawable from your resources, draws some text on top of it and returns the new drawable. All you need to do is give it the resource id of your bubble, and the text you want on top. Then you can pass the returned drawable wherever you want it. 

public BitmapDrawable writeOnDrawable(int drawableId, String text){

        Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
        Paint paint = new Paint(); 
        paint.setStyle(Style.FILL);  
        paint.setColor(Color.BLACK); 
        paint.setTextSize(20); 

        Canvas canvas = new Canvas(bm);
        canvas.drawText(text, 0, bm.getHeight()/2, paint);

        return new BitmapDrawable(bm);
    }

To preserve density you need this constructor

BitmapDrawable (Resources res, Bitmap bitmap)

So, keeping your context, last return should be something like

return new BitmapDrawable(context.getResources(), bm);

This prevent an undesired resized drawable.

Maveňツ
  • 1
  • 12
  • 50
  • 89
Marmoy
  • 8,009
  • 7
  • 46
  • 74
  • thank you very much. it working fine.thank you again for quick reply .In my drwable i giving the text as 123 but it displaying only 1.I think because of small size it displaying only one.What you opinion shall i increase the big image or how i can increase the size or is there any other problem thank you – Abhi Jul 14 '11 at 12:28
  • You could either increase the size of your bubble or decrease the size of the text. As you can see the text is now set to size 20, you could try with 10. – Marmoy Jul 14 '11 at 12:36
  • 3
    Just wanted to comment that this does not work with a xml defined drawable. As that kind of drawable is a GradientDrawable. – Etienne Lawlor May 25 '12 at 07:11
  • If i keep the phone straight, the text appears from top to bottom. How can i make it from left to right? – user973743 Jun 13 '12 at 21:53
  • top notch, Videre. Just the puzzle piece I was looking for. – Chris Knight Aug 27 '12 at 22:18
  • Do you know how to do it with a 9-patch so it can resize automatically with the size of the text ? – Tsunaze Jul 03 '13 at 12:48
  • **bold**That's a great answer, but text is not in center of bitmap(even though i've changed the second parameter of canvas.drawText() from 0 to bm.getWidth()/2 and my image's size is equal in height and width,,,what should i?its urgent plzzzz) **bold** – Vishal Pandey Sep 04 '14 at 12:36
  • @Vishal_Pandey you would need to subtract half the width and half the height of the resultant Text to the center coords if you want the whole text to be centered, otherwise you are just setting the top-left of the text to the center of the drawable. – straya May 06 '16 at 07:56