How to draw a custom square in Android?

Question

I want to make a custom color box, that can either contain one or two colors (see image as example)

enter image description here

I have heard about the onDraw method, but never worked with it, and i don't know how to make it from the activity.. Anyone that could give me a hint of where to start??.

-Thanks

Make a class that extends View. Initialize it whit your colors, shapes, whatever... When the initialization is finished call invalidate() method. This will make your @Override public void onDraw(Canvas canvas) get called. Inside it, you can create two Paths and fill them with the colors you want. — Luciano Rodríguez, Jul 02 '14 at 18:51

score 0 · Answer 1 · answered Jul 02 '14 at 18:51

This is my code :D Canvas

 import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawView extends View {
    Paint paint = new Paint();

    public DrawView(Context context) {
        super(context);            
    }

    @Override
    public void onDraw(Canvas canvas) {
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(3);
        canvas.drawRect(30, 30, 80, 80, paint);
        paint.setStrokeWidth(0);
        paint.setColor(Color.CYAN);
        canvas.drawRect(33, 60, 77, 77, paint );
        paint.setColor(Color.YELLOW);
        canvas.drawRect(33, 33, 77, 60, paint );

    }

}

and to on create add this

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

//this
    drawView = new DrawView(this);
    drawView.setBackgroundColor(Color.WHITE);
    setContentView(drawView);

}

Ahh, i already saw an example like that here: http://stackoverflow.com/a/7345477/1842694 But i need to use path in order to draw the triangles, thanks anyway :) — Ibrahim Yildirim, Jul 02 '14 at 20:10

score 0 · Accepted Answer · answered Jul 02 '14 at 20:13

I found a solution, here's what i ended up with. Takes a ArrayList of Colors as parameter, and if the arraylist have more than one color it draws two triangles with each color. If not it makes a square with the first color

public class ColorBox extends View {

Paint paint = new Paint();
String color1;
String color2;

public ColorBox(Context context, ArrayList<String> colors) {
    super(context);

    if(colors.size() == 1){
        color1 = colors.get(0);
    }
    else{
        color1 = colors.get(0);
        color2 = colors.get(1);
    }
}

@Override
public void onDraw(Canvas canvas) {

    Point topLeft = new Point(7, 7);
    Point topRight = new Point(7, 62);
    Point bottomLeft = new Point(62, 7);
    Point bottomRight = new Point(62, 62);

    //This draw a thin line around the border, with line width 1
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(1f);
    canvas.drawRect(5, 5, 65, 65, paint);


    paint.setColor(Color.parseColor(color1));
    paint.setStrokeWidth(1);
    paint.setStyle(Paint.Style.FILL);

    if(color2 != null && !color2.isEmpty()) //Two Colors
    {
        //Draw Top Left Color
        Path path1 = new Path();
        path1.setFillType(Path.FillType.EVEN_ODD);
        path1.moveTo(topLeft.x, topLeft.x);
        path1.lineTo(topRight.x, topRight.y);
        path1.lineTo(bottomLeft.x, bottomLeft.y);
        path1.lineTo(topLeft.x, topLeft.y);
        path1.close();
        canvas.drawPath(path1, paint);

        //Draw Bottom Right Color
        paint.setColor(Color.parseColor(color2));
        Path path2 = new Path();
        path2.setFillType(Path.FillType.EVEN_ODD);
        path2.moveTo(topRight.x, topRight.y);
        path2.lineTo(bottomLeft.x, bottomLeft.y);
        path2.lineTo(bottomRight.x, bottomRight.y);
        path2.lineTo(topRight.x, topRight.y);
        path2.close();
        canvas.drawPath(path2, paint);
    }
    else {

        canvas.drawRect(topLeft.x, topLeft.y, bottomRight.x, bottomRight.y, paint);
    }
}

How to draw a custom square in Android?

2 Answers2