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.


Comments

  1. sir,how to i can full screen on webview video play

    ReplyDelete
    Replies
    1. there are some codes to convert to landscape

      Delete
    2. You can use this code
      http://www.sketchwarehelp.com/2018/09/enable-fullscreen-for-youtube-videos-in.html?m=1

      Delete
  2. Sir how to play youtube video from link in landscape mode and disabling the share button so that the person should not get the link of video.
    Plz plz tell me
    I will be so glad of you💞

    ReplyDelete
  3. https://codeboolean.blogspot.com/2020/09/android.html?m=1
    Sketchware guide

    ReplyDelete
  4. Hello big Sanjeev, I'm developing an app in sketchware, where it requires a payment method, I would like to implement the payment function directly in the play store, would you have a tip?
    I thank you in advance, I am Brazilian and I have been following your work with sketchware for a long time, they have even helped me a lot.

    ReplyDelete
  5. Sir please tell how can i create auto vertical scrolling in sketchware.


    please sir tell ! for auto scroll
    Please! Please! Please! Please!

    ReplyDelete
  6. Sir please tell how can i create auto vertical scrolling in sketchware.


    please sir tell ! for auto scroll
    Please! Please! Please! Please!

    ReplyDelete
  7. Sir please tell how can i create auto vertical scrolling in sketchware.


    please sir tell ! for auto scroll
    Please! Please! Please! Please!

    ReplyDelete

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware