CODEWITHSUNDEEP
androidandroid-layout
Sarthak Joshi
Sarthak Joshi

Reputation: 21

How to scale a layout to a specific size (not relative size) in android using ScaleAnimation?

I've a RelativeLayout in my activity_main.xml layout. I've defined its width and height as 250dp and 48dp respectively, as shown below in my xml snippet.

Now I want to animate (Scale) its width from that value (default) to 48dp, (pivot should be right edge). I've tried to do so using ScaleAnimation, ValueAnimation, ObjectAnimation, but it seems they work on relative values.

I want to do this using ScaleAnimation, if possible.

This is my RelativeLayout:

<RelativeLayout
    android:layout_width="250dp"
    android:layout_height="48dp"
    android:id="@+id/layout_1"
    android:layout_below="@id/default_layout"
    android:layout_centerHorizontal="true"
    android:background="@drawable/round_corner_layout_1">


        ...


</RelativeLayout>

This is my scaleAnimate method:

private void scaleAnimate(long startOffSet, int fromX, int fromY, int toX, int toY, int pivotTypeX, int pivotTypeY, float pivotX, float pivotY, int duration, Interpolator interpolator, final View... v){

    Animation animation = new ScaleAnimation(fromX, toX, fromY, toY, pivotTypeX, pivotX, pivotTypeY, pivotY);
    animation.setDuration(duration);
    animation.setFillAfter(true);
    animation.setInterpolator(interpolator);
    animation.setStartOffset(startOffSet);

    for(View view : v){
        view.setVisibility(View.VISIBLE);
        view.startAnimation(animation);
    }
}

Edit:

This is how I want to animate layout. I've tried to create an image, which is linked down below, to explain what I'm trying to do.

Layout Scaling Interpretation

Views within layout will alpha animate to 0. (I can alpha animate it perfectly. No issue there :D). Left is the before scaled layout, and right is the after scaled layout. After scaling it, rounded corners should form a circle. That's why both the height and the width needs to be the same (48dp). Both of the left (top and bottom) corners move toward the both of the right (top and bottom) ones. Right edge will remain static. Right edge is pivot.

For supporting devices with different resolution, initial width and height can be changed to wrap_content. No worries. But after animating layout, height and width needs to be the same, to form a circle.

Upvotes: 0

Views: 216

Answers (1)

Ben P.
Ben P.

Reputation: 54204

Scale properties affect the size of your view by multiplying its original size, so they're not appropriate for animating to an absolute size, as you have found.

Instead, use a ValueAnimator in combination with an AnimatorUpdateListener to set your view's width.

ValueAnimator anim = ValueAnimator.ofInt(v.getMeasuredWidth(), END_WIDTH);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        ViewGroup.LayoutParams params = v.getLayoutParams();
        params.width = (int) animator.getAnimatedValue();
        v.setLayoutParams(params);
    }
});
...
anim.start();

Upvotes: 0

Related Questions