Center Text on Watch

Question

I've been trying multiple ways to center 3 lines of text on a watch and can't seem to figure it out. The new watch face services require you to paint to a canvas. I initialize the text offset by grabbing the length of text of each line and dividing by 2.

mXDateOffset = mTextDateColorPaint.measureText("May 21, 2015") /2;
mXTimeOffset = mTextTimeColorPaint.measureText("12:00:00")/2;
mXBatteryOffset = mTextBatteryColorPaint.measureText("99%") /2 ;

Then when I set the text and paint elements to the canvas I find the center of the rectangle(screen) minus the screen to find the start position of the text.

canvas.drawText( timeText, bounds.centerX() - mXTimeOffset, 40.0f, mTextTimeColorPaint );
canvas.drawText( date, bounds.centerX() - mXDateOffset, 90.0f, mTextDateColorPaint);
canvas.drawText( mBatteryLevel, bounds.centerX() - mXBatteryOffset, 130.0f, mTextBatteryColorPaint );

What I get is this...

Not sure what else to do.

that seems very well centered to me, just not for the actual text you are drawing. mind you, `4:39:41` does not have the same length as `12:00:00`. I don't really understand why you would use a different text for measuring and for drawing. — njzk2, Aug 10 '15 at 21:46
then you just have to change the offset value according to whatever you want to draw... — njzk2, Aug 10 '15 at 22:02
So I have to manually measure the text length each time and the center it? Isn't there an easier way? I miss the Textfield layouts we used to have for watchfaces — JPM, Aug 11 '15 at 15:07
yes. but it is quite easy. Just do `canvas.drawText( timeText, bounds.centerX() - mTextTimeColorPaint.measureText(timeText)/2, 40.0f, mTextTimeColorPaint );` — njzk2, Aug 11 '15 at 15:13

score 7 · Accepted Answer · answered Dec 16 '15 at 20:04

There is alot that went into this answer here is what I came up with having to access the onDraw methods:

in onCreate() set the offsets

mYTimeOffset = getResources().getDimension( R.dimen.y_offset );
mYDateOffset = getResources().getDimension( R.dimen.y_date_offset );
mYBatteryOffset = getResources().getDimension( R.dimen.y_battery_offset );

then call the drawtime and set the canvas parameters

    private void drawTimeText(Canvas canvas, Rect bounds) {
        String timeText = getHourString() + ":" + String.format( "%02d", mDisplayTime.minute );
        if( isInAmbientMode() || mIsInMuteMode ) {
            timeText += ( mDisplayTime.hour < 12 ) ? "AM" : "PM";
        } else {
            timeText += String.format( ":%02d", mDisplayTime.second);
        }

        String date = new SimpleDateFormat(DATE_FORMAT_DISPLAYED).format(Calendar.getInstance().getTime());
        canvas.drawText( timeText, bounds.centerX() - (mTextTimeColorPaint.measureText(timeText))/2, mYTimeOffset, mTextTimeColorPaint );
        canvas.drawText( date, bounds.centerX() - (mTextDateColorPaint.measureText(date))/2, mYDateOffset, mTextDateColorPaint);
        if (mBatteryLevel != null)
        canvas.drawText( mBatteryLevel, bounds.centerX() - (mTextBatteryColorPaint.measureText(mBatteryLevel))/2, mYBatteryOffset, mTextBatteryColorPaint );
    }

Center Text on Watch

1 Answers1

Linked