Scale video on textureview to give appearance of centercrop

Question

I am repeatedly playing a video in a textureview whose purpose is to display a background video. I need the textureview's width and height to be set to match_parent.

I want to scale the video so that it looks cropped on the textureview playing it.

I followed this link TextureView scaling and used the given function.

private void updateTextureViewSize(int viewWidth, int viewHeight) {
float scaleX = 1.0f;
float scaleY = 1.0f;

if (mVideoWidth > viewWidth && mVideoHeight > viewHeight) {
    scaleX = mVideoWidth / viewWidth;
    scaleY = mVideoHeight / viewHeight;
} else if (mVideoWidth < viewWidth && mVideoHeight < viewHeight) {
    scaleY = viewWidth / mVideoWidth;
    scaleX = viewHeight / mVideoHeight;
} else if (viewWidth > mVideoWidth) {
    scaleY = (viewWidth / mVideoWidth) / (viewHeight / mVideoHeight);
} else if (viewHeight > mVideoHeight) {
    scaleX = (viewHeight / mVideoHeight) / (viewWidth / mVideoWidth);
}

// Calculate pivot points, in our case crop from center
int pivotPointX = viewWidth / 2;
int pivotPointY = viewHeight / 2;

Matrix matrix = new Matrix();
matrix.setScale(scaleX, scaleY, pivotPointX, pivotPointY);

mTextureView.setTransform(matrix);
mTextureView.setLayoutParams(new FrameLayout.LayoutParams(viewWidth, viewHeight));
}

I retreived mVideoWidth and mVideoHeight as mediaPlayer.getVideoWidth() and mediaPlayer.getVideoHeight(). What I do not understand is what should I pass in as the function parameters viewWidth and viewHeight? I tried passing the parent containers width and height but that crashed the application.

Here is the xml code for the parent

<FrameLayout
            android:id="@+id/fl_profile_video_container"
            android:layout_width="match_parent"
            android:layout_height="300dp">

            <!--<VideoView-->
                <!--android:id="@+id/vv_profile_video"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent" />-->

            <TextureView
                android:id="@+id/profile_video_texture_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/profile_video_overlay"/>

        </FrameLayout>

and here is the code for the video playing part.

       FrameLayout profileVideoContainer = (FrameLayout) view.findViewById(R.id.fl_profile_video_container);
    profileVideoTextureView = (TextureView) view.findViewById(R.id.profile_video_texture_view);
    SharedPreferences sharedPrefs = getApplicationContext().getSharedPreferences(ProfileVideoRecordingActivity.TAG_VIDEO_PROFILE, Context.MODE_PRIVATE);
    final String profileVideoPath = sharedPrefs.getString(ProfileVideoRecordingActivity.VIDEO_PROFILE_PATH, null);
    if(profileVideoPath != null && (new File(profileVideoPath)).exists()){
        profileVideoContainer.setVisibility(View.VISIBLE);
        profileVideoTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
            @Override
            public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int i, int i1) {
                Surface surface = new Surface(surfaceTexture);
                try {
                    profileVidMediaPlayer = new MediaPlayer();
                    profileVidMediaPlayer.setDataSource(mActivity, Uri.parse(profileVideoPath));
                    profileVidMediaPlayer.setSurface(surface);
                    profileVidMediaPlayer.prepareAsync();
                    profileVidMediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                        @Override
                        public void onPrepared(MediaPlayer mediaPlayer) {
                            profileVidMediaPlayer.start();
                            profileVidMediaPlayer.setLooping(true);
                        }
                    });
                }catch(IOException e){
                    Log.e("DEBUG", "IOException", e);
                }
            }

            @Override
            public void onSurfaceTextureSizeChanged(SurfaceTexture surfaceTexture, int i, int i1) {

            }

            @Override
            public boolean onSurfaceTextureDestroyed(SurfaceTexture surfaceTexture) {
                return true;
            }

            @Override
            public void onSurfaceTextureUpdated(SurfaceTexture surfaceTexture) {

            }
        });
    }else{
        profileVideoContainer.setVisibility(View.GONE);
    }

How can I scale the video so that it looks center-cropped like the attribute on ImageView?

score 8 · Answer 1 · answered Jan 22 '20 at 21:20

I tried to use the same scaling method described on https://www.binpress.com/video-cropping-with-texture-view/, but it didn't scale correctly.

I found another example how to scale video for TextureView and it works for me: https://github.com/yqritc/Android-ScalableVideoView/blob/master/library/src/main/java/com/yqritc/scalablevideoview/ScaleManager.java.

Scale video on textureview to give appearance of centercrop

1 Answers1