Android ViewGroup.setScaleX() cause the view to be clipped

Question

I use NineOldAndroids library to scale my custom layout.

public class MyLayout extends FrameLayout {
  // LayoutParams.MATCH_PARENT and all.
  ...
  @Override
  public boolean setPositionAndScale(ViewGroup v, PositionAndScale pas, PointInfo pi) {
    ...
    mScale = pas.getScale();
    ViewHelper.setScaleX(this, mScale);
    ViewHelper.setScaleY(this, mScale);
  }
}

I have tried FrameLayout and AbsoluteLayout. All have the same effect. When mScale < 1.0 scaling/zooming works but part of the layout is clipped .

mScale = 1.0:

mScale < 1.0: scaling/zooming works but layout is clipped

How can i fix this issue?

Edit : The picture was taken on ICS. So I don't think it's NineOldAndroids problem.

Answer 1

The parent of your view must have the property android:clipChildren disabled (from layout file or with setClipChildren(false) ).

But with this method you don't get the touch events outside the view clip bounds. You can work around by sending them from your activity or writing a custom ViewGroup parent.

I'm using a different hack which seems to work in my case, the trick is to maintain your own transformation matrix. Then, you have to overload a lot of ViewGroup 's method to make it work. For example :

@Override
protected void dispatchDraw(Canvas canvas) {
    Log.d(TAG, "dispatchDraw " + canvas);
    canvas.save();
    canvas.concat(mMatrix);
    super.dispatchDraw(canvas);
    canvas.restore();       
}


@Override   
public boolean dispatchTouchEvent(MotionEvent ev) {
    Log.d(TAG, "dispatchTouchEvent " + ev);
    ev.transform(getInvMatrix()); // 
    return super.dispatchTouchEvent(ev);

}

private Matrix getInvMatrix()
{
    if(!mTmpMatIsInvMat)
        mMatrix.invert(mTmpMat);
    mTmpMatIsInvMat = true;
    return mTmpMat;
}

Answer 2

In case anyone got in to the same situation as me. I ended up using this approach:

protected void setScale(float scale, boolean updateView) {
    mScale = scale;
    if (updateView) {
        LayoutParams params = getLayoutParams();
        onUpdateScale(scale, params);
        setLayoutParams(params);
    }
}

protected void onUpdateScale(float scale, LayoutParams params) {
    params.leftMargin = (int) (mModel.getX() * scale);
    params.topMargin = (int) (mModel.getY() * scale);
    params.width = (int) (mModel.getWidth() * scale);
    params.height = (int) (mModel.getHeight() * scale);
}

Answer 3

Since API Level 11, the View class has setScaleX() and setScaleY() methods, that work as expected and also scale sub-views of the scaled view. So, if that'd be a way for you, drop the library and just do

v.setScaleX(mScale);
v.setScaleY(mScale);

Answer 4

If I understand your problem correctly, you are scaling a view group and expect the included views to scale accordingly. It doesn't work that way: you scale the view group and it changes size, but its children views do not.

Just scale all subviews. Even so, I am not sure that texts and images are going to be automatically scaled. What you want is zoom, not scale. Try this reference .

Answer 5

Use ViewGroup.layout. It may be the easiest way to scale(&move) ViewGroup.