Strange behaviour when adding and animating imageViews in android

Question

I've got a LinearLayout with a background bitmap. I'm adding 2-3 images to this layout with an animation. The problem is: everytime im adding images the FIRST image animation starts from the top left corner, for every other image directly after that animation it works just fine from the center. Im struggling for days to find a solution for this little annoying problem. Do u have any advise what could cause this?

Here my problem in a gif I made: http://imgur.com/FCPgof1

my animation:`

<scale
    android:duration="750"
    android:fillAfter="false"
    android:fromXScale="0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0" />

`

my layout:

<LinearLayout
   android:id="@+id/layoutCompareUppoints"
   android:layout_width="140dp"
   android:layout_height="28dp"
   android:background="@drawable/uppballsbgnew" >
</LinearLayout>

my code: `private void animUppointsBefore() {

    if (k < Integer.valueOf(uppoints)) {

        Animation a = AnimationUtils.loadAnimation(this,
                R.anim.debug_grow_fast_animation);


    ImageView upp = new ImageView(this);
    upp.setImageResource(R.drawable.uppballlightnew);
    upp.setAdjustViewBounds(true);
    uppLayout.addView(upp);
    upp.startAnimation(a);
    a.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation a) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationRepeat(Animation a) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation a) {
            // TODO Auto-generated method stub

            k++;
            animUppointsBefore();

        }
    });

    }

}`

Answer 1

The issue you're most likely seeing is the image is getting added to the layout before any animation actually takes place. The image is going to start full size, shrink down to 0, then grow up to 1.

What you want to do is make it invisible before you add it then make it appear off screen. A couple of methods you can do, the usual way is to set the ImageView to View#INVISIBLE then with an Animation#AnimationListener , set the view to View#VISIBLE on animation start.

If you can, using Animators are way easier (There are some libraries in the support library that don't allow this). You can set the View's Alpha to 0 before adding it, then just set it to 1 instantly as part of the animation. Just make two ObjectAnimators , one for alpha and one for scale, then combine them in to a single AnimatorSet .

EDIT:

To put the final answer from comments to here.

Rather than adding the views just before animating, it may help to put the image views already laid out in the layout but invisible. That way, there doesn't need to be a new layout and measure pass that could be screwing up the measurements to the pivot point.