Android Scale Animation on View

Android scale animation on view

Here is a code snip to do exactly that.

public void scaleView(View v, float startScale, float endScale) {
    Animation anim = new ScaleAnimation(
            1f, 1f, // Start and end values for the X axis scaling
            startScale, endScale, // Start and end values for the Y axis scaling
            Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling
            Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling
    anim.setFillAfter(true); // Needed to keep the result of the animation
    anim.setDuration(1000);
    v.startAnimation(anim);
}

The ScaleAnimation constructor used here takes 8 args, 4 related to handling the X-scale which we don't care about (1f, 1f, ... Animation.RELATIVE_TO_SELF, 0f, ...).

The other 4 args are for the Y-scaling we do care about.

startScale, endScale - In your case, you'd use 0f, 0.6f.

Animation.RELATIVE_TO_SELF, 1f - This specifies where the shrinking of the view collapses to (referred to as the pivot in the documentation). Here, we set the float value to 1f because we want the animation to start growing the bar from the bottom. If we wanted it to grow downward from the top, we'd use 0f.

Finally, and equally important, is the call to anim.setFillAfter(true). If you want the result of the animation to stick around after the animation completes, you must run this on the animator before executing the animation.

So in your case, you can do something like this:

View v = findViewById(R.id.viewContainer);
scaleView(v, 0f, .6f);

How to do android scale animation based on view's position on screen and focus that view in centre?

you need to get position of the view/content that you want to be in center, because you need to do some translation

here example zoom to center of TextView with random position inside a ConstraintView

to zoom in to the specific position you need to translate view so the point is in the center, you can do it by change the difX and difY formula

float layoutWitdh = layout.getWidth();
        float layoutHeight = layout.getHeight();

        float x = view.getX();
        float y = view.getY();
        float w = view.getWidth();
        float h = view.getHeight();

        float difX = (layoutWitdh - w) / 2 - x;
        float difY = (layoutHeight - h) / 2 - y;

        view.animate().translationX(difX).translationY(difY).scaleY(5).scaleX(5).setDuration(1000);

Sample Image

edit:

check this project https://github.com/aiwiguna/AndroidZoom

Sample Image

Scale animation on Imageview

You can use the scale up/down animation to achieve this.

scale_up.xml

    <set xmlns:android="http://schemas.android.com/apk/res/android">
       <scale
         android:duration="100"
         android:fromXScale="0"
         android:fromYScale="0"
         android:pivotX="50%"
         android:pivotY="50%"
         android:toXScale="1.0"
         android:toYScale="1.0" />
    </set>

scale_down.xml

   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <scale
         android:duration="100"
         android:fromXScale="1.0"
         android:fromYScale="1.0"
         android:pivotX="50%"
         android:pivotY="50%"
         android:toXScale="0"
         android:toYScale="0" />
 </set>

And to apply the animation onto your imageView, you can do something like this:

    /**
    * For scale up animation
    */
    Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.scale_up);
        child.startAnimation(animation);
        child.setVisibility(View.VISIBLE);

For scale down

    /**
    * For scale down animation
    */
    Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.scale_down);
        child.startAnimation(animation);
        child.setVisibility(View.INVISIBLE);

It depends where you want the imageView to be scaled up and scaled down.

Android scale image view with animation

Ok, i found a solution. is this correct like this? or it is quick and dirty? ^^

    ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(image, "scaleX", 0.7f);
    ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(image, "scaleY", 0.7f);
    scaleDownX.setDuration(1500);
    scaleDownY.setDuration(1500);

    ObjectAnimator moveUpY = ObjectAnimator.ofFloat(image, "translationY", -100);
    moveUpY.setDuration(1500);

    AnimatorSet scaleDown = new AnimatorSet();
    AnimatorSet moveUp = new AnimatorSet();

    scaleDown.play(scaleDownX).with(scaleDownY);
    moveUp.play(moveUpY);

    scaleDown.start();
    moveUp.start();

Scaling animation doesn't change the ImageView size

The scaleX() causes the View's scaleX property to be animated to the specified value (reference). It doesn't directly change the layout width/height values. (reference)

You can get the expected width/height values by multiplying with the scaleX/Y values.

//create the animation
    imageView.setPivotX(0);
    imageView.setPivotY(0);
    imageView.animate()
             .scaleX(scaleX) //about 0.3
             .scaleY(scaleY) //about 0.3
             .x(finalX) //location x of the image
             .y(finalY) //location y of the image
             .setListener(new Animator.AnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animation) {
                            int reqWidth = imageView.getWidth(); //result 500 as expected
                            int reqHeight = imageView.getHeight();//result 500 as expected
                            Drawable image = imageView.getDrawable();
                        }

                        @Override
                        public void onAnimationEnd(Animator animation) {
                            int reqWidth = imageView.getWidth() * imageView.getScaleX;
                            int reqHeight = imageView.getHeight() * imageView.getScaleY;
                            Drawable image = imageView.getDrawable();
                        }

                        @Override
                        public void onAnimationCancel(Animator animation) {}

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

TextView: scale down and scale up with sequential animations

You do not need handlers, because there is withEndAction() API:

mFactTextView.animate().scaleX(0).scaleY(0).setDuration(300).withEndAction(new Runnable() {
    @Override
    public void run() {
        mFactTextView.animate().scaleX(1).scaleY(1).setDuration(300);
    }
});

There is no need to call start() explicitly, the animation will start on next frame.

And the reason why xml won't work for you, is that you have incorrectly specified start and end values. scale_down animation should start from 1 and end up to 0, and scale_up should start from 0 and animate to 1.

Update

You are performing setTarget() on same instance twice. Change second scaleTextDown.setTarget() to scaleTextUp.setTarget().

Android scale animation making the ImageView running

Finally, I am succeed with the 2 steps below.

I have changed the RelativeLayout into AbsoluteLayout in the layoutfile.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true" />

    <AbsoluteLayout
        android:id="@+id/rippleEffectView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp">

        </AbsoluteLayout>

</RelativeLayout>

Not sure why, setX(), setY() was not working, but changing layout params works.

    final ImageView rippleImageView = new ImageView(context);
LayoutParams params = new AbsoluteLayout.LayoutParams(200, 200, X, Y);
rippleImageView.setParams(params);
                rippleImageView.setImageBitmap(image);

                ((ViewGroup)(findViewById(R.id.rippleEffectView)).addView(rippleImageView, 0);

                Animation a = AnimationUtils.loadAnimation(context, R.anim.scale_up);
                a.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        ((ViewGroup) rippleImageView.getParent()).removeView(rippleImageView);
                    }
                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });
                rippleImageView.startAnimation(a);

And my output now is,

Sample Image

How to make a Scale Up Animation with Object Animator

You could use something like this for ValueAnimator:

ValueAnimator translate = ValueAnimator.ofFloat(1f, 1.5f);
translate.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float scale = Float.parseFloat(animation.getAnimatedValue().toString());
        yourView.setScaleX(scale);
        yourView.setScaleY(scale);
    }
});
translate.start();

And something like this for ObjectAnimator:

AnimatorSet animationSet = new AnimatorSet();

ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 1.5f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 1.5f);

animationSet.playTogether(scaleX, scaleY);
animationSet.start();

You can also set duration/interpolator/delay and similar properties for both animations. Also do not forget to start the animation after configuring.

NOTE:
Did not test this code, something might not work properly.

Animation: In android how to scale & fade a view consisting of multiple lines of text from a central point

I haven`t really worked with the animations, so thought to give it a try.
Trial and error led to POC level app. Hence the bunch of code.

Note that i have used some static views and repeated the animations on them.That can be polished for the expected output mentioned.

There were some minor problems in the animation example, i have fixed that.
Code snippets are as follows.

anim/zoom_to_medium.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
    android:duration="1000"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="restart"
    android:toXScale="1.0"
    android:toYScale="1.0" />

<alpha
    android:duration="50"
    android:fromAlpha="0.0"
    android:toAlpha="0.2" />
</set>

anim\zoom_to_full.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="restart"
    android:toXScale="2"
    android:toYScale="2" />

<alpha
    android:duration="1000"
    android:fromAlpha="2.0"
    android:toAlpha="0.0" />
</set>

activity_main.xml

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/border_circle"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/llFish"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="36%"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="Cat \n owners"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/llDog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="54%"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="Fish \n owners"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

        </LinearLayout>

      </RelativeLayout>

        <Button
        android:id="@+id/btnToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Click Me" />
  </RelativeLayout>

MainActivity.java

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout llDog;
    private LinearLayout llFish;
    private Animation zoomToMed, zoomToFull;
    private Button btnToggle;
    private boolean isRunning;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        llDog = (LinearLayout) findViewById(R.id.llDog);
        llFish = (LinearLayout) findViewById(R.id.llFish);

        zoomToMed = AnimationUtils.loadAnimation(this, R.anim.zoom_to_medium);
        zoomToFull = AnimationUtils.loadAnimation(this, R.anim.zoom_to_full);

        zoomToFull.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                hideViews();
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        startAnimations();
                    }
                }, 1000);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        btnToggle = (Button) findViewById(R.id.btnToggle);
        btnToggle.setOnClickListener(this);
    }

    private void hideViews() {
        llDog.setVisibility(View.GONE);
        llDog.setVisibility(View.GONE);
    }

    private void startAnimations() {
        llDog.setVisibility(View.VISIBLE);
        llFish.setVisibility(View.VISIBLE);
        llDog.startAnimation(zoomToMed);
        llFish.startAnimation(zoomToFull);
    }

    @Override
    public void onClick(View view) {
        isRunning = !isRunning;
        if (isRunning) {
            startAnimations();
        } else {
            hideViews();

        }
    }
 }

and the bonus shape drawable for the red circle.

border_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_red_dark"></stroke>
    <size android:width="250dp" android:height="250dp" />
</shape>

Android Scale Animation on View