Android - Youtube drag video to bottom right corner

user_6027598 0
Viewed 1327

So the youtube app on android at the moment, has a drag action ... If you touch an drag a video while it's playing, the video shrinks and puts itself into the bottom right corner.

I tried to implement this with a SimpleExoPlayerView, which is a frame layout that contains a surface view to render the video on. However the animations aren't in sync with the frame rate of the video, and therefore when scaling the SimpleExoPlayerView, I end up with a terrible animation. It scales up, however, the parts that are scaled that haven't had a redraw from the surfaceview and video frame, are just black. Which makes sense.

I have read that surface view is not meant for transformations, and a texture view should be used instead. However I am coding for Android TV and therefore cannot afford to drop the frame rate or have latency as the texture view is known to have.

So my question is how the in the world did the youtube app accomplish this.

Yes they have their own YoutubePlayerView .. but this must be an extension of a surface view, if not a glsurfaceview.

Any ideas on how to get my animation to work smoothly with the surface view ???

Ps this happens for all transformations .. even animating x, y coords as a translation.

surfaceview android java
1 Answers

You can use MotionLayout for Implement this animation.

screen_motion :

<?xml version="1.0" encoding="utf-8"?
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        app:motionInterpolator="easeInOut"
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="300">

        <OnSwipe
            app:dragDirection="dragUp"
            app:maxAcceleration="200"
            app:touchAnchorId="@+id/playerViewFrameLayout"
            app:touchAnchorSide="top"
            app:touchRegionId="@id/playerViewFrameLayout" />

        <KeyFrameSet>

            <KeyAttribute
                app:framePosition="100"
                app:motionTarget="@id/scrollView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="1.0" />
            </KeyAttribute>

            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/scrollView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="0.5" />
            </KeyAttribute>

        </KeyFrameSet>


        <KeyFrameSet>

            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/closeImageView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="1.0" />
            </KeyAttribute>

            <KeyAttribute
                app:framePosition="1"
                app:motionTarget="@id/closeImageView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="0.0" />
            </KeyAttribute>

        </KeyFrameSet>


        <KeyFrameSet>

            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/playPauseImageView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="1.0" />
            </KeyAttribute>

            <KeyAttribute
                app:framePosition="1"
                app:motionTarget="@id/playPauseImageView">
                <CustomAttribute
                    app:attributeName="alpha"
                    app:customFloatValue="0.0" />
            </KeyAttribute>

        </KeyFrameSet>

    </Transition>


    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@id/playerBackgroundView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />

        <Constraint
            android:id="@id/playerViewFrameLayout"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />

        <Constraint
            android:id="@id/playerView"
            android:layout_width="140dp"
            android:layout_height="100dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/playerBackgroundView" />

        <Constraint
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            motion:layout_constraintBottom_toBottomOf="@+id/playerViewFrameLayout"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="@+id/playerViewFrameLayout" />

        <Constraint
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="-1dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/playerView" />

        <Constraint
            android:id="@+id/closeImageView"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:gravity="center"
            android:padding="4dp"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/playerViewFrameLayout" />

        <Constraint
            android:id="@+id/playPauseImageView"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:gravity="center"
            android:padding="4dp"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="@id/closeImageView"
            app:layout_constraintEnd_toStartOf="@id/closeImageView"
            app:layout_constraintTop_toTopOf="@id/closeImageView" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@id/playerBackgroundView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Constraint
            android:id="@id/playerView"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/playerBackgroundView" />

        <Constraint
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/playerView" />

        <Constraint
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/textView" />

        <Constraint
            android:id="@+id/closeImageView"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/playerBackgroundView" />

        <Constraint
            android:id="@+id/playPauseImageView"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:visibility="gone"
            app:layout_constraintEnd_toStartOf="@id/closeImageView"
            app:layout_constraintTop_toTopOf="@id/playerViewFrameLayout" />

    </ConstraintSet>

</MotionScene>

also for smooth animation in surfaceView exo player , you can use this 2 solutions...

  1. add this attribute to PlayerView

     app:surface_type="texture_view"

private val playerManager: SimpleExoPlayer by lazy {
    SimpleExoPlayer.Builder(requireContext())
        .setMediaSourceFactory(
            DefaultMediaSourceFactory(requireContext())
        )
        .build()
}

in onCreate

        playerManager.addAnalyticsListener(object : AnalyticsListener {

        override fun onSurfaceSizeChanged(
            eventTime: AnalyticsListener.EventTime,
            width: Int,
            height: Int
        ) {
            super.onSurfaceSizeChanged(eventTime, width, height)

            val surfaceView = binding.playerView.videoSurfaceView

            if (surfaceView is SurfaceView) {
                surfaceView.holder.setFixedSize(width, height)
            }

        }

    })

alos you can see this repo...I have implemented this scenario by MotionLayout and exoplayer!

https://github.com/farshadrezaee/youtube-minimize-video-player

user_87801150
Related