Working With WebViews

It’s a different kind of www, but working with WebViews can completely change your development potential.  If you’re an experienced developer but have very little mobile app experience, WebViews might be exactly what you’re looking for.

Taking a Step Back:

Before diving into this newly hyped up feature, let’s take a second to actually explain what a webview is. To your app it’s not much more than a black box (the term for something that performs logic you’re unaware of).  A lot of stuff happens in a webview but for the most part your app can ignore it.  It’s just another View the same way Buttons or TextViews are.

But webviews are so much more to your user.  They’re a view that displays a web browser and allows the user to navigate to new web pages.  Access to the entire internet with almost zero development!  There’s a little set up logic but that’s all you need.

So why would you want this?  Well usually the answer is work efficiency.  If you’re building an app and a website, it’s not ideal to do twice the work.  It is ideal to build good experiences for your userbase though, and that’s why not everything is a webview.  Native app experiences will be a lot smoother and responsive, whereas with a webview you’ll have to wait for everything to load on the page.  That being said there are uses for either scenario

Setting It Up:

Setting up a WebView in your app is extremely simple.  As with most views there are two parts to it, defining the view in your xml activity and then syncing it up with an actual WebView object in your java/kotlin code.  To declare the view in your xml you’ll create it the same way as other views:

         <WebView

               android:id="@+id/webview"

               android:layout_width="match_parent"

               android:layout_height="match_parent" />

 

And that’s it!  Now to sync it up with your logic you’ll need to create an instance of the WebView class and anchor it to the xml view.  Using a popular Android library like Butterknife it looks something like this:

        @BindView(R.id.webview)

        WebView webView;

Then you’ll need to implement WebViewClientListener and add this associated method:

        webView.setWebViewClientListener(this);

And finally we can override these three methods:

        @Override

        public void onPageStarted(final WebView view, final String url, final Bitmap favicon) {

            //Do something when a page starts loading

        }

        @Override

        public void onPageFinished(final WebView view, final String url) {

            //Do something when a page finishes loading

        }

        @Override

        public void onPageCommitVisible(final WebView view, final String url) {

            //Do something when a page is visible

        }

What we’ve done at this point is added a WebView to our screen.  We’ve also added methods to respond whenever a page changes on the WebView.  What this means is our app is now able to natively respond to new URLs a user loads in the WebView.  What you do at this point is up to you and your creative limits!

Interacting With WebViews:

While we said earlier that a WebView is a black box, there are a couple different ways you can interact with them.  Like we saw above you can see the URLs that are loaded and use those in your apps. But you can also get much more intertwined by either listening for JavaScript methods or calling JavaScript methods on the WebView.  To do these you need to know what’s going on with the website users are looking at, but it can create some really cool experiences.

You can also track what cookies are on the site.  There are a couple useful interactions to be aware of, and we’ll cover them all in another post soon.  In the meantime you should try adding a WebView to your apps and let us know what you think in the comments below.