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.

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

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

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