0 Replies - 1456 Views - Last Post: 09 March 2019 - 01:31 PM

#1 hexagod   User is offline

  • 😂😂😂
  • member icon

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

How to Hide Page Elements in Xamarin.Android WebView

Posted 09 March 2019 - 01:31 PM

Originally posted as a tutorial, but I think it falls more under a snippet (since there's not much to this).

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 Fragments 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)

            if (Arguments != null)
                    _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 class definition; this is critical
            var _wvc = new MyWebViewClient();

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

            _wv.Settings.JavascriptEnabled = true;

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


            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


and the result is

Attached Image

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

Mods please delete the tutorial

EDIT: for clarity, formatting

This post has been edited by hexagod: 09 March 2019 - 11:17 PM

Is This A Good Question/Topic? 0
  • +

Page 1 of 1