How to rotate a RelativeLayout by 180 degrees?

Question

I am trying to make an application, which is meant for two people and both see one half of it, so I need to flip one half vertically. I am using a LinearLayout with two RelativeLayouts inside it with layout_weight="1".

Thing is, I am not sure how to do this flip. Apparently android:rotate is only available in version 11+ (3.0+), but I would like it to support at least 2.2.

After reading other related questions on SO, I tried various things, none of which seem to work. I tried to extend the RelativeLayout and override the onDraw function, but it doesn't seem to do anything. Here's my code:

public class FlippedRelativeLayout extends RelativeLayout
{
    public FlippedRelativeLayout(Context context)
    {
        super(context);
    }

    public FlippedRelativeLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public FlippedRelativeLayout(Context context, AttributeSet attrs,
            int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        canvas.rotate(180);
        super.onDraw(canvas);
        canvas.restore();
    }
}

I will be glad for any help, thanks!

Answer 1

Try this:

public class MyRelativeLayout extends RelativeLayout {    
    public MyRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyRelativeLayout(Context context) {
        super(context);
        init();
    }

    private void init() {
        setStaticTransformationsEnabled(true);
    }

    @Override
    protected boolean getChildStaticTransformation(View child, Transformation t) {
        t.setTransformationType(Transformation.TYPE_MATRIX);
        Matrix m = t.getMatrix();
        m.reset();
        m.postRotate(180, child.getWidth() / 2.0f, child.getHeight() / 2.0f);
        return true;
    }
}

The result is: