Search code examples
androidanimationobjectanimator

Scale Shape Drawable without stretching it with ObjectAnimator

I have an View that it's background is a Shape

The View:

<View
    android:layout_width="wrap_content"
    android:layout_height="74dp"
    android:id="@+id/background_parent"
    android:background="@drawable/item_background">
</View>

The shape (Item background):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<corners
    android:bottomLeftRadius="@dimen/corner_radius_in_rects"
    android:bottomRightRadius="@dimen/corner_radius_in_rects"
    android:topLeftRadius="@dimen/corner_radius_in_rects"
    android:topRightRadius="@dimen/corner_radius_in_rects" />

<solid android:color="#f8f4fa" />

<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

I'm trying to scale the view with ObjectAnimtor but it streches the view and the corners. I want it to be scaled and still keep the original shape properties (corners radius).

I tried:

 scaleBackgroundView.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    background.setBackground(getResources().getDrawable(R.drawable.item_background));
                }
            });

and:

scaleBackgroundView.addListener(new Animator.AnimatorListener() {
                ...

                @Override
                public void onAnimationEnd(Animator animator) {
                    background.setBackground(getDrawable(R.drawable.item_background));
                }

with no success. Anyone has an idea?

In other words,This is what it looks like: enter image description here

I want round corners

Solution

  • Ok, so I found couple of solutions (more like workarounds). The first one was to create a custom view and specify its own scale animation to only increase the gap between the corners and not to stretch then like before. The second solution (the one I used) is to split the the rectangle to three rectangles, Upper rect middle and bottom and to specify the middle one as a filler between the upper and the bottom. Then I set scale animation to the middle and translation animation to the bottom. Not the brightest idea but works fine.