Text not appearing in centre of each grey rectangle

Question

I'm trying to create a text view (black colour) containing numbers 1 to 7 (each number on top and in the centre of each grey rectangle but unfortunately, based on my code atm, the numbers appear to be clustered together. What can be done to resolve this issue?

Also is it possible to use string resources from my strings.xml file for numbers 1 to 7 instead of using Integer.toString(i + 1)?

desired outcome

Several text views (black colour) each containing a number (1 to 7) (each number on top and in the centre of each grey rectangle - exactly like the image above)

current undesired outcome

public class RectangleTextView extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();

    private TextPaint mTextPaint;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        int valueInPx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
        int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());

        mRedPaint.setColor(Color.RED);

        mBackPaint.setAntiAlias(false);
        mBackPaint.setColor(Color.BLACK);
        mBackPaint.setStrokeWidth(valueInPx);
        mBackPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(valueInSp);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getWidth() == 0)
            return;

        //draw end rectangles
        int mSideRectWidth = 10;
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle

        //draw grey boxes
        setBackgroundColor(Color.parseColor("#808080"));
        int boxWidth = getWidth() / 7;


        for (int i = 0; i < 7; i++) {
            //draw black lines
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

            //draw text views
            canvas.drawText(Integer.toString(i + 1), getWidth() / 2, getHeight() / 2, mTextPaint);
        }
    }
}

UPDATE

public class RectangleTextView extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();

    private TextPaint mTextPaint;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        int valueInPx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
        int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());

        mRedPaint.setColor(Color.RED);

        mBackPaint.setAntiAlias(false);
        mBackPaint.setColor(Color.BLACK);
        mBackPaint.setStrokeWidth(valueInPx);
        mBackPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(valueInSp);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getWidth() == 0)
            return;

        //draw end rectangles
        int mSideRectWidth = 10;
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle

        //draw grey boxes
        setBackgroundColor(Color.parseColor("#808080"));
        int boxWidth = getWidth() / 7;


        for (int i = 0; i < 7; i++) {
            //draw black lines
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

            //draw text views
            canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
        }
    }
}

dieter_h · Accepted Answer · 2015-08-15T22:02:26.220

1

Try:

canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), (getHeight() / 2) + (valueInSp / 2), mTextPaint);

edited Aug 15 '15 at 22:02

answered Aug 15 '15 at 21:46

dieter_h

2,707
1
13
19

Cool. However if you have a look carefully, for some reason it is not exactly in the centre both horizontally & vertically. Please see latest screenshot. Do you what's gone wrong here? – wbk727 Aug 15 '15 at 21:52
`canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), (getHeight() / 2) + (valueInSp / 2), mTextPaint);` – dieter_h Aug 15 '15 at 22:01
`int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());` or make `privte` in ctr – dieter_h Aug 15 '15 at 22:09
Better solution is to make LinearLayout with 7 TextView `android:layout_weight = "1" gravity = "center"` – dieter_h Aug 15 '15 at 22:11
Can that be done in code using the canvas? I'm trying to keep the view count down as there is a limit of 80. – wbk727 Aug 15 '15 at 22:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87083/discussion-between-dieter-h-and-macaronlover). – dieter_h Aug 16 '15 at 08:00
Do you know what's I'm doing wrong in this [question?](http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top-of-existing-rectangle-in-canvas) I've added necessary code to my class file but the red rectangles are still not being drawn. I believe some code (possibly another loop) to resolve this is missing but I don't know what to add. – wbk727 Aug 17 '15 at 17:06

Text not appearing in centre of each grey rectangle

1 Answers1