How to center text horizontally on Canvas

Question

I have an ImageView with 2 TextViews. I am trying to align the captions by its median with the median (width/2) of the Canvas. Here is an illustration of what I'm trying to achieve:

https://imgur.com/a/7fklSBv

So far, my attempt aligns the TextView from its left-end with the vertical-centre of the Canvas.

public void createBitmapAndSave(ImageView img) {

        BitmapDrawable bitmapDrawable = ((BitmapDrawable) img.getDrawable());
        Bitmap bitmap = bitmapDrawable.getBitmap();
        Bitmap mutableBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);

        String topText = topTextView.getText().toString();
        String bottomText = bottomTextView.getText().toString();

        Canvas canvas = new Canvas(mutableBitmap);
        Paint topPaint = new Paint();
        Paint bottomPaint = new Paint();

        topPaint.setColor(Color.BLUE);
        topPaint.setStyle(Paint.Style.FILL);
        topPaint.setShadowLayer(10f, 10f, 10f, Color.BLACK);
        topPaint.setTextSize(topTextView.getTextSize());

        bottomPaint.setColor(Color.RED);
        bottomPaint.setStyle(Paint.Style.FILL);
        bottomPaint.setShadowLayer(10f, 10f, 10f, Color.BLACK);
        bottomPaint.setTextSize(bottomTextView.getTextSize());

        canvas.drawText(topText, (canvas.getWidth()) / 2, 200, topPaint);
        canvas.drawText(bottomText, (canvas.getWidth()) / 2, canvas.getHeight() - 200, bottomPaint);

        File file;
        Intent mediaScanIntent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);

        String path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM).getPath();
        file = new File(path + "/SimpliMeme/" + timeStamp + "-" + counter + ".jpg");
        file.getParentFile().mkdir();

        try {
            OutputStream stream = new FileOutputStream(file);
            mutableBitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
            stream.flush();
            stream.close();
            Toast.makeText(getContext(), "Meme Saved", Toast.LENGTH_SHORT).show();
        } catch (IOException e) {
            e.printStackTrace();
        }

        Uri contentUri = Uri.fromFile(file);
        mediaScanIntent.setData(contentUri);
        Objects.requireNonNull(getContext()).sendBroadcast(mediaScanIntent);
        counter++;
    }

Possible duplicate of [Android Center text on canvas](https://stackoverflow.com/questions/11120392/android-center-text-on-canvas) — Steve, Mar 05 '19 at 07:28
@Steve not the same thing. I am trying to center my text by the middle of the TextView. — Andros Adrianopolos, Mar 05 '19 at 07:59
@Steve Look at the illustration link I've posted to see what I'm talking about — Andros Adrianopolos, Mar 05 '19 at 08:01

score 2 · Accepted Answer · answered Mar 07 '19 at 10:04

Its actually simple. All you need to do is to use the Paint.measureText() method to get the width of the text, divide by 2 to get its half and then shift it to the left to center it.

Take a look at this. I've created two float variables that hold the width of each text on Canvas:

float topTextMeasurement = topPaint.measureText(topText);
float bottomTextMeasurement = bottomPaint.measureText(bottomText);

Then I've done the above adjustment in your Canvas.drawText() methods' x parameters.

canvas.drawText(topText, topX - (topTextMeasurement/2), 200, topPaint);
canvas.drawText(bottomText, bottomX - (bottomTextMeasurement/2), canvas.getHeight() - 200, bottomPaint);

But this is only if your text is not going to exceed a single line. For multi-line texts, I suggest that you look into DynamicLayout

Thanks a lot!!!! I've upvoted and accepted your answer. If you think that this was a well asked question, could you upvote me as well? — Andros Adrianopolos, Mar 07 '19 at 10:14

How to center text horizontally on Canvas

1 Answers1