CODEWITHSUNDEEP
androidandroid-canvasandroid-bitmap
Paul Alexander
Paul Alexander

Reputation: 2748

Android - Draw text with solid background onto canvas to be used as a bitmap

I've built an app that draws text with a boarder onto canvas that is then used as a bitmap and put into a google maps marker.
What I would now like to do is remove the text boarder and create a solid black rectangle background behind the text instead. I've tried a couple of things but can't seem to get anything working on screen.

Code so far:

    String text = "testText";        

    //create bitmap
    Bitmap.Config conf = Bitmap.Config.ARGB_8888; 
    Bitmap bmp = Bitmap.createBitmap(300, 100, conf); 

    //--style text
    //text font
    Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
    //--set text style, colour, alignment, size
    //text
    Paint mText = new Paint();
    mText.setTextAlign(Align.CENTER);
    mText.setColor(Color.WHITE);
    mText.setStyle(Paint.Style.FILL);
    mText.setTextSize(convertToPixels(context, 12));
    mText.setTypeface(tf);
    mText.setAntiAlias(true);

    //text outline
    Paint mTextOutline = new Paint();
    mTextOutline.setTextAlign(Align.CENTER);
    mTextOutline.setColor(Color.BLACK);
    mTextOutline.setStyle(Paint.Style.STROKE);
    mTextOutline.setTextSize(convertToPixels(context, 12));
    mTextOutline.setTypeface(tf);
    mTextOutline.setAntiAlias(true);
    mTextOutline.setStrokeWidth(2);

    //create and draw text and outline onto canvas
    Canvas canvas = new Canvas(bmp);
    canvas.drawText(text, 150, 50, mText);
    canvas.drawText(text, 150, 50, mTextOutline);

    //add text marker to map
    textMarker[markerID] = mapView.addMarker(new MarkerOptions()
        .title("TEXT_MARKER")
        .position(point)
        .icon(BitmapDescriptorFactory.fromBitmap(bmp)));

UPDATE:


what I am now trying. Only seems to return a thin black line below the text.

//create bitmap
        Bitmap.Config conf = Bitmap.Config.ARGB_8888; 
        Bitmap bmp = Bitmap.createBitmap(300, 100, conf); 

        //--style text
        //text font
        Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
        //--set text style, colour, alignment, size
        //text
        Paint mText = new Paint();
        mText.setTextAlign(Align.CENTER);
        mText.setColor(Color.WHITE);
        mText.setStyle(Paint.Style.FILL);
        mText.setTextSize(convertToPixels(context, 12));
        mText.setTypeface(tf);
        mText.setAntiAlias(true);

        //text outline
        Paint mTextBackground = new Paint();
        mTextBackground.setColor(Color.BLACK);
        mTextBackground.setStyle(Style.FILL);

        Rect rectangle = new Rect();

        mText.getTextBounds(text, 0, text.length(), rectangle);

        //create and draw text and outline onto canvas
        Canvas canvas = new Canvas(bmp);
        canvas.drawRect(rectangle, mTextBackground);
        canvas.drawText(text, 150, 50, mText);


        //add text marker to map
        textMarker[markerID] = mapView.addMarker(new MarkerOptions()
            .title("TEXT_MARKER")
            .position(point)
            .icon(BitmapDescriptorFactory.fromBitmap(bmp)));

Upvotes: 3

Views: 5218

Answers (1)

Sebastian
Sebastian

Reputation: 1074

Instead of this:

canvas.drawText(text, 150, 50, mTextOutline);

you should draw a Rectagle with one of the drawRect functions from Canvas.

Beware that 

mTextOutline.setStyle(Paint.Style.STROKE);

Means only paint the border (stroke), while

mTextOutline.setStyle(Paint.Style.FILL);

Should fill the rectangle.

You can measure the size of the text by using Paint.getTextBounds, and maybe increase it a little so you have some borders.

Of course, paint the border before the text, or you will hide it.

Upvotes: 3

Related Questions