Search code examples
androidanimationandroid-cardviewclip

Animating view out of parent layout bounds with a CardView


I'm trying to animate my view to a view outside of the parents layout. As told in other questions I would need to use:

        android:clipChildren="false"
        android:clipToPadding="false"

Which works perfectly for normal views! However I need to animate a view out of a CardView. For some reason when my view is inside a CardView it does not animate out of it, it just stops at the border.

My layout file is really simple, just a LinearLayout, some views and a cardview with the animating view inside of that:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:orientation="vertical"
android:clipChildren="false"
android:clipToPadding="false">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

<android.support.v7.widget.CardView
    android:layout_width="350dp"
    android:layout_height="200dp"
    android:clipChildren="false"
    android:clipToPadding="false">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        android:clipToPadding="false">
        <View
            android:id="@+id/animate"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@android:color/holo_red_light"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

</LinearLayout>

The code I'm using for the animation is:

View view = findViewById(R.id.animate);
    ObjectAnimator animation2 = ObjectAnimator.ofFloat(view, "translationY", -500);
    animation2.setDuration(5000);
    animation2.setTarget(view);
    animation2.start();

The problem right now is that when I use the CardView the view stops animating at the border. It just dissapears. When I use a normal FrameLayout it does animate out of the parent.

Is there any strange behaviour I'm missing with the CardView and animating out of it?


Solution

  • It turns out that on the CardView

    cardView.setClipToOutline(false);
    

    needs to be called. This does prevent the item dissapearing at the border.