Multiple rectangles not drawing on canvas

Question

I am trying to create a family tree like structure in android. I am using canvas to draw rectangle and line for family members names and connecting line.

I am drawing rectangle and line by the following method with the help of link

DrawView.java

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

public class DrawView  extends View {
    Paint paint = new Paint();
    float mx,  my,  mdensity;
    Paint mBGPaint, mTXTPaint,mLINEPaint,mBRDPaint;
    String text;
    public DrawView(Context context, float x, float y, float density, String text) {
        super(context);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(8);
        paint.setStyle(Paint.Style.STROKE);

        mx = x;
        my = y;
        mdensity = density;
        this.text = text;
    }
    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        init();

        mLINEPaint.setStrokeWidth(8);

        //draw rect border
        canvas.drawRect(100, 100, 200, 200, mBRDPaint);
//        //draw text
        canvas.drawText(text, 150, 150, mTXTPaint);
//        //draw line

        float x = mx+150;

        canvas.drawLine(x, 10, x, 100, mLINEPaint);

    }
    public void init() {

        //rectangle background
        mBGPaint = new Paint();
        mBGPaint.setColor(Color.parseColor("#80123456"));

        //your text
        mTXTPaint = new Paint();
        mTXTPaint.setColor(Color.parseColor("#123456"));

        //your line
        mLINEPaint = new Paint();
        mLINEPaint.setColor(0xFFFF00FF);

        //rectangle border
        mBRDPaint = new Paint();
        mBRDPaint.setStyle(Paint.Style.STROKE);
        mBRDPaint.setStrokeWidth(10);
        mBRDPaint.setColor(Color.parseColor("#80123456"));
    }
}

Now I am trying to add multiple views in LinearLayout with orientation horizontal like below :

  float density = getApplicationContext().getResources().getDisplayMetrics().density;
  DrawView drawView;

  float x = 100, y = 200;
  int count1 = 1;
  int id;
  LinearLayout  layout2 = new LinearLayout(this);

  layout2.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  layout2.setOrientation(LinearLayout.HORIZONTAL);

  main_layout.addView(layout2);

  DrawView drawView1;
  CircleView circleView;
  for (Map.Entry<String, ArrayList<String>> entry : map.entrySet()) {

      String key = entry.getKey();
      if (count1 < 2) {
          x = dirButton.getX();
          y = dirButton.getY();
      }
      drawView1 = new DrawView(this, x, y, density, key);
      drawView1.setId(butId++);
      drawView1.setLayoutParams(params);
      layout2.addView(drawView1);

      count1++;
      x = x + 100;
  }

But when I do this only one view is added to the canvas and others are not visible. I have no experience in working with canvas in android , I would be glad if someone could guide me with this problem.

Bergama

Your canvas should be inside the view and you draw everything on the canvas via the onDraw() method. You shouldn't need multiple views on a canvas. Any time you have to update the canvas you can issue invalidate() call which will trigger onDraw(). – Nunez

I think both the rectangles are drawn at same xy .can you check that or make one of the view rectangle bigger than other and have different colors for the rectangle just to check whether both rectangles are drawn – Pyrenees

don't call your init() in onDraw – Selfinterest

Answer 1

I tried working on your project but it is too broad to edit on the answer sheet. I must suggest to look these:

1. Multiple rect.
2. Rectangle with view

Pneumo

Answer 2

  if (count1 < 2) {
      x = dirButton.getX();
      y = dirButton.getY();
  }

from the code line above, you set condition for when the line is executed.

and use if statement.

     int count1 = 1;  //Count was initialized to 1

This makes the code to enter the if statement on first call

    count1++;

This line increases the value of count to 2, hence the if block do not execute again...

And y value never change which leads to overlay.

May be what you missed is regular increament of y

   y+=something;

Hope that helps

Bookworm

Answer 3

Please check how i have done this, You can check from here form myapp, how it work

// How i call to draw rectangle

This is the SDV.class

public static boolean isDrawing = false;

public static float mStartX;
public static float mStartY;

public static float mx;
public static float my;

public static void Shape14(float x, float y, float radius) {
    Path path = new Path();
    y -= 2 * radius;
    radius *= 2;
    path.moveTo(x + radius, y + radius);
    path.lineTo(x - radius, y + radius);
    path.lineTo(x, y);
    path.lineTo(x + radius, y + radius);
    float div = (2 * radius) / 5;
    float top = y + radius;
    RectF rect1 = new RectF(x + radius / 4, y, x + radius / 1.9f, y
            + radius);
    RectF rect2 = new RectF(x + div / 2, top, x + div / 2 + div, top + div
            * 2);
    RectF rect3 = new RectF(x - div / 2 - div, top, x - div / 2, top + div
            * 2);
    RectF rect4 = new RectF(x - div / 2, top, x + div / 2, top + div);

    HashMap<String, Object> hm = new HashMap<String, Object>();
    hm.put("type", shape14);
    hm.put("paint", new Paint(DrawingView.mColorPaint));
    hm.put("path", path);

    hm.put("rect1", rect1);
    hm.put("rect2", rect2);
    hm.put("rect3", rect3);
    hm.put("rect4", rect4);
    al.add(hm);
    Gmap.mDrawingView.invalidate();
}

Here is our view,

public class DrawingView extends View {

public static Paint mPaint;
public static int mCurrentShape;
Point p1, p2, p3, p4;

public static Paint mDotedPaint;
public static Paint mColorPaint;

GoogleMap googleMap;
SeekBar sbWidth;
public static float sx, sy;

public DrawingView(Context context, GoogleMap googleMap, SeekBar sbWidth) {
    super(context);
    this.googleMap = googleMap;
    this.sbWidth = sbWidth;

    mPaint = new Paint(Paint.DITHER_FLAG);
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(SDV.colorChoosen);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(SDV.width);

    mDotedPaint = new Paint(Paint.DITHER_FLAG);
    mDotedPaint.setAntiAlias(true);
    mDotedPaint.setDither(true);
    mDotedPaint.setColor(SDV.colorChoosen);

    mDotedPaint.setStyle(Paint.Style.STROKE);
    mDotedPaint.setStrokeJoin(Paint.Join.ROUND);
    mDotedPaint.setStrokeCap(Paint.Cap.ROUND);
    mDotedPaint.setStrokeWidth(SDV.width);

    mColorPaint = new Paint(Paint.DITHER_FLAG);
    mColorPaint.setAntiAlias(true);
    mColorPaint.setDither(true);
    mColorPaint.setFilterBitmap(true);
    mColorPaint.setStyle(Paint.Style.FILL);
    mColorPaint.setStrokeWidth(SDV.width);
    mColorPaint.setColor(SDV.colorChoosen);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    sx = super.getWidth() * 0.5f;
    sy = super.getHeight() * 0.5f;

    if (SDV.isDrawing) {
        new OnGoingDrawings().HandleAllOnGoingDrawings(mCurrentShape,
                canvas);
    } else {
        new ShapeDrawer().DrawEverything(canvas, googleMap, sbWidth);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    SDV.mx = event.getX();
    SDV.my = event.getY();
    switch (mCurrentShape) {
    case SDV.shape14:
        TouchEvents.Shape14(event);
        break;

    return true;
}

}

Here is touch listener,

 public static void Shape14(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        SDV.isDrawing = true;
        SDV.mStartX = SDV.mx;
        SDV.mStartY = SDV.my;
        Gmap.mDrawingView.invalidate();
        break;
    case MotionEvent.ACTION_MOVE:
        Gmap.mDrawingView.invalidate();
        break;
    case MotionEvent.ACTION_UP:
        SDV.isDrawing = false;
        float x = SDV.mStartX,
        y = SDV.mStartY;
        float DifX = Math.abs(SDV.mx - SDV.mStartX);
        float DifY = Math.abs(SDV.my - SDV.mStartY);
        float radius;
        if (DifY > DifX)
            radius = Math.abs(SDV.my - SDV.mStartY);
        else
            radius = Math.abs(SDV.mx - SDV.mStartX);
        SDV.Shape14(x, y, radius);
        break;
    }
}

Gigantic