ViewPager is not clipping VideoView on scrolling

Question

I'm writing a little tutorial screen in a Activity that has a ViewPager which in turn has several pages, one of which can be a video that runs in an infinite loop and images on the other pages.

The problem is that when I scroll the page with the video playing (or paused) the videoview sticks out of the container. I tried setting clip children and padding properties on the container and the ViewPager but to no avail.

Can you point me a little close to what could be causing this behavior?

The setting of the video is done within the PageAdapter as follows:

     ![enter image description here][1]TutorialPage tutorialPageItem = tutorialPagesList.get(position);
    // Set tutorialImageDrawable as a compound drawable of the TextView
    Drawable tutorialImageDrawable = tutorialPageItem.getTutorialImageDrawable();
    if (tutorialImageDrawable != null) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)imageView.getLayoutParams();
        params.width = LayoutParams.WRAP_CONTENT;
        params.height = LayoutParams.WRAP_CONTENT;
        imageView.setImageDrawable(tutorialImageDrawable);
        videoView.setVisibility(View.INVISIBLE);
    } else {
        try {
            //set the uri of the video to be played
            videoView.setVideoURI(Uri.parse("android.resource://" + context.getPackageName() + "/" + R.raw.up_test_640x640_lite_2));

        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }

        videoView.requestFocus();
        videoView.setZOrderMediaOverlay(true);
        //we also set an setOnPreparedListener in order to know when the video file is ready for playback
        videoView.setOnPreparedListener(new OnPreparedListener() {

            private int videoPosition;

            public void onPrepared(MediaPlayer mediaPlayer) {
                // close the progress bar and play the video
                //if we have a position on savedInstanceState, the video playback should start from here
                videoView.seekTo(videoPosition);
                if (videoPosition == 0) {
                    videoView.start();
                } else {
                    //if we come from a resumed activity, video playback will be paused
                    videoView.pause();
                }
            }
        });
        videoView.setOnCompletionListener(new OnCompletionListener() {

            @Override
            public void onCompletion(MediaPlayer mp) {
                // TODO Auto-generated method stub
                videoView.seekTo(0);
                videoView.start();
            }

        });


        ViewTreeObserver treeObserver = imageView.getViewTreeObserver();
        treeObserver.addOnPreDrawListener(new OnPreDrawListener() {

            @Override
            public boolean onPreDraw() {
                // TODO Auto-generated method stub
                imageView.getViewTreeObserver().removeOnPreDrawListener(this);
                int width = imageView.getWidth();
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)imageView.getLayoutParams();
                params.height = width;
                imageView.setLayoutParams(params);
                return false;
            }

        });
        imageView.setVisibility(View.INVISIBLE);
    }

Answer 1

VideoView uses SurfaceView internally to display your video. According to the SurfaceView Javadoc:

The surface is Z ordered so that it is behind the window holding its SurfaceView; the SurfaceView punches a hole in its window to allow its surface to be displayed. The view hierarchy will take care of correctly compositing with the Surface any siblings of the SurfaceView that would normally appear on top of it.

You can use TextureView to overcome this issue. Check this similar question.