WebView shows website fine, but custom WebViewClient renders site menu pop-ups as a blank.

I have a requirement in my cross-platform Xamarin Forms project to use a custom WebViewClient so that I can use a JavaScript bridge to gather some site information back into my application.

I prototyped the application using a simple Xamarin Forms WebView control. This works fine on all the IOS and Andriod devices I've tried thus far.

The issue is that when I move to using a custom WebViewClient (following published examples like this one [https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/hybridwebview/]), and I navigate to the website on some android devices, the hamburger-like menu button on the website's header causes the entire browser view to go straight white. I can blindly poke around on the blank screen and hit a menu link, and it navigates to the clicked on content, but I can't see at all what I've picked.

I have three Android 6.0.1 devices - Motorola Turbo 2 (works fine), Samsung S5 (menu causes white screen), and another Honeywell device (menu causes white screen).
I have also tried an Android 5.0.1 device - Samsung S4 (works fine).
I have not yet tried the custom WebViewClient on IOS, but will be soon.

As you can see, on Android, it seems that it varies from device to device whether or not the custom WebViewClient will work properly with the website animations. I do not have the full details on the website's menu scripting, as it was done by a 3rd party, who may have used 3rd party (to them) libraries. Not feeling like I can proceed with the custom WebViewClient, but it is needed to satisfy my requirements.

I'm not sure if it has anything to do with the issue, but the website has implemented a responsive design. Other posts mention this as a point to consider, so I mention it here. Again, the home page loads and displays fine, it's just the slide-out menu animation that completely blanks the screen for some devices.

Custom WebViewClient related question- Once I've supplied a URI in the constructor for my ContentPage, it navigates to the desired URL. Beyond that though, I've not been able to have a button (for example) set the URI to a different desired path/site page and cause navigation. It sets my URI property, but the control does not navigate. Looking at what the renderer does, it seems logical that the control has been rendered, and the job may be seen as "done". I need the generated Android.WebKit.WebView to react to the changed URI settings and navigate. This is likely a coding issue, or something I'm overlooking related to binding, but I've not yet found examples that are doing anything different than the published examples I've been looking at. I will also need to be able to do this on IOS, which I've seen will take a differently coded custom WebViewClient class.

Best Answer

  • CurtisHerrickCurtisHerrick US
    Accepted Answer

    SOLUTION:
    I worked with Xamarin / Microsoft on this issue. They suggested I use the WebViewRenderer class, which I've not found example usage of. To familiarize, I took a look at the sourcecode for it on GitHub. I spotted a difference between their code and mine.

    They had:

    webView.LayoutParameters = new global::Android.Widget.AbsoluteLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent, 0, 0);

    in their OnElementChanged(etc) routine. I added that to my code and my white screen issues were no more on the devices I've been testing with that had been having them.

    Looking at the resulting code in Visual Studio (2015) though, it was giving obsolete error warnings about using AbsoluteLayout, which could trip up builds when treating warnings as errors. I searched on it and found an equivalent solution here that seems to work just as well:

    webView.LayoutParameters = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);

    This works, prevents the menu pop-up/slide-out white screen, and does not give build warnings in VS.

Answers

  • CurtisHerrickCurtisHerrick USMember
    Accepted Answer

    SOLUTION:
    I worked with Xamarin / Microsoft on this issue. They suggested I use the WebViewRenderer class, which I've not found example usage of. To familiarize, I took a look at the sourcecode for it on GitHub. I spotted a difference between their code and mine.

    They had:

    webView.LayoutParameters = new global::Android.Widget.AbsoluteLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent, 0, 0);

    in their OnElementChanged(etc) routine. I added that to my code and my white screen issues were no more on the devices I've been testing with that had been having them.

    Looking at the resulting code in Visual Studio (2015) though, it was giving obsolete error warnings about using AbsoluteLayout, which could trip up builds when treating warnings as errors. I searched on it and found an equivalent solution here that seems to work just as well:

    webView.LayoutParameters = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);

    This works, prevents the menu pop-up/slide-out white screen, and does not give build warnings in VS.

Sign In or Register to comment.