How to make a Youtube and Facebook videos go fullscreen in android wordpress client app shown in webview

Question

I have created one wordpress client app, where I am also showing a video(In the webview loading embed code) on the top of the AppBarLayout and below its content like this Post view

How do I add a option to make it go fullscreen?

Answer 1

First, you need to create a custom WebChromeClient class, which implements the onShowCustomView and onHideCustomView methods.

private class MyWebChromeClient extends WebChromeClient {
FrameLayout.LayoutParams LayoutParameters = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
        FrameLayout.LayoutParams.MATCH_PARENT);

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
    // if a view already exists then immediately terminate the new one
    if (mCustomView != null) {
        callback.onCustomViewHidden();
        return;
    }
    mContentView = (RelativeLayout) findViewById(R.id.activity_main);
    mContentView.setVisibility(View.GONE);
    mCustomViewContainer = new FrameLayout(MainActivity.this);
    mCustomViewContainer.setLayoutParams(LayoutParameters);
    mCustomViewContainer.setBackgroundResource(android.R.color.black);
    view.setLayoutParams(LayoutParameters);
    mCustomViewContainer.addView(view);
    mCustomView = view;
    mCustomViewCallback = callback;
    mCustomViewContainer.setVisibility(View.VISIBLE);
    setContentView(mCustomViewContainer);
}

@Override
public void onHideCustomView() {
    if (mCustomView == null) {
        return;
    } else {
        // Hide the custom view.  
        mCustomView.setVisibility(View.GONE);
        // Remove the custom view from its container.  
        mCustomViewContainer.removeView(mCustomView);
        mCustomView = null;
        mCustomViewContainer.setVisibility(View.GONE);
        mCustomViewCallback.onCustomViewHidden();
        // Show the content view.  
        mContentView.setVisibility(View.VISIBLE);
        setContentView(mContentView);
    }
}
}

Basically, what is happening here is when the full screen button gets pressed, we're creating a new view to hold the video and hiding the main view. And then when full screen is closed, we do the opposite - get rid of the new view and display the original view.

You'll need to also add all those properties to your activity class:

private MyWebChromeClient mWebChromeClient = null;
private View mCustomView;
private RelativeLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;

And you probably want to make it close the fullscreen video when the back button is pressed:

@Override
public void onBackPressed() {
if (mCustomViewContainer != null)
    mWebChromeClient.onHideCustomView();
else if (myWebView.canGoBack())
    myWebView.goBack();
else
    super.onBackPressed();
}

Then it's just a matter of using your new class when you create your webview:

myWebView = (WebView) findViewById(R.id.webView1);
mWebChromeClient = new WMWebChromeClient();
myWebView.setWebChromeClient(mWebChromeClient);

I hope this works for you. :) If you like this then do accept my answer.