Webview and iFrame Video full screen issue
To enable the full screen button on the YouTube player, the WebChromeClient
has to implement OnShowCustomView
and OnHideCustomView
and thus it it your responsibility to define what is "full screen" for your app as it does not have to be defined by the device's screen size.
Note: You still need the HTML5 tag of allowfullscreen
in your iFrame html source
So lets assume you have this type of layout:
LinearLayout (id = linearLayout)
LinearLayout (id = contentLayout)
Button
WebView
You can subclass WebChromeClient
and define how you wish to display "full screen" content, in this example we will assume the most outer LinearLayout
is where we want to display the YouTube video, the inner LinearLayout
contains all the Activity's content that you wish to hide while the full screen video is playing.
WebChromeClient Implementation:
public class FullScreenClient : WebChromeClient
{
readonly FrameLayout.LayoutParams matchParentLayout = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent,
ViewGroup.LayoutParams.MatchParent);
readonly ViewGroup content;
readonly ViewGroup parent;
View customView;
public FullScreenClient(ViewGroup parent, ViewGroup content)
{
this.parent = parent;
this.content = content;
}
public override void OnShowCustomView(View view, ICustomViewCallback callback)
{
customView = view;
view.LayoutParameters = matchParentLayout;
parent.AddView(view);
content.Visibility = ViewStates.Gone;
}
public override void OnHideCustomView()
{
content.Visibility = ViewStates.Visible;
parent.RemoveView(customView);
customView = null;
}
}
SetWebChromeClient Implementation:
webView.SetWebChromeClient(new FullScreenClient(linearLayout, contentLayout));
I understand that the answer is already accepted, but it took me some time to work through the code provided. I've never seen the "readonly" keyword, the "override" isn't quite where it should be, and it looks like he's answering for LinearLayout and provides FrameLayout.LayoutParams. I'm hoping this is just really good psudocode lol. If not, please let me know about the code syntax!
I posted this link in the comments section of a very useful YouTube video. If you're coming from there, you'll need need to add 2 parameters to the VideoAdapter class constructor. One for the LinearLayout(parent) and one for the RecyclerView (content).
THANK YOU to @SushiHangover for the code. You'll help many with this! Don't forget to upvote his answer.
My parent layout is LinearLayout (parent) with the child being a RecyclerView (content) that can hold multiple videos.
// Custom Web View Class to allow for full screen
private class CustomWebView extends WebChromeClient {
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
ViewGroup parent;
ViewGroup content;
View customView;
public CustomWebView(ViewGroup parent, ViewGroup content){
this.parent = parent;
this.content = content;
}
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
customView = view;
view.setLayoutParams(layoutParams);
parent.addView(view);
content.setVisibility(View.GONE);
}
@Override
public void onHideCustomView() {
super.onHideCustomView();
content.setVisibility(View.VISIBLE);
parent.removeView(customView);
customView = null;
}
}