Draw multiple rectangles with dividers in-between

Question

I'm trying to draw the image below but I'm not sure as to how to draw the grey and black rectangles. The red rectangles I've done perfectly hence would be grateful for someone to tell me hat can be done to achieve the following:

7 grey rectangles to be the same width
6 black rectangles to be 1px each
all of the above to be drawn in between the red rectangles so that it looks exactly like the image blow.

Please try to avoid using pixel numbers for the x position of the grey and black rectangles if you can as I want the drawing to look the same for all screen sizes.

All help would be highly appreciated.

Many thanks in advance.

What I'm trying to achieve enter image description here

What I've achieved so far enter image description here

Project code

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //red shapes
        mRedRect0F = new RectF(0, 0, 10, measuredHeight);
        mRedRect1F = new RectF(getWidth() - 10, 0, getWidth(), getHeight());

        //grey shapes
        mGreyRect0F = new RectF(10, 0, getWidth() / 7, measuredHeight);
        mGreyRect1F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect2F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect3F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect4F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect5F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect6F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);

        //black shapes
        mBlackRect0F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect1F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect2F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect3F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect4F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect5F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect6F = new RectF(0, 0, 1, measuredHeight);


        //draw red shapes
        canvas.drawRect(mRedRect0F, mRedRectPaint);
        canvas.drawRect(mRedRect1F, mRedRectPaint);

        //draw grey shapes
        canvas.drawRect(mGreyRect0F, mGreyRectPaint);
        canvas.drawRect(mGreyRect1F, mGreyRectPaint);
        canvas.drawRect(mGreyRect2F, mGreyRectPaint);
        canvas.drawRect(mGreyRect3F, mGreyRectPaint);
        canvas.drawRect(mGreyRect4F, mGreyRectPaint);
        canvas.drawRect(mGreyRect5F, mGreyRectPaint);
        canvas.drawRect(mGreyRect6F, mGreyRectPaint);

        //draw black shapes
        canvas.drawRect(mBlackRect0F, mGreyRectPaint);
        canvas.drawRect(mBlackRect1F, mGreyRectPaint);
        canvas.drawRect(mBlackRect2F, mGreyRectPaint);
        canvas.drawRect(mBlackRect3F, mGreyRectPaint);
        canvas.drawRect(mBlackRect4F, mGreyRectPaint);
        canvas.drawRect(mBlackRect5F, mGreyRectPaint);
        canvas.drawRect(mBlackRect6F, mGreyRectPaint);
    }

Can be easily achieved using a LinearLayout in conjunction with weights and horizontal orientation. — Skynet, May 13 '15 at 12:15
Need to see how it's done / prefer to do it programmatically (as I'll be using this with other components in my activity). Bear in mind that other rectangles and text will be drawn on top of this in the near future — wbk727, May 13 '15 at 12:17
Please have a look at this image and tell me if the same would apply for that as this what I'm trying to achieve. [link to desired image](http://stackoverflow.com/questions/30113281/draw-multi-object-diagram-in-fragment?noredirect=1#comment48450263_30113281) — wbk727, May 13 '15 at 12:21
You dont even need the dividers, just set background black and give a margin of 1-2dp between each rectangle on left. That is if you go with the xml way. I would refrain posting xml as you specify that you need it to be done programatically. — Skynet, May 13 '15 at 12:21
I don't mind XML also but I'd need to see how it is done + my background will be white anyway hence I would prefer to have dividers — wbk727, May 13 '15 at 12:23
yes it's possible give me some time i will post answer for you.. — Jignesh Jain, May 13 '15 at 12:26

score 2 · Accepted Answer · answered May 13 '15 at 12:36

Your approch with Rect is maybe too much, if you want to do it with code, something like this should do the job:

public class Rectangle extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();
    private int mSideRectWidth = 10;

    public Rectangle(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBackPaint.setColor(Color.BLACK);
        mRedPaint.setColor(Color.RED);
        mSideRectWidth = context.getResources().getDimensionPixelSize(R.dimen.side_rect_width);
    }

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

        setBackgroundColor(Color.GRAY);

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

        //draw left rectangle
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint);

        //draw right rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint);
    }
}

Many thanks for your answer. Yours proved to be the best as the other 2 cause a 'too many views' warning. Do you know a proper solution for solving [this other issue?](http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top-of-existing-rectangle-in-canvas) I've spent months trying to solve this issue but have had no luck and the answers that have been given don't solve the problem either. — wbk727, Aug 19 '15 at 18:31

Jignesh Jain · Answer 2 · 2015-05-13T13:00:44.373

here is full fledged answer it is perfect for you,

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@android:color/black" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="1" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@android:color/black" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="1" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="2" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="3" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="4" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="5" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="6" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="7" />

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

</LinearLayout>

Brilliant. What about putting stuff on top just like in the this image?: [link to desired image](http://stackoverflow.com/questions/30113281/draw-multi-object-diagram-in-fragment?noredirect=1#comment48450263_30113281) — wbk727, May 13 '15 at 12:40
red rectangle is image and how many red rectangle in one box?? — Jignesh Jain, May 13 '15 at 12:42
It needs to look exactly like the drawing you see in that question — wbk727, May 13 '15 at 12:46
ok actully i'm leaving for the day but give me some time i will do it for you. — Jignesh Jain, May 13 '15 at 12:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77718/discussion-between-jignesh-jain-and-macaronlover). — Jignesh Jain, May 13 '15 at 13:00
Do you know a proper solution for solving [this other issue programmatically (in Java using canvas not XML)?](http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top-of-existing-rectangle-in-canvas) I've spent months trying to solve this issue but have had no luck and the answers that have been given don't solve the problem either. — wbk727, Aug 19 '15 at 18:29

score 0 · Answer 3 · answered May 13 '15 at 12:27

Here is a small smaple, This is not a full fledged answer but should be helpful to grasp the idea. Please modify according to your needs:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="horizontal" >

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

</LinearLayout>

Do you know a proper solution for solving [this other issue programmatically (in Java using canvas not XML)?](http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top-of-existing-rectangle-in-canvas) I've spent months trying to solve this issue but have had no luck and the answers that have been given don't solve the problem either. — wbk727, Aug 19 '15 at 18:29

Draw multiple rectangles with dividers in-between

3 Answers3