ZOFTINO.COM android and web dev tutorials

Android VideoView Playing Videos Full Screen

If you want to provide video content in your application, you can create a feature in your app to play videos using Android VideoView and MediaController. Playing videos in full screen gives the best user experience.

In this post, I’ll explain how to create a feature in your app which allows users to play videos in full screen and exit full screen.

android videoview exit full screen

Android VideoView Full Screen Example

We will use window flag to enter and exit full screen. By setting window flag WindowManager.LayoutParams.FLAG_FULLSCREEN, VideoView can be made to be played in full screen mode. And also, if there are other views on the screen, you need to hide them when entering into full screen and shown them back on full screen exit like for example action bar.

We need to provide a button along with VideoView for entering and exiting full screen mode. Every time the button is clicked, it will restart the video activity and provide the desired behavior by showing VideoView in full screen and existing full screen.

I experimented with other ways of providing full screen feature, but implementing in the way explained above is the best way in my opinion.

Adding Full Screen Functionality & Custom MediaController

First thing we need is a button in UI that can be used to view video in full screen and exit full screen to watch in normal mode. The best component to place view-full-screen and exit-full-screen button is in MediaController as MediaController is associated with VideoView and is visible on touching the video.

So, to add full screen button to MediaController, we need to customize MediaController by creating a subclass and overriding setAnchorView method.

In setAnchorView method, create a button, add layout parameters and add it to media controller by calling addView mthod.

Get icons for enter-full-screen and exit-full-screen buttons and save them in your project. Based on the indicator from intent in setAnchorView of MediaController, you can set button icon to either enter-full-screen or exit-full-screen icon.

Add onclick listener to the button, in the listener, toggle image icon and restart the activity passing full screen or normal mode indicator.

Below picture shows video view in normal mode with enter full screen button in medial controller.

android videoview fullscreen example

Below picture shows video view in full screen mode.

android videoview mediacontroller example

Custom MediaController

 import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.MediaController;

public class FullScreenMediaController extends MediaController {

    private ImageButton fullScreen;
    private String isFullScreen;

    public FullScreenMediaController(Context context) {
        super(context);
    }

    @Override
    public void setAnchorView(View view) {

        super.setAnchorView(view);

        //image button for full screen to be added to media controller
        fullScreen = new ImageButton (super.getContext());

        FrameLayout.LayoutParams params =
                new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.RIGHT;
        params.rightMargin = 80;
        addView(fullScreen, params);

        //fullscreen indicator from intent
        isFullScreen =  ((Activity)getContext()).getIntent().
                                getStringExtra("fullScreenInd");

        if("y".equals(isFullScreen)){
            fullScreen.setImageResource(R.drawable.ic_fullscreen_exit);
        }else{
            fullScreen.setImageResource(R.drawable.ic_fullscreen);
        }

        //add listener to image button to handle full screen and exit full screen events
        fullScreen.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(getContext(),FullScreenVideoActivity.class);

                if("y".equals(isFullScreen)){
                    intent.putExtra("fullScreenInd", "");
                }else{
                    intent.putExtra("fullScreenInd", "y");
                }
                ((Activity)getContext()).startActivity(intent);
            }
        });
    }
} 

Activity

Activity sets window’s flag to FLAG_FULLSCREEN by calling setFlag on it if full screen indicator from intent is on.

 import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.WindowManager;
import android.widget.MediaController;
import android.widget.VideoView;

public class FullScreenVideoActivity extends AppCompatActivity {

    private VideoView videoView;
    private MediaController mediaController;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.fullscreen_videoview);

        videoView = findViewById(R.id.videoView);

        String fullScreen =  getIntent().getStringExtra("fullScreenInd");
        if("y".equals(fullScreen)){
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
		 WindowManager.LayoutParams.FLAG_FULLSCREEN);
            getSupportActionBar().hide();
        }

        Uri videoUri = Uri.parse("android.resource://"+getPackageName()+"/"+R.raw.imageswitcher_example);

        videoView.setVideoURI(videoUri);

        mediaController = new FullScreenMediaController(this);
        mediaController.setAnchorView(videoView);

        videoView.setMediaController(mediaController);
        videoView.start();
    }
} 

Layout

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FullScreenVideoActivity">
    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"></VideoView>
</android.support.constraint.ConstraintLayout> 

Playing Videos Full Screen when Device in Landscape Orientation

If you don’t want to show full screen feature in your app when device is in portrait orientation, then you can simply use MediaController instead of custom media controller which has full screen button.

if(isLandScape()){
    mediaController = new FullScreenMediaController(this);
}else {
    mediaController = new MediaController(this);
}

private boolean isLandScape(){
    Display display = ((WindowManager) getSystemService(WINDOW_SERVICE))
            .getDefaultDisplay();
    int rotation = display.getRotation();

    if (rotation == Surface.ROTATION_90
            || rotation == Surface.ROTATION_270) {
        return true;
    }
    return false;
}