Fullscreen button on VideoView

This example shows how to add a fullscreen button on VideoView in Sketchware android project. In the project there will be a button to pick video files and a LinearLayout for the VideoView. On picking the video file, it will play in VideoView and there will be a fullscreen button on the MediaController of the VideoView, clicking on which the video will become fullscreen.

1. In main.xml add a Button button1, a TextView textview1, and a LinearLayout linear2. For linear2 set padding 0, height 300, and gravity CENTER_HORIZONTAL.

2. In View manager set orientation to Both landscape and portrait.

3. Create a FilePicker component picker with mime type video/*.

4. Create a List String list, a String path, and a boolean isFullscreen.

5. Create a More block declare. Put following code in it.

}

RelativeLayout rl;

VideoView videoView;

MediaController mc;

FrameLayout fm;

private int mOriginalSystemUiVisibility;

{

6. In onCreate event use add source directly block and put following code in it.

rl = new RelativeLayout(this);

RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

rl.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);

rl.setBackgroundColor(Color.DKGRAY);

rl.setLayoutParams(rlp);

videoView = new VideoView(this);

FrameLayout.LayoutParams flp = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

flp.gravity = Gravity.CENTER_HORIZONTAL;

videoView.setLayoutParams(flp);

mc = new FullScreenMediaController(this);

mc.setAnchorView(videoView);

videoView.setMediaController(mc);

rl.addView(videoView);

linear2.addView(rl);

fm = (FrameLayout)MainActivity.this.getWindow().getDecorView();

7. In button1 onClick, pick files.

8. In picker onFilesPicked event, use blocks and codes as shown in image.

The code used is

Uri videoUri = Uri.fromFile(new java.io.File(path));

videoView.setVideoURI(videoUri);

videoView.start();

9. Create a More Block show_fullscreen. Put following code in it, and set isFullscreen to true.

int currentPosition = videoView.getCurrentPosition();

mOriginalSystemUiVisibility = fm.getSystemUiVisibility();

linear2.removeAllViews();

fm.addView(rl);

MainActivity.this.getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

fm.setSystemUiVisibility(3846);

videoView.start();

videoView.seekTo(currentPosition);

10. Create a more block hide_fullscreen. Put following code in it, and set isFullscreen to false.

int currentPosition = videoView.getCurrentPosition();

fm.removeView(rl);

fm.setSystemUiVisibility(mOriginalSystemUiVisibility);

MainActivity.this.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

linear2.addView(rl);

videoView.start();

videoView.seekTo(currentPosition);

11. Using ImageManager add images of fullscreen buttons: ic_fullscreen_white and ic_fullscreen_exit_white.

12. Create a more block extra and put codes to define a FullScreenMediaController in it.

}

public class FullScreenMediaController extends MediaController {

public FullScreenMediaController(Context context) {

super(context);

}

@Override

public void setAnchorView(View view) {

super.setAnchorView(view);

final ImageView fullScreen = new ImageView(super.getContext());

FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

params.gravity = Gravity.RIGHT; params.rightMargin = 80;

params.topMargin = 50;

addView(fullScreen, params);

if(isFullscreen){

fullScreen.setImageResource(R.drawable.ic_fullscreen_exit_white);

} else{

fullScreen.setImageResource(R.drawable.ic_fullscreen_white);

}

fullScreen.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if(isFullscreen){

_hide_fullscreen();

} else{

_show_fullscreen();

}

} });

}}{

13. In onBackPressed event, hide fullscreen if it is fullscreen and finish activity if it is not fullscreen.

14. Save and run the project.