Black line unexpectedly appearing in wrong place

Question

I created this drawing using the canvas but after doing so, for some reason I annoyingly get a black line appearing in-between the leftmost red rectangle & the grey rectangle containing the number 1. What can be done to get rid of that line?

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);

        String pageTitle = getResources().getString(R.string.app_name);
    }

    @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() - mSideRectWidth) / 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);
        }
    }
}

Answer 1

You don't want the "1st" black line, so skip the "0" index.. like so:

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

    for (int i = 0; i < 7; i++) {
        //draw text views
        canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
    }

That should help.

EDIT: Also, you did not account for the red line on the left, so you will not be "centered" (since there is a line on each side, you need to only reduce it by 1/2):

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

    for (int i = 0; i < 7; i++) {
        //draw text views
        canvas.drawText(Integer.toString(i + 1), (mSideRectWidth / 2) + (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
    }

Answer 2

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

You call drawLine 7 times, i = 0.1.2..6. Instead do it like this.

for (int i = 0; i < 7; i++) {
    //draw black lines
    if (i != 0) { // guards against the first line from ever being renderd
        canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
    }
...
}

And you will get rid of that line, as you do not want the first line to be drawn, you want it to act as a separator.

There are numerous other options such as making the pairs and linking them. You can guard against the last and draw the line after. This was the most simple solution that sprung to mind.

Answer 3

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

your loop draws 7 black lines, and I think you only want 6 lines by removing the first one far on the left.

try this:

for (int i = 0; i < 7; i++) {
        //draw black lines
        if(i>0)
        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);
    }