CODEWITHSUNDEEP
javaandroidbitmapandroid-canvas
user2940365
user2940365

Reputation:

How can I draw several rectangles in a row programmatically?

I want to put several rectangle i a row. But because I'm new to Android and specially to Bitmap, Canvas and so on, I need some help.

It should look like this, only with rectangles:

enter image description here

I have created one rectangle with this code:

        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#CD5C5C"));
        Bitmap bg = Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bg); 
        canvas.drawRect(50, 80, 200, 200, paint); 
        RelativeLayout ll = (RelativeLayout) findViewById(R.id.rect);

        ImageView iV = new ImageView(this);
        iV.setImageBitmap(bg);

        ll.addView(iV);

But now I dont know how to create more rectangles with different colors in a row. I'm really new and sorry for that maybe stupid question but I need help for it.

Can anybody guide me how to do this in the best way?

Upvotes: 4

Views: 9599

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48743

This should do it. I tried to self-document my code as mush as possible. This is very dynamic i.e. you can adjust the height, width, xPad, yPad, etc. and the window will compensate.

enter image description here

import java.awt.*;
import java.util.Random;
import javax.swing.*;

public class RectanglesPanel extends JPanel {    
    public static final int[] COLORS = new int[] {
        0xFFFFFF, 0xF67457, 0xFFC238, 0xEFEF38,
        0xBCCACA, 0x75D1E0, 0x84E0C2, 0xC2E749
    };

    private static Random rand = new Random();
    private int width = 80;
    private int height = 50;
    private int rows = 2;
    private int cols = 4;
    private int xPad = 20;
    private int yPad = 30;
    private float strokeWidth = 2.0f;

    int windowWidth = calculateOffset(width, cols, xPad);
    int windowHeight = calculateOffset(height, rows, yPad);

    public RectanglesPanel() {
        setPreferredSize(new Dimension(windowWidth, windowHeight));
    }

    private int calculateOffset(int whole, int partitions, int padding) {
        return (whole * partitions) + (padding * (partitions + 1));
    }

    @Override
    public void paintComponent(Graphics g) {
        Stroke stroke = new BasicStroke(strokeWidth,
                BasicStroke.CAP_SQUARE, BasicStroke.JOIN_MITER);
        ((Graphics2D)g).setStroke(stroke);

        // Fill in background.
        g.setColor(new Color(0xF6F6F6));
        g.fillRect(0, 0, windowWidth, windowHeight);

        for (int row = 0; row < rows; row++) {
            for (int col = 0; col < cols; col++) {
                int x = calculateOffset(width, col, xPad);
                int y = calculateOffset(height, row, yPad);
                int color = (row * cols + col) % COLORS.length;

                // Fill in rectangle.
                g.setColor(new Color(COLORS[color]));
                g.fillRect(x, y, width, height); 

                // Stroke the border of the rectangle.
                g.setColor(new Color(0xE7E7E7));
                g.drawRect(x, y, width, height);
            }
        }
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame();
        JPanel panel = new RectanglesPanel();

        frame.setContentPane(panel);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

Upvotes: 1

Husman
Husman

Reputation: 6909

The key here are these lines:

paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawRect(50, 80, 200, 200, paint);

They set the colour and draw a rectangle. You can now repeat these lines to get 2 rectangles:

paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawRect(50, 80, 200, 200, paint);
paint.setColor(Color.parseColor("#DDDDDD"));
canvas.drawRect(210, 80, 360, 200, paint);

Note that I have changed the colour and co-ordinates a little bit. You could continue doing this several times to get all of your rectangles drawn.

Better still use a variable for the x and y coordinates, and use a loop:

int left = 50; // initial start position of rectangles (50 pixels from left)
int top = 50; // 50 pixels from the top
int width = 150;
int height = 150;
for (int row = 0; row < 2; row++) { // draw 2 rows
    for(int col = 0; col < 4; col++) { // draw 4 columns
        paint.setColor(Color.parseColor("#CD5C5C"));
        canvas.drawRect(left, top, left+width, top+height, paint);
        left = (left + width + 10); // set new left co-ordinate + 10 pixel gap
        // Do other things here
        // i.e. change colour
    }
    top = top + height + 10; // move to new row by changing the top co-ordinate
}

Hope that helps.

Upvotes: 2

wudpecker
wudpecker

Reputation: 406

use for loop keeping the y coordinates constant

for(i=0;i<=200;i=i+40)
{
 canvas.drawRect(i,0,i+30,100);
}

for next row increase y coordinate by your require amount and repeat the same or use nested for loops

you can set color by

myPaint.setColor(color.black);
myPaint.setStyle(Style.FILL);
canvas.drawRect(0,0,100,100, myPaint);

Upvotes: 0

Related Questions