Scale animation on Imageview

Question

How do I animate my ImageView like the animation (showing and hiding) of the FloatingActionButton in the gif below.

Answer 1

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.

Answer 2

use CoordinatorLayout as your parent layout. Create a scroll behavior for FloatingActionButton

use this class for scroll behavour

public class FabBehaviour extends FloatingActionButton.Behavior {

private static final String TAG = FabBehaviour.class.getSimpleName();

int preDX = 0;
int preFinal = 0;

@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target) {
    Log.d(TAG, "Stop");
    child.show();
    super.onStopNestedScroll(coordinatorLayout, child, target);
}

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

@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
                                   FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {

    if (ViewCompat.SCROLL_AXIS_NONE == nestedScrollAxes) {
        child.show();
    }
    return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
            super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                    nestedScrollAxes);
}




@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                           View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
            dyUnconsumed);
    preFinal = dyConsumed;
    if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE && preDX < dyConsumed) {
        child.hide();
    } else if (dyConsumed < -5 && child.getVisibility() != View.VISIBLE) {
        child.show();
    }
    preDX = dyConsumed;
} }

now add this tag inside 'FlotingActionButton' on your layout

app:layout_behavior="<package name>.FabBehaviour"