If you are developing a .NET MAUI app that uses WebViews to display web content, you might want to enable the full-screen video feature for your users. This feature allows users to watch videos in full screen mode in Android, without leaving the WebView or opening a new activity. In this post, I will show you how to enable this feature in your .NET MAUI WebViews for Android, using a simple custom handler and some native code. Let’s get started!
iOS
Good news, on iOS there are no additional changes to do, due to Apple's mobile platform already provides the full screen capability out-of-box.
Android
For Android, we need to override the WebChromeClient in order for us to enable the full-screen video feature within a WebView.
Create the new Web Chrome Client
- Create a file with the following name:
WebPlayerChromeClient.cs
and add it under the/Platforms/Android
folder - Add the following code, please review the code comments for further details
using Android.App;
using Android.Content.Res;
using Android.OS;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;
namespace DemoApp.Platforms
{
public class WebPlayerChromeClient : MauiWebChromeClient
{
private readonly Activity context;
private int originalUiOptions;
private Android.Views.View customView;
private ICustomViewCallback videoViewCallback;
public WebPlayerChromeClient(IWebViewHandler handler) : base(handler)
{
this.context = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
}
public override void OnHideCustomView()
{
if (context != null)
{
if (context.Window.DecorView is FrameLayout layout)
layout.RemoveView(customView);
// It may happen that your app is compatible with Tablet in landscape-only.
// So, use the helper method to validate it.
// Only return to original position if it is a phone
// Remove this validation if your app does not require it.
if (!IsTablet(context))
context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;
// Show again the SystemBars and Status bar
if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
{
context.Window.SetDecorFitsSystemWindows(true);
context.Window.InsetsController?.Show(WindowInsets.Type.SystemBars());
}
else
{
context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)originalUiOptions;
}
videoViewCallback.OnCustomViewHidden();
customView = null;
videoViewCallback = null;
}
}
public override void OnShowCustomView(Android.Views.View view, ICustomViewCallback callback)
{
if (customView != null)
{
OnHideCustomView();
return;
}
if (context == null)
return;
videoViewCallback = callback;
customView = view;
customView.SetBackgroundColor(Android.Graphics.Color.White);
context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;
if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
{
context.Window.SetDecorFitsSystemWindows(false);
context.Window.InsetsController?.Hide(WindowInsets.Type.SystemBars());
}
else
{
originalUiOptions = (int)context.Window.DecorView.SystemUiVisibility;
var newUiOptions = originalUiOptions | (int)SystemUiFlags.LayoutStable | (int)SystemUiFlags.LayoutHideNavigation | (int)SystemUiFlags.LayoutHideNavigation |
(int)SystemUiFlags.LayoutFullscreen | (int)SystemUiFlags.HideNavigation | (int)SystemUiFlags.Fullscreen | (int)SystemUiFlags.Immersive;
context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)newUiOptions;
}
if (context.Window.DecorView is FrameLayout layout)
layout.AddView(customView, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
}
private bool IsTablet(Activity context)
{
return (context.Resources.Configuration.ScreenLayout & ScreenLayout.SizeMask) >= ScreenLayout.SizeLarge;
}
}
}
- Create a static class WebViewHandler.cs and add the following code:
#if ANDROID
using Android.Graphics;
using Android.Webkit;
using Android.Widget;
using Android.App;
using static Android.Webkit.WebChromeClient;
using Android.Views;
using DemoApp.Platforms;
using Microsoft.Maui.Handlers;
#endif
namespace DemoApp.Handlers;
public class WebViewHandler
{
public static void EnableVideoFeatures()
{
#if ANDROID
Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping(
nameof(Android.Webkit.WebView.WebChromeClient),
(handler, view, args) =>
{
handler.PlatformView.SetWebChromeClient(new WebPlayerChromeClient(handler));
});
#endif
}
}
- Register the handler
On the MauiProgram.cs file register the handler
WebViewHandler.EnableVideoFeatures();
Conclusion
In this post, you learned how to enable the full-screen video feature for your .NET MAUI WebViews, using a custom handler and some native code. This feature can enhance the user experience of your app, by allowing users to watch videos in full screen mode, without leaving the WebView or opening a new activity. I hope you found this post useful and informative. If you have any questions or feedback, please leave a comment below.
Thanks for reading! Follow me on Twitter @ivictorhugo
Top comments (14)
Firstly, thanks for the excellent solution!
Have you tried this on .Net 8 Preview 5? Because what I'm seeing is, after leaving fullscreen mode:
I'm fairly certain this is a bug in MAUI, but since it's not an officially supported feature I'm afraid they won't address it.
Hello, @vhugogarcia , @stefanpirkl ,
So, i found workaround for you, I don't dig into it more as its work for me.
Try nuget.org/packages/FullScreenStatu... this nuget with this handler and when you appear on webview page init fullscreen mode and restore when leaving, and magic its fill entire screen.
Hello @stefanpirkl ,
Thanks for your comment! I haven’t tried since .NET MAUI 8 is still on preview. From what I saw on your comment, you are using preview 5, however, the preview 6 was released 2 weeks ago, I recommend you to update it and try it again.
Also our friend Javier from the .NET MAUI team at Microsoft has been working on the implementation of this feature natively for .NET MAUI 8, you can find the Pull-Request updates here: github.com/dotnet/maui/pull/15472
So, this feature will be officially supported in .NET MAUI 8 🙂😎
Regards,
Victor
Hi Victor,
thanks so much for replying!
Updating to preview 6 gave me a lot of unrelated compile errors and to be honest, I'm not willing to deal with those at the moment because preview 5 is working very well otherwise.
In this particular instance, we can live with setting the navigation bar invisible and having no "real" fullscreen. Knowing it will be supported in .Net 8 is awesome news!
Kind regards,
Stefan
You can register it by adding the following line:
WebViewHandler.EnableVideoFeatures();
beforereturn builder.Build();
inside thepublic static MauiApp CreateMauiApp()
method.Thank you :)
Thanks for the post. A question for you, is there any way to fit the website in one screen, webview shows only partial view of the page, and I can not automatically change the zoom level or any other settings programmatically to show entire page.
Hello @mkgungor ,
Yes, you can certainly set the high and width of the webview control to the size of the screen. If the website design you are trying to load on the webview supports multiple resolutions in a responsive way, then you should be covered. Feel free to see my post: dev.to/vhugogarcia/responsive-flyo... where I explain how to make a control to adapt to the screen resolution. You can use most of the logic and apply it to a webview control.
I hope I could help :)
Regards,
Victor
Working fine this, but I can't back to page or close this Page Container Web
Hello @phantomkna ,
Glad it worked OK. It is strange you cannot get back. Set a breakpoint on the method
OnHideCustomView()
and confirm it is being executed.Hi bro, everything ok, the problem is because another control when as called, thx you soo much!!
In maui webview even when setting Horizontal options FillandExpand some part of video is getting cut which include full screen option.
Hello,
I’m developing an app using MAUI .NET 8.0 for Android TV and Android phones. I need to enable full-screen mode for a website within a WebView, but my current code doesn’t seem to be working.