Scaling FrameLayout using gestures

Question

I am trying to make two(or more) movable TextViews and make the whole set scalable using pinch-to-zoom. I have custom layout extending from FrameLayout:

public class BublinkyLayout extends FrameLayout {
private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;
private float scale = 1;

public BublinkyLayout(Context context) {
    this(context, null, 0);
}

public BublinkyLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public BublinkyLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setWillNotDraw(false);
    mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}

public void setScale(float scale) {
    this.scale = scale;
    invalidate();
}

public float getScale() {
    return this.scale;
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.scale(scale, scale);
    super.onDraw(canvas);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    mScaleDetector.onTouchEvent(event);
    final int action = MotionEventCompat.getActionMasked(event);
    switch (action) {
        case MotionEvent.ACTION_MOVE:
            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) this.getLayoutParams();
            this.setScale(mScaleFactor);
            this.setLayoutParams(layoutParams);
            this.invalidate();
            break;
    }
    return true;
}
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        mScaleFactor *= detector.getScaleFactor();

        mScaleFactor = Math.max(0.3f, Math.min(mScaleFactor, 1.5f));

        invalidate();
        return true;
    }
}
}

But when I use the 'pinch-to-zoom' and zoom out, the child TextViews don't have the 'touch zone' (the zone where I can touch them and move them around) alligned with them. It looks like the layout is scaled, but the area is still the same, meaning I cant get them out of the original box.

Here is OnTouchListener I use to move the TextViews around:

public class BublinkaOnTouchListener implements View.OnTouchListener {
private int _xDelta;
private int _yDelta;

@Override
public boolean onTouch(View view, MotionEvent event) {
    final int X = (int) event.getRawX();
    final int Y = (int) event.getRawY();
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            FrameLayout.LayoutParams lParams = (FrameLayout.LayoutParams) view.getLayoutParams();
            _xDelta = X - lParams.leftMargin;
            _yDelta = Y - lParams.topMargin;
            break;
        case MotionEvent.ACTION_UP:
            break;
        case MotionEvent.ACTION_POINTER_DOWN:
            break;
        case MotionEvent.ACTION_POINTER_UP:
            break;
        case MotionEvent.ACTION_MOVE:
            FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) view.getLayoutParams();
            layoutParams.leftMargin = X - _xDelta;
            layoutParams.topMargin = Y - _yDelta;
            layoutParams.rightMargin = -250;
            layoutParams.bottomMargin = -250;
            view.setLayoutParams(layoutParams);
            view.invalidate();
            break;
    }
    return true;
}
}

Thanks for every answer.

PS: English is not my native language so sorry for mistakes :)

Answer 1

Found an answer that mostly solves my issue.

It is not my final solution but it really helps solve this problem.