vxh.viet
11/23/2016 - 2:15 AM

View's animation get clipped above SurfaceView

View's animation get clipped above SurfaceView

Source: Blog, StackOverflow, StackOverflow

Question: Animated View get clipped above SurfaceView

Answer:

add android:clipChildren="false" and android:clipToPadding="false" to the parent layout. This will allow View to be fully drawn when they partially go out of screen. Example layout:

<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:orientation="vertical"
                android:clipChildren="false"
                android:clipToPadding="false">
                
    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
    <FrameLayout
        android:id="@+id/wheel_capture_button_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/wheel_capture_button_active"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_gravity="end|center_vertical"
            android:layout_marginEnd="@dimen/wheel_capture_button_active_margin"
            android:src="@drawable/img_wheel_capture_button_active_64dp"
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/wheel_capture_button_inactive"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_gravity="end|center_vertical"
            android:layout_marginEnd="@dimen/wheel_capture_button_active_margin"
            android:src="@drawable/img_wheel_capture_button_inactive_48dp"/>
    </FrameLayout>
</RelativeLayout>

For the animation bit, add an empty FrameLayout to the FrameLayout container to resolve the clipping:

private void doInitAnimation() {
        final FrameLayout buttonContainer = (FrameLayout) findViewById(R.id.wheel_capture_button_container);
        final ImageView inactiveButton = (ImageView) findViewById(R.id.wheel_capture_button_inactive);

        //to solve this mother fucking problem http://www.nowherenearithaca.com/2011/05/avoiding-clipping-when-animating-view.html
        //view on animation get clipped. FUCK YOU MOTHERFUCKER!!!!
        buttonContainer.addView(new View(VideoActivity.this));

        int originalPos[] = new int[2];
        inactiveButton.getLocationOnScreen(originalPos);

        int destinationPos[] = new int[2];
        mWheel.getLocationOnScreen(destinationPos);

        int fromX = originalPos[0] + inactiveButton.getWidth() / 2; //center of the button
        int toX = destinationPos[0] + mWheel.getWidth() / 2;

        buttonContainer.animate()
                .translationX(toX - fromX)
                .setDuration(300)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        zoomOut();
                    }
                });
    }