Question

I have a problem which bothers me for some time.

I have an imageView that I animate (move, scale and rotate on the X and Y axises) and it is inside a RelativeLayout. My animation is supposed to flip the imageView and scale it so that it will fill the screen with the imageView’s back-side solid color. Imagine something like having a sticker that has a solid grey color on its back side and that I want to be able to see this solid color when I flip the sticker.

The problem is that whatever I do, I can’t see that solid color.

I tried setting the background color of the imageView but it didn’t work.
I tried creating another Layout inside the parent Relativelayout and then setting the Layout’s background color, but it didn’t work.
I tried setting the background color of the parent RelativeLayout, but it didn’t work.

I am kinda stuck so I would really aprreciate any help or ideas that you can provide.

Thanks.

Update

Here is what I’m doing:

int[] location = {0, 0};
vg1.getLocationOnScreen(location);

newViewWidth = vg1.getRight() - vg1.getLeft();
newViewHeight = vg1.getBottom() - vg1.getTop();

newViewCenterX = newViewWidth/2;
newViewCenterY = newViewHeight/2;

screenWidth = root.getRight() - root.getLeft();
screenHeight = root.getBottom() - root.getTop();

ratioX = (float) screenWidth/newViewWidth;
ratioY = (float) screenHeight/newViewHeight;

rootCenterX = screenWidth/2;
rootCenterY = screenHeight/2;

newView = mInflater.inflate(R.layout.item, null);
LayoutParams lp = new LayoutParams(newViewWidth, newViewHeight);
lp.setMargins(10, 10, 10, 10);
newView.setLayoutParams(lp);

vg1.setVisibility(View.INVISIBLE);

root.addView(newView);

newView.bringToFront();

Log.d(tag, "View vg1 is at " + location[0] + ", " + location[1]);
Log.d(tag, "View vg1 is at top:" + vg1.getTop() + ", left:" + vg1.getLeft() + ", bottom:" + vg1.getBottom() + ", right:" + vg1.getRight());
Log.d(tag, "View vg1 has width " + newViewWidth + " and height " + newViewHeight + " and is centered at X " + newViewWidth/2 + " and Y " + newViewHeight/2);

root.getLocationOnScreen(location);
Log.d(tag, "Root is at " + location[0] + ", " + location[1]);
Log.d(tag, "Root is at top:" + root.getTop() + ", left:" + root.getLeft() + ", bottom:" + root.getBottom() + ", right:" + root.getRight());
Log.d(tag, "Root has width " + screenWidth + " and height " + screenHeight + " and is centered at X " + rootCenterX + " and Y " + rootCenterY);

Log.d(tag, "Root holder center X is at " + (root.getRight() - root.getLeft())/2 + ".");
Log.d(tag, "Root holder center Y is at " + (root.getBottom() - root.getTop())/2 + ".");


Log.d(tag, "RatioX: " + ratioX + ", ratioY: " + ratioY);

ObjectAnimator moveX = ObjectAnimator.ofFloat(newView, "translationX", 0f, rootCenterX - newViewCenterX).setDuration(2000);
ObjectAnimator moveY = ObjectAnimator.ofFloat(newView, "translationY", 0f, rootCenterY - newViewCenterY - 10).setDuration(2000);

ObjectAnimator scaleX = ObjectAnimator.ofFloat(newView, "scaleX", 1f, ratioX).setDuration(2000);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(newView, "scaleY", 1f, ratioY).setDuration(2000);

ObjectAnimator rotateX = ObjectAnimator.ofFloat(newView, "rotationX", 0f, -90f).setDuration(2000);
ObjectAnimator rotateY = ObjectAnimator.ofFloat(newView, "rotationY", 0f, -90f).setDuration(2000);
rotateX.addListener(new AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {}

    @Override
    public void onAnimationRepeat(Animator animation) {}

    @Override
    public void onAnimationEnd(Animator animation) {
        newView.findViewById(R.id.itemImage).setVisibility(View.GONE);
        newView.findViewById(R.id.colorfulBackground).setVisibility(View.VISIBLE);

        ObjectAnimator rotateX = ObjectAnimator.ofFloat(newView, "rotationX", -90f, -180f).setDuration(2000);
        ObjectAnimator rotateY = ObjectAnimator.ofFloat(newView, "rotationY", -90f, -180f).setDuration(2000);

        AnimatorSet animSet = new AnimatorSet();
        animSet.playTogether(rotateX, rotateY);

        animSet.start();
    }

    @Override
    public void onAnimationCancel(Animator animation) {}
});

AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(moveX, moveY, scaleX, scaleY, rotateX, rotateY);

animSet.start();

After aNi’s suggestion, it seems to do the trick.

There is another problem now though. Almost at the middle of the rotation, the view gets clipped for a split second and then comes back to normal.

Do you have any idea what it might be causing it ?
I am thinking that it might be the visible plane of the window or something similar but I don’t know what I should look for. Maybe something with the properties of the parent layout of the animated view ?

Answer 1

Here is an example of flip3d, provides capability of 3D flip- animated swap between two different views – back and front view. http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html