Resize/Scaling down a YouTubePlayerFragment while video is playing

Question

I am trying to replicate the video minimization in the Youtube app as shown here. In order to achieve this, I've tried using the Draggable Panel library. When I ran the sample, I noticed that the video does not scale but rather crops when minimized during playback. When the video is stopped (not paused) and displaying a thumbnail, the view scales as its supposed to. I read on another question that YouTubePlayerView is implemented with a SurfaceView. I also read in the docs that SurfaceView behaves differently from a normal view because of how it punches a hole in the screen. I believe because YoutubePlayerView is based off of SurfaceView ,it's not scaling properly. How do I scale the video playing within a YoutubePlayerView properly to match the size of its parent layout during playback?

Answer 1

In my experience with working with YouTubePlayerView and YouTubePlayerFragment, I found that scaling with Nineoldandroids or ViewPropertyAnimator does not work properly. In order to adjust the size of the playing video you must set the height and width of the layout parameters programmatically. In the DraggablePanel library there are two classes to change the size of the top view. The default is ScaleTransformer which doesn't work for videos during playback because it crops part of the playing video out of the view, the other is ResizeTransformer. ResizeTransformer isn't as smooth as the ScaleTransformer but it works somewhat. The problem with ResizeTransformer is that the YouTubePlayerView's layout sometimes clips under the bottom view while being dragged. Playback then stops because it detects a view overlapped it. I made the compromise to strip out DraggablePanel and write a maximize and minimize method for YouTubePlayerView's container.

public void minimize() {
    RelativeLayout.LayoutParams playerParams =
            (RelativeLayout.LayoutParams) playerView.getLayoutParams();
    playerParams.width = getResources().getDimensionPixelSize(R.dimen.player_minimized_width);
    playerParams.height = getResources().getDimensionPixelSize(R.dimen.player_minimized_height);
    FrameLayout container = (FrameLayout)playerView.getParent().getParent();
    RelativeLayout.LayoutParams containerParams = (RelativeLayout.LayoutParams)container.getLayoutParams();
    containerParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    containerParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
    containerParams.bottomMargin = getResources().getDimensionPixelSize(R.dimen.player_minimized_margin);
    containerParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.player_minimized_margin);
    playerView.requestLayout();
    container.requestLayout();
    isMinimized = true;
}

public void maximize() {
    RelativeLayout.LayoutParams playerParams =
            (RelativeLayout.LayoutParams) playerView.getLayoutParams();
    playerParams.width = RelativeLayout.LayoutParams.MATCH_PARENT;
    playerParams.height = getResources().getDimensionPixelSize(R.dimen.player_height);
    FrameLayout container = (FrameLayout)playerView.getParent().getParent();
    RelativeLayout.LayoutParams containerParams = (RelativeLayout.LayoutParams)container.getLayoutParams();
    containerParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,0);
    containerParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,0);
    containerParams.bottomMargin = 0;
    containerParams.rightMargin = 0;
    playerView.requestLayout();
    container.requestLayout();
    isMinimized = false;
}