Page 1 of 1

How to Hide Page Elements in Xamarin.Android WebView

#1 hexagod   User is offline

  • 😂😂😂
  • member icon

Reputation: 31
  • View blog
  • Posts: 577
  • Joined: 29-October 16

Posted 09 March 2019 - 12:13 PM

I had to search for the answer a while on this, and the implementation that I was able to get working is slightly different than the Android Studio Java solutions I found. There are also a lot of conflicting answers, or solutions that aren't well formulated, tested/simply don't work. This is the only way I have been able to hide page elements in Xamarin WebView.

using Android.Graphics.Drawables;
using Android.OS;
using Android.Support.V4.App;
using Android.Views;
using Android.Webkit;
using Android.Widget;

//I am using BottomNavigationViewPager but this will work with Activities as-well
namespace BottomNavigationViewPager.Fragments
{
    //create a fragment class
    public class TheFragment1 : Fragment
    {
        string _title;
        string _icon;
        
        // instantiate a WebView here using protected static modifiers
        protected static WebView _wv;

        //instantiate the fragment
        public static TheFragment1 NewInstance(string title, string icon) {
            var fragment = new TheFragment1();
            fragment.Arguments = new Bundle();
            fragment.Arguments.PutString("title", title);
            fragment.Arguments.PutString("icon", icon);
            return fragment;
        }

        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            if (Arguments != null)
            {
                if(Arguments.ContainsKey("title"))
                    _title = (string)Arguments.Get("title");

                if (Arguments.ContainsKey("icon"))
                    _icon = (string)Arguments.Get("icon");
            }
        }

        //MyWebViewClient needs to be instantiated inside OnCreateView
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {

            //get our view
            var view = inflater.Inflate(Resource.Layout.TheFragmentLayout1, container, false);

            //assign _wv (instantiated above) using FindViewById method
            _wv = view.FindViewById<WebView>(Resource.Id.webView1);

            //we need to instantiate a new WebViewClient but using MyWebViewClient instance
            //see below for the constructor, this is critical
            var _wvc = new MyWebViewClient();

            //use SetWebViewClient method to set _wv (WebView) to use _wvc (MyWebViewClient)
            _wv.SetWebViewClient(_wvc);

            _wv.Settings.JavascriptEnabled = true;

            //this didn't work, don't do 
            //_wvc.OnPageFinished(_wv, _jsHideBannerC);

            _wv.LoadUrl("https://www.duckduckgo.com/");

            return view;
        }

        //we need to provide a constructor for MyWebViewClient
        // can be: YourWebViewClientNameHere : WebViewClient 
        private class MyWebViewClient : WebViewClient
        {
            //I wouldn't use OnPageStarted to hide elements but you could add things here or try
            //you could also just remove OnPageStarted, it's not critical for this tutorial
            public override void OnPageStarted(WebView view, string url, Android.Graphics.Bitmap favicon)
            {
                base.OnPageStarted(view, url, favicon);
            }

            //here's the syntax for OnPageFinished 
            public override void OnPageFinished(WebView view, string url)
            {
                base.OnPageFinished(view, url);

                //create a string and replace content_homepage with any page element id
                //you can right click on your webpage and inspect element to find the element id
                string _jsHideBanner = "javascript:(function() { " +
                                "document.getElementById('content_homepage').style.display='none'; " + "})()";

                //when I tried to use this I got an exception no "display" property
                //you may be able to tinker and get it to work.
                string _jsHideBannerC = "javascript:(function() { " +
                    "document.getElementsByClassName('logo-wrap--home').style.display='none'; " + "})()";
                //then we pass our javascript function via LoadUrl method of WebView
                _wv.LoadUrl(_jsHideBanner);
            }


        }
    }
}




I hope this helps you. I know more experienced programmers would probably be able to figure it out really quickly, but it was a bit difficult for me to put the pieces together, and this is how I was able to do it. :smile2:

Here's the template I used

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Page 1 of 1