5 secrets about WebView on Android that you (probably) did not know

Tram Ho

WebView is an integral part of today’s applications. They allow you to quickly add a handy UI screen by leveraging the techniques from the web development team.

And WebViews can do more than just display web pages.

In this article, I’ll list some lesser-known tips and tricks to help Android developers power WebViews and have better control over JavaScript right from the native Java / Kotlin code base.

Les’t go

1. Intercepting URLs

By implementing the shouldOverrideUrlLoading method during WebViewClient ‘s initialization, you can intercept the URL using pattern matching during the url navigation.

This way, you can control whether the URL should be loaded or open a certain activity / service using the Intent.

The following code snippet shows the actual method you need to implement:

2. Basic Web Authentication

A lot of websites prompt users to enter their credentials. When setting up WebView in Android for the first time, you might miss this and lead to 401 authentication error when loading the page. But don’t worry, by implementing the following method, you can easily perform basic authentication in Android WebView:

In addition, for automatic login, you can add an additional authorization condition as a Map data structure in the loadUrl function.

3. Setting Listeners for WebView Buttons and EditText

Sometimes, you may want to store certain data from WebView forms in Android. Or perhaps you want to perform an action from the native side when a button inside the Android WebView is clicked.

Thankfully, we can take advantage of the Android-JavaScript interoperability.

If you know the view / widget ID in HTML, then performing the relevant action in your Android code based on WebView interactions is pretty straightforward.

Just use the evaluateJavaScript method and convert the JS code as a string. And for best practice, this should be done in the onPageLoadFinishing method:

The above code is meant to capture the details of the WebView form when a button is clicked and pass them to the native Android.onWebBtnClick method. To make it work completely, you need to create a class for the JavaScript interface and set it on the WebView.

Here’s how to do it:

And now, you just need to set the WebView as shown below:

Too great, right k? We tried to build an interface bridge between Android and JavaScript. This is great for listening for UI changes on the website and thereby triggering the methods on native Android.

4. Trigger JavaScript Alert Prompts From Android

By default, the promt from JavaScript doesn’t display natively in Android. So we need to override the onJsAlert , onJsPrompt, and onJsConfirm methods in the WebChromeClient interface to display the JavaScript alert () and other functions to confirm or enter text in the promt.

By implementing the following functionality, you can provide an Android pop-up UI dialog to give users a more native experience:

5. Display Android File Chooser From WebView

The JavaScript <input> tag allows you to upload files. Now, this is pretty straightforward in iOS, as you don’t need to do anything.

But in Android we need to implement the onShowFileChooser method inside WebChromeClient, where you have to set up a file picker by native (native file picker).

Basically, we will need to use the WebKit’s ValueCallBack interface to help convert the data from the Android file picker to JavaScript code.

Here is a summary of the onShowFileChooser method:

In onActivityResult, when you get image data, just pass it to uploadFile instance in following way:

As such, it’s how the code is managed to pass the selected image from Android to the JavaScript code.

Conclude

WebView in Android may be the simplest thing to deploy, but there are a lot of details to consider.

If we know how to take advantage of the JavaScript-Android interoperability, then you can pass the data to WebViews from native Android code and vice versa.

Thanks for reading.

Reference: https://medium.com/better-programming/5-android-webview-secrets-you-probably-didnt-know-b23f8a8b5a0c

Share the news now

Source : Viblo