Launch: WebView-based Android Apps

On one Wednesday afternoon it was work as usual when my manager came to my office and asked to build a quick prototype that needs to be presented 2 days to a client. It was a prototype to show the capabilities of our product but on mobile phones with the app downloaded from the play store.

Our product is working seamlessly on a web browser, but now it needs to be presented as an android application. At first, generating such a prototype looked like a very tedious task. Many good ideas came in like opening the Url in Chrome and then making it an icon on the home screen. But all ideas were hit by roadblocks like

• The application must be downloaded from the app store.
• All the links must not navigate to any of the web browsers like chrome etc.

While doing some research and browsing on Android developers page, I stumbled upon a very interesting Android API, after going through the documentation for several minutes the prototype for Friday looks a downhill task. One must be wondering how a single API makes the task so much easier. That API is Android Webview.

Android WebView API

WebView objects allow the display of web content as part of the activity layout but lack some of the features of fully-developed browsers. A WebView is useful when there is a need for increased control over the UI and advanced configuration options that will allow you to embed web pages in a specially designed environment of the android app. Some of the common scenarios of using WebView are:

• Update in user agreements, policies, etc. which need to be presented both on the corporate websites and also in the company’s app.
• To retrieve data from the internet such as email, android developer pages, etc.

Get webpages on the android app

• The pre-requisite for adding the web pages to an android app is to have either currently working or a new empty android app.
• Add WebView to activity layout, add the following code to the activity’s layout XML file.

<WebView
 android:id="@+id/webview"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
/>

• To load a web page in the WebView, use the loadUrl() method, pass your favorite URL in the loadUrl method.

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

• Finally, the app must have access to the internet. To get internet access, request INTERNET permission in the manifest file.

<manifest>
 <uses-permission android:name="android.permission.INTERNET" /></manifest>

• Run the app on the mobile, and you can see the home page inside the app. Hurray! We did it.
• But the road is half paved, as soon as one clicks on a link it will be re-directed towards browser. This is not good, as an app developer I don’t want my audience to be re-directed towards web browsers.

Handling Page Navigation

Whenever the user clicks a link from a web page in Webview, the default behavior is for Android to launch an app that handles URLs. Usually, the default web browser opens and loads the destination URL. However one can override this behavior for Webview, so links open in Webview. One can then allow the user to navigate backward and forward through their web page history that maintained in the Webview.

• To open links clicked by the user, provide a WebViewClient to the Webview, using setWebViewClient().

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = WebViewClient()

• Now all links the user clicks load in the Webview. Eureka, All set to launch a web app as an android app.

Gaining More Control of WebView

• If one wants more control over where a clicked link loads, create your WebViewClient that overrides the shouldOverrideUrlLoading() method.

private class MyWebViewClient : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
if (Uri.parse(url).host == "www.example.com") {
 // This is my web site, so do not override; let my WebView load the page
 return false
}
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
 startActivity(this)
}
return true
}}

• The above code checks whether the URL host matches a specific domain, if it does match, then the method returns false to not override the URL loading (it allows the WebView to load the URL as usual). If the URL host does not match, then an Intent is created to launch the default Activity for handling URLs (which resolves to the user’s default web browser).

Conclusion

Now you have a great WebView app, showing and navigating clicks within the Webview.

Thanks :)

Happy Coding :)