How make a Layout center with 3 view

Question

I would make that:

How do you do that? I have fixed the position of draws, Is there an other method with TableLayout for example because i would integrated drawing with other views. Thank you.

public class CaseView extends View {

private static final float MINP = 1f;
private static final float MAXP = 1f;

private Bitmap mBitmap1, mBitmap2, mBitmap3, _scratch1 = null,
        _scratch2 = null;
private Canvas mCanvas1;
private Canvas mCanvas2, mCanvas3;
private Path mPath1, mPath2;
private Paint mBitmapPaint1;
private Paint mBitmapPaint2, mBitmapPaint3;
private Paint mPaint1;
private Paint mPaint2, mPaint3;
private int IdImage;
private int positionTop = 0;
private int positionLeftOne = 0;
private int positionLeftTwo = 0;
private int positionLeftThree = 0, mHeightCase = 100,
        widthBetweenCase = 0;
private String colorGold = "#E29F2B";
private boolean firstTime = false;

// private Bitmap image;
// private Paint paint;

boolean isErase;

public CaseView(Context ctx, AttributeSet attrs) {
    super(ctx, attrs);
}

public CaseView(Context c, int resId, DisplayMetrics metrics) {
    super(c);

    this.positionTop = metrics.heightPixels / 2 - mHeightCase / 2;
    int weightRest = metrics.widthPixels - 3 * mHeightCase;
    this.widthBetweenCase = weightRest / 4;
    this.positionLeftOne = widthBetweenCase;
    this.positionLeftTwo = (widthBetweenCase * 2) + mHeightCase;
    this.positionLeftThree = (widthBetweenCase * 3) + mHeightCase * 2;
    firstTime = true;

    mPaint1 = new Paint();
    // mPaint1.setAntiAlias(true);
    // mPaint1.setDither(true);
    mPaint1.setColor(Color.TRANSPARENT);
    mPaint1.setStyle(Paint.Style.STROKE);
    mPaint1.setStrokeWidth(60);

    mPaint2 = new Paint();
    // mPaint2.setAntiAlias(true);
    // mPaint2.setDither(true);
    mPaint2.setColor(Color.TRANSPARENT);
    mPaint2.setStyle(Paint.Style.STROKE);
    mPaint2.setStrokeWidth(60);

    // create a square
    mBitmap1 = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    for (int i = 0; i < 100; i++) {
        for (int j = 0; j < 100; j++) {
            mBitmap1.setPixel(i, j, Color.parseColor(colorGold));
        }

    }
    mBitmap2 = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    for (int i = 0; i < 100; i++) {
        for (int j = 0; j < 100; j++) {
            mBitmap2.setPixel(i, j, Color.parseColor(colorGold));
        }

    }

    mCanvas1 = new Canvas(mBitmap1);
    mCanvas2 = new Canvas(mBitmap2);
    mPath1 = new Path();
    mPath2 = new Path();
    mBitmapPaint1 = new Paint(Paint.DITHER_FLAG);
    mBitmapPaint2 = new Paint(Paint.DITHER_FLAG);
    mBitmapPaint3 = new Paint(Paint.DITHER_FLAG);
    IdImage = resId;
    if (_scratch1 == null) {
        _scratch1 = BitmapFactory.decodeResource(getResources(), IdImage);
    }
    if (_scratch2 == null) {
        _scratch2 = BitmapFactory.decodeResource(getResources(), IdImage);
    }

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

}

@Override
protected void onDraw(Canvas canvas) {
    Log.v("", "onDraw");

    canvas.drawColor(Color.WHITE);
    // first case
    canvas.drawBitmap(_scratch1, positionLeftOne, positionTop, null);
    canvas.drawBitmap(mBitmap1, positionLeftOne, positionTop,
            mBitmapPaint1);
    // canvas.drawBitmap(mBitmap1, null, new Rect(0,0,100,100),
    // mBitmapPaint1);

    // second case
    canvas.drawBitmap(_scratch2, positionLeftTwo,
            positionTop, null);
    canvas.drawBitmap(mBitmap2, positionLeftTwo,
            positionTop, mBitmapPaint2);

    // mBitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);

    if ((mX < mHeightCase + positionLeftOne && mX >= positionLeftOne)
            && (mY < positionTop + mHeightCase && mY >= positionTop)) {
        // Log.v("onDraw", "x:" + mX + "/y:" + mY);
        mPaint1.setMaskFilter(null);
        mPath1.reset();
        Log.v("first case","clear at"+mX);
        mPaint1.setXfermode(new PorterDuffXfermode(Mode.CLEAR));

        // mBitmap.setPixel((int) mY,(int) mX, Color.TRANSPARENT);
        // mBitmap1.eraseColor(Color.TRANSPARENT);
        mCanvas1.setBitmap(mBitmap1);

        canvas.drawBitmap(mBitmap1, positionLeftOne, positionTop, mBitmapPaint1);
        invalidate();

    } else if ((mX < positionLeftTwo+mHeightCase && mX >= positionLeftTwo)
            && (mY < positionTop + mHeightCase && mY >= positionTop)) {
        // Log.v("onDraw", "x:" + mX + "/y:" + mY);
        mPaint2.setMaskFilter(null);
        mPath2.reset();
        mPaint2.setXfermode(new PorterDuffXfermode(Mode.CLEAR));

        // mBitmap.setPixel((int) mY,(int) mX, Color.TRANSPARENT);

        mCanvas2.setBitmap(mBitmap2);

        canvas.drawBitmap(mBitmap2, positionLeftTwo, positionTop, mBitmapPaint2);
        invalidate();

    } else {
        mPaint1.setXfermode(null);
        mPaint2.setXfermode(null);
    }

    super.onDraw(canvas);

    int pixelColor = mBitmap1.getPixel(50, 50);
    int red = Color.red(pixelColor);
    int green = Color.green(pixelColor);
    Log.v("red", "red:" + red + " /green:" + green);

    //invalidate();
}

private Bitmap prepareBitmap(Drawable drawable, int width, int height) {
    Bitmap bitmap = Bitmap.createBitmap(width, height,
            Bitmap.Config.ARGB_8888);
    drawable.setBounds(0, 0, width, height);
    Canvas canvas = new Canvas(bitmap);
    drawable.draw(canvas);
    return bitmap;
}

private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;

private void touch_start(float x, float y) {
    mPath1.reset();
    mPath1.moveTo(x, y);
    mPath2.reset();
    mPath2.moveTo(x, y);
    mX = x;
    mY = y;
}

private void touch_move(float x, float y) {
    float dx = Math.abs(x - mX);
    float dy = Math.abs(y - mY);

    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        mPath1.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mPath2.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mX = x;
        mY = y;
    }
}

private void touch_up() {
    mPath1.lineTo(mX, mY);
    mPath2.lineTo(mX, mY);
    // commit the path to our offscreen
    mCanvas1.drawPath(mPath1, mPaint1);
    mCanvas2.drawPath(mPath2, mPaint2);
    // kill this so we don't double draw
    mPath1.reset();
    mPath2.reset();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    Log.v("onTouchEvent", "x:" + x + "/y:" + y);

    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        if ((mX < positionLeftOne+mHeightCase && mX >= positionLeftOne)
                && (mY < positionTop + mHeightCase && mY >= positionTop)) {
            mPath1.reset();
            mPaint1.setMaskFilter(null);
            mPaint1.setStrokeWidth(90);
            mPaint1.setXfermode(new PorterDuffXfermode(Mode.CLEAR));

            // mCanvas1.draw(x, y, 10, mPaint1);
            isErase = true;
        } else {
            mPaint1.setXfermode(null);
            isErase = false;
        }

        touch_start(x, y);
        invalidate();
        break;
    case MotionEvent.ACTION_MOVE:
        if (isErase) {
            mCanvas1.drawCircle(x, y, 20, mPaint1);
        }
        touch_move(x, y);
        invalidate();
        break;
    case MotionEvent.ACTION_UP:
        if (isErase) {
            mCanvas1.drawCircle(x, y, 20, mPaint1);
        }
        touch_up();
        invalidate();
        break;
    }
    return true;
      }

         }

Answer 1

Not quite sure what your actual question is.

If you simply wanna reach a view as in the image you'd be better off simply having a view in XML.

Create a horizontal LinearLayout, with 3 custom squares included and use the android:layout_weight attribute to let them fill up the space by themselves.