Monster Techno

Just another WordPress site

Android Tutorial, Android WebView Playing FullScreen, WebView Tutoarial

How to Enable Fullscreen mode in any videos in webview Android Studio Tutorial

@MonsterTechno

This is not a UI source code post this is just a simple tutorial many users and my YouTube viewers are asking me about this for a long time so I think to make a tutorial about this So in simple WebView we cannot make fullscreen on a video but we can do that with some simple codes…

This is the Video Tutorial about this you can watch that…

1. Create a new project. 

1. Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates.or you can choose your existing WebView project.

2. If you already know about WebView code on how to add WebView then skip this code is just for WebView to load a website…

3. Open activity_main.xml and past this code…

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</LinearLayout>

4. Now open your WebView Contained java file in my case it is MainActivity.java so open that and past this simple WebView code.

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);

        webView.setWebViewClient(new Browser_Home());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);

        loadWebSite();

    }

    private void loadWebSite() {
        webView.loadUrl("https://www.youtube.com");
    }

    private class Browser_Home extends WebViewClient {
        Browser_Home(){}

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }
    }
}

5. Now you can run this application and check if the WebView is working or not. As you can see here you can see a button for fullscreen but that button is not active you can not click on that.

6. Now back to project in onCreate past this code.

webView.setWebChromeClient(new ChromeClient());

7. Now in outside of OnCrearte past this code.

private class ChromeClient extends WebChromeClient {
        private View mCustomView;
        private WebChromeClient.CustomViewCallback mCustomViewCallback;
        protected FrameLayout mFullscreenContainer;
        private int mOriginalOrientation;
        private int mOriginalSystemUiVisibility;

        ChromeClient() {}

        public Bitmap getDefaultVideoPoster()
        {
            if (mCustomView == null) {
                return null;
            }
            return BitmapFactory.decodeResource(getApplicationContext().getResources(), 2130837573);
        }

        public void onHideCustomView()
        {
            ((FrameLayout)getWindow().getDecorView()).removeView(this.mCustomView);
            this.mCustomView = null;
            getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
            setRequestedOrientation(this.mOriginalOrientation);
            this.mCustomViewCallback.onCustomViewHidden();
            this.mCustomViewCallback = null;
        }

        public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback)
        {
            if (this.mCustomView != null)
            {
                onHideCustomView();
                return;
            }
            this.mCustomView = paramView;
            this.mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();
            this.mOriginalOrientation = getRequestedOrientation();
            this.mCustomViewCallback = paramCustomViewCallback;
            ((FrameLayout)getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
            getWindow().getDecorView().setSystemUiVisibility(3846 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        }
    }

8. This is the final code for this WebView Check that if you miss any code.

package com.monstertechno.webviewfullscreen;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.ConnectivityManager;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);

        webView.setWebViewClient(new Browser_Home());
        webView.setWebChromeClient(new ChromeClient());
        WebSettings webSettings = webView.getSettings();

        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);

        loadWebSite();

    }

    private void loadWebSite() {
        webView.loadUrl("https://www.youtube.com");
    }

    private class Browser_Home extends WebViewClient {
        Browser_Home(){}

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }
    }

    private class ChromeClient extends WebChromeClient {
        private View mCustomView;
        private WebChromeClient.CustomViewCallback mCustomViewCallback;
        protected FrameLayout mFullscreenContainer;
        private int mOriginalOrientation;
        private int mOriginalSystemUiVisibility;

        ChromeClient() {}

        public Bitmap getDefaultVideoPoster()
        {
            if (mCustomView == null) {
                return null;
            }
            return BitmapFactory.decodeResource(getApplicationContext().getResources(), 2130837573);
        }

        public void onHideCustomView()
        {
            ((FrameLayout)getWindow().getDecorView()).removeView(this.mCustomView);
            this.mCustomView = null;
            getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
            setRequestedOrientation(this.mOriginalOrientation);
            this.mCustomViewCallback.onCustomViewHidden();
            this.mCustomViewCallback = null;
        }

        public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback)
        {
            if (this.mCustomView != null)
            {
                onHideCustomView();
                return;
            }
            this.mCustomView = paramView;
            this.mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();
            this.mOriginalOrientation = getRequestedOrientation();
            this.mCustomViewCallback = paramCustomViewCallback;
            ((FrameLayout)getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
            getWindow().getDecorView().setSystemUiVisibility(3846 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        }
    }
}

9. That’s it now run this application and play any videos you want you can see that the fullscreen button is now activated so now you can click on that…

Posts created 40

54 thoughts on “How to Enable Fullscreen mode in any videos in webview Android Studio Tutorial”

  4. great work… thank you so much. I have just one problem, when i exit the fullscreen with back button it takes me all way back to the home page. is there a way i can make it to just go back once to the page where the video is.. thanks bro

    Reply

  6. If you set the orientation to portrait then you can not play that or you have to create an other activity where you have to add the orientation code otherwise the video will play in portrait mode

    Reply

  21. I am not understand about this video or code but i have required this full screen on my project
    So i just create empty project webview i past my code here so plz help me
    package np.com.shandesh;

    import android.support.v4.widget.SwipeRefreshLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.Window;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;

    public class MainActivity extends AppCompatActivity
    {
    WebView mWebView;

    SwipeRefreshLayout swipe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    swipe = (SwipeRefreshLayout) findViewById(R.id.swipe);
    swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener()
    {
    public void onRefresh(){
    LoadWeb();
    }
    });

    LoadWeb();

    }

    public void LoadWeb()
    {
    mWebView = (WebView) findViewById(R.id.webView);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.loadUrl("http://shandesh.com.np/&quot;);
    swipe.setRefreshing(true);
    mWebView.setWebViewClient(new WebViewClient() {

    public void onReveivedError(WebView view, int errorCode, String description, String failingUrl){
    mWebView.loadUrl("file://android_asset/error.html");
    }

    public void onPageFinished(WebView view, String url)
    {
    //hide the swipe refreshlayout
    swipe.setRefreshing(false);
    }

    });

    }

    @Override
    public boolean onKeyDown(final int keyCode, final KeyEvent event) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
    mWebView.goBack();
    return true;
    }
    return super.onKeyDown(keyCode, event);
    }
    }

    Reply

  22. 353/5000
    How can I add the "back" function so that the full screen mode is disabled without going to the previous page? I want that when pressing the button back, do not go to the previous page, that only the whole screen will be disabled. When the full screen is disabled, the "back" button works to return to the previous page.

    Reply

  23. Sorry I can not understand your question can you explain it more. Do please contact me with your problem use the messenger feature or the whatsapp to contatc, details are in the application and also in the site's hire section 😊

    Reply

  30. hi i use this code an the fullscreen butto is ative but no open fullscreen ,
    how do you detect click on button fullscreen??

    Reply

  32. This is a great solution! Even better than the top answer here…
    https://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview

    No need to make another view to serve as a container for the fullscreen view. Plus, no need to override the URL, which is very nice.

    Just one piece of advice for people on newer devices experiencing a white space appearing when returning from fullscreen via rotating the device into portrait mode…

    Check that this rules has NOT been added to the parent of your webview in your XML layout:
    android:fitsSystemWindows="true" <– Remove that!

    Another solution is the following…
    Change this line:
    activity.getWindow().getDecorView().setSystemUiVisibility(3846 )
    to this:
    activity.getWindow().getDecorView().setSystemUiVisibility(3846 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

    — Essentially adding the layout stable flag to the .setSystemUiVisibility() command. It tells Android not to resize when the system bars hide and show
    Ref: https://developer.android.com/training/system-ui/immersive#java

    Reply

  34. Hi @Monster Techno,

    Could you explain your idea and your properties also? I still confuse in some cases. I really want to understand your code rather than just copy and paste.
    And could you explain why we can't click on fullscreen button?

    Thanks

    Reply

  35. I pasted the code to an existing browser app that I created but its not working. The code is 100% error free and it doesn't crash my app but it doesn't do anything. The little square at the bottom right corner doesn't turn white, it stays dim, or greyed out. I have a toolbar widget that might be causing the problem but I know it can still work with a toolbar, many browser apps have this feature. Please help me with this. This is one of the final pieces to my app and it will be complete. Thanks

    Reply

  46. Thank you! work a magic.

    You can change orientation to landscape by adding this line to onPageStarted:
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

    also add this line to onPageFinished to go back to portrait after the user exit the video:
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

    Reply

  52. The soft keyboard is not showing after I exit the full screen. I tested on android studio avd and my real device.

    Reply
  53. Pingback: How to handle orientation change in android webview (Stop Reloading site when orientation change from portrait to landscape and vice versa) – Monster Techno

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top