Android WebView in Kotlin for absolute beginners

What is WebView

WebView can be used to deliver a web application as part of a client application. The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. It does not include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView does, by default, is show a web page.

Using WebView on Android without using Cordova

The first thing we are going to do is create a new Android project using Android Studio. Select ‘File’ -> ‘New’ -> ‘New Project’ from the menu. Android Studio will display a wizard giving you a choice of which Project Template to base your app from.

We will select the ‘Basic Activity’. Then click on the ‘Next’ button. The next screen asks you what you want to name the app and the Package name.

Pick a name for your application, package, and choose ‘Kotlin’ for the language. Then click on the ‘Finish’ button, and Android Studio will create the template for the application.

Adding the WebView

In your project expand the ‘res’ folder , then the ‘layout’ folder in your ‘app’. Open the ‘content_main.xml’ layout. You will see the white and green preview screens side by side. Click on the white preview to select it, then delete the fragment.

In the palette on the upper left hand side, select ‘Widgets’, then click and drag the ‘WebView’ widget into the center of the view. Once you have dropped it into place, we will need to fix the constraints. We can do this by clicking on the ‘Infer Constraints’ button at the top of the view window. It looks like a magic wand. Once this has been done, the semi-circles at the top, bottom, left and right of the view will turn blue.

In the ‘Attributes of the view we are going to rename the id from ‘webView’ to ‘myWebView’.

Changing the activity

Now that we have added the WebView widget the view, we change the code in the main activity to load an external website into the WebView. Open the ‘MainActivity’ class and delete the following code from the ‘onCreate’ function.

Now we can add our code for loading the a website into the WebView. Add the following code to the ‘onCreate’ method after the setSupportActionBar. You should put your app url within myWebView.loadUrl(“ www.mywebApp.com”).

For demonstration purposes I will use www.google.com

You will also need to add the android.webkit.WebView to the imports at the top of the activity as well as android.webkit.WebViewClient and android.webkit.WebResourceRequest.

In order to load an external website into the WebView, you will have to add a permission to the AndroidManifest.xml file for INTERNET access. After the </application> tag, add the INTERNET permission.

Tapping on a link in the WebView

In order to open up hrefs in the WebView we will have to override the default behaviour of the WebView. We can do this by adding a WebViewClient to the webViewClient property on our WebView. Add the following lines to the ‘onCreate’ function before we call the ‘loadUrl’ function. The final ‘onCreate’ function should look like this:

JavaScript is by default turned off in WebView widgets. Hence web pages containing JavaScript references won’t work properly. To enable JavaScript the following snippet needs to be called on the webView instance:

Now you should be able to run your app and have it use the new WebView widget. Lets see what we get below:

et Voila!

We have just scratched the surface on what we can do with WebViews on Android. The next steps for me will be to integrate push notifications.