How to get a reference to the top and the bottom of a canvas for dynamic positioning?

Question

I have 2 TextViews on top of an ImageView. I am using the Canvas and Paint classes to draw the captions on the picture. I want the captions to have about 20dp of gap between the top of the image and the top of the TextView. What are some ways to get these values to input into the y value of Canvas.drawText()?

Sander Rito · Accepted Answer · 2019-02-27T05:41:31.093

1

The text origin is like the image, it starts on left top, for the top text just set the y origin to +20dp, for the bottom text set the y origin to text.height+20dp

Center text:

x = image.width/2 - text.width/2;

Top text Y axis

y = 20;

Bottom text Y axis:

y = image.height - 20 - text.height;

Is important that you measure the text before attempting yo get the width of the drawed text.

Check this answer: Measuring text height to be drawn on Canvas ( Android )

edited Feb 27 '19 at 05:41

answered Feb 27 '19 at 02:40

Sander Rito

396
2
8

I see. How about aligning the center of the TextView to the center of the Canvas? – Andros Adrianopolos Feb 27 '19 at 02:56
Something like this: y = image.height/2 - text.height/2 – Sander Rito Feb 27 '19 at 03:14
Can you explain that? – Andros Adrianopolos Feb 27 '19 at 03:16
I meant the horizontal center of the Canvas and the vertical center of the TextView so the Text sits right in the top centre of the canvas. – Andros Adrianopolos Feb 27 '19 at 03:18
Oh ok, in that case i was wrong, its the width: x = image.width/2 - text.width/2, y = 20 (top text), y = image.height - 20 - text.height (bottom text) – Sander Rito Feb 27 '19 at 03:21
Did this helped? – Sander Rito Feb 27 '19 at 04:18
Not really. Could you kindly explain the equation. – Andros Adrianopolos Feb 27 '19 at 05:24
If you want to center something on a container, then the middle of the container is your point of reference. Thats why is image.width/2. If you place the text in that x coordinate then the text will Start in the middle of the image and fill the right side if the image. In order to olae the text "centered" you have to adjust the middle of the container minus the half of the text width, thus x = image.width/2 - text.width/2 – Sander Rito Feb 27 '19 at 05:28
One thing that you might be missing is to measure the text before drawing it. Try searching for an answer on something like this: canvas measure text, and the implement that on your code before drawText() – Sander Rito Feb 27 '19 at 05:32

PushpikaWan · Answer 2 · 2019-02-27T03:18:18.053

you can follow this link https://developer.android.com/training/custom-views/custom-drawing#java. It contains a detailed description of positioning. In your case,

you need to create your text first

 textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   textPaint.setColor(textColor);
   if (textHeight == 0) {
       textHeight = textPaint.getTextSize();
   } else {
       textPaint.setTextSize(textHeight);
   }

   piePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   piePaint.setStyle(Paint.Style.FILL);
   piePaint.setTextSize(textHeight);

   shadowPaint = new Paint(0);
   shadowPaint.setColor(0xff101010);
   shadowPaint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL));

like this and you need to set padding and place it where u want like below

// Account for padding
float xpad = (float)(getPaddingLeft() + getPaddingRight());
float ypad = (float)(getPaddingTop() + getPaddingBottom());

// Account for the label
if (showText) xpad += textWidth;

float ww = (float)w - xpad;
float hh = (float)h - ypad;

// Figure out how big we can make the pie.
float diameter = Math.min(ww, hh);

I got this whole code from above-mentioned URL.

you need to add below code to center positioning

 Paint yourPaint = new Paint();

  int xP = (canvas.getWidth() / 2);
  int yP = (int) ((canvas.getHeight() / 2) - ((yourPaint .descent()yourPaint .ascent()) / 2)) ;

        canvas.drawText(yourTextView, xP, yP, yourPaint);

I think I got this part figured out. Now I just want to align the center of the TextView with the center of the Canvas. — Andros Adrianopolos, Feb 27 '19 at 03:12
What I meant was that I have 2 TextViews on the top and the bottom. I want my TextViews to, while stay in the top and the bottom of the canvas, also appear in the vertical center (half of the width) of the canvas. — Andros Adrianopolos, Feb 27 '19 at 03:20
So basically I want to align the centre of the TextView with the centre of the Canvas (half of the width) — Andros Adrianopolos, Feb 27 '19 at 03:21

How to get a reference to the top and the bottom of a canvas for dynamic positioning?

2 Answers2