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.

Something like MapView. That the layout (`MyLayout`) fill the whole screen and not clipped like in the 2. pic. LayoutParam of MyLayout are set match_parent. — user802421, Sep 13 '12 at 08:44

score 4 · Answer 1 · answered May 14 '14 at 10:19

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

You can get the matrix from the view. view.getMatrix() then invert it, m.invert(m) and use that to scale the motion event. — Tatarize, Feb 26 '15 at 07:07
I tried a few different hacks from fake views that simply relayed the raw touch that then got transformed by the views matrix. And the only thing that ever worked consistently on all hardware I have access to is maintaining my own matrix and using that to transform the motionevents, the view, and the invalidate rectangles. — Tatarize, Mar 02 '15 at 15:54

score 3 · Accepted Answer · answered Nov 13 '12 at 22:12

3

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

answered Nov 13 '12 at 22:12

user802421

7,465
5
40
63

Is this approach fast? I mean, are you making too many updates using something like a gesture to scale, or you only scale once at the time? – Jorge Gil Jul 06 '13 at 01:09
I didn't run benchmarks or traceview yet, but it does work fine on Xoom 1 and Nexus S. The requirements was that moving and scaling needs to happen continuously (like Google Maps) and not once the interaction is over (like zooming OSMTracker). – user802421 Jul 06 '13 at 09:26
So, no flickering? (+1 if you answer no :-) ) – Jorge Gil Jul 06 '13 at 22:13
Unfortunately it does flickering sometimes (zooming only). If you solve that please add another answer here :) – user802421 Jul 07 '13 at 12:28

score 1 · Answer 3 · answered Sep 14 '12 at 05:42

1

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

answered Sep 14 '12 at 05:42

Ridcully

23,362
7
71
86

I tried that before. It has the same clipping effect. In fact the library is just a proxy. On ICS the NineOldAndroids just call the same method. – user802421 Sep 14 '12 at 14:36

score 0 · Answer 4 · answered Sep 13 '12 at 18:35

0

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.

answered Sep 13 '12 at 18:35

alexfernandez

1,938
3
19
30

What is the difference between zoom and scale? The pic 2 shows that zooming/scaling works (mScale ~0.8). It's just that the ViewGroup is clipped. – user802421 Sep 13 '12 at 18:56
I retire my answer then, sorry for the noise. – alexfernandez Sep 14 '12 at 09:07

score 0 · Answer 5 · answered Jan 23 '13 at 15:10

0

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

answered Jan 23 '13 at 15:10

user2004401

1

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

5 Answers5

Linked