views:

2195

answers:

3

I'm trying to draw some text onto an MapView on Android. The drawing of the text goes fine, but it's very hard to read the text because it's white with no black border (like the rest of the text that appears naturally on MapViews to denote cities, states, and countries). I can't seem to figure how to draw the text with a black border. Anyone know how to do this?

This is the sort of code I'm using right now (this is just example code, found in one of my overlays):

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
 Paint textPaint = new Paint();
 textPaint.setARGB(255, 255, 255, 255);
 textPaint.setTextAlign(Paint.Align.CENTER);
 textPaint.setTextSize(16);
 textPaint.setTypeface(Typeface.DEFAULT_BOLD);

 canvas.drawText("Some Text", 100, 100, textPaint);

 super.draw(canvas, mapView, shadow);
}
+2  A: 

The half-answer, which may or may not be good enough (it was in my case), is to set a shadow:

textPaint.setShadowLayer(3, 0, 0, Color.BLACK);

The shadow helps the text stand out a lot, but isn't quite as good as a black border would be. I'm still curious how to solve the original question.

Daniel Lew
+1  A: 

This is a complete shot in the dark and there might be a better way, but if you create 4 copies of the text, set their color to black, then shift each layer by 1 pixel diagonally, it would create an illusion of a border. So if your text is positioned at [100,100], the 4 shadows would need to be positioned at [99,99], [99,101], [101,99] and [101,101], like this:

canvas.drawText("Some Text", 99, 99, borderPaint);
canvas.drawText("Some Text", 99, 101, borderPaint);
canvas.drawText("Some Text", 101, 99, borderPaint);
canvas.drawText("Some Text", 101, 101, borderPaint);

canvas.drawText("Some Text", 100, 100, textPaint);
Aleksander Kmetec
That's both brilliant and ridiculous... I'll have to try it and see. :)
Daniel Lew
I've often used this technique with gimp (not knowing how to do that properly)
Lo'oris
+6  A: 

The easiest way to do this is with a Stroke... something like this:

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
    Paint strokePaint = new Paint();
    strokePaint.setARGB(255, 0, 0, 0);
    strokePaint.setTextAlign(Paint.Align.CENTER);
    strokePaint.setTextSize(16);
    strokePaint.setTypeface(Typeface.DEFAULT_BOLD);
    strokePaint.setStyle(Paint.Style.STROKE);
    strokePaint.setStrokeWidth(2);

    Paint textPaint = new Paint();
    textPaint.setARGB(255, 255, 255, 255);
    textPaint.setTextAlign(Paint.Align.CENTER);
    textPaint.setTextSize(16);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);

    canvas.drawText("Some Text", 100, 100, strokePaint);
    canvas.drawText("Some Text", 100, 100, textPaint);

    super.draw(canvas, mapView, shadow);
}

This will draw a border of 2 pixels around the outside of the text then draw the text over the top of it, giving you the illusion of an outline.

Also, it may be worth setting the Paints up in the constructor then just reusing them.

fiXedd
Ah, wonderful! A good solution. Also, I already do setup the Paints in the constructor and reuse; I just simplified my example above for explanatory purposes.
Daniel Lew
I figured (you don't seem dumb :) ). Mostly just adding that for posterity.
fiXedd
@fiXedd But how am I suppose to override a View that is declared in the xml file?
Tom Brito
@Tom you can include your own Views in xml. Instead of <Mapview ...> you can do <com.example.MyMapView ...>
fiXedd
@fiXedd cool, thanks for answering.. :)
Tom Brito
@Tom No problem!
fiXedd