Android WebView Tutorial With An Example Project + Download Code

5
688

Do you own a blog or a website and want to turn it into a fully functional Android app? Having an Android app is a plus point as it stays close to the users and they can access your website anytime with just a single tap!

So if you have the same intentions, then this tutorial is just for you. You will learn how to convert a website into an Android app with just a few lines of code using WebViews concept.

A WebView is basically a container which renders a predefined or user-defined web address. Hybrid apps mostly work on the concepts of WebViews which enable web developers to reuse the website code and target multiple platforms at once. WebViews runs the web technologies on your device and also write the code in those languages to leverage the native components like camera, sensors, etc.

In this tutorial, we will create a simple web-based app for our blog using the WebView control and also how you can make it more usable by enabling zoom, navigation, and safe browsing.

Also Read: Android app to autocorrect grammar while typing.

Now, let’s get started.

1. Loading website in the WebView

The first thing you have to do is allow your app to access the internet connection of the phone.

To do this add this line to your AndroidManifest.xml.

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

Now, add a WebView to your activity layout. Just drag and drop the WebView widget from the Palette to the designing screen of the activity. This will automatically generate the code in the XML file of the activity, as shown in the code snippet below.

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

Next, create a reference of the WebView in the activity class file.

mWebView = findViewById(R.id.codeitbro_web_view);

In order to render a webpage in the WebView call the loadUrl(“URL”) function.

mWebView.loadUrl("https://example.com/");

Here is the complete code of the activity class file, for your reference.

public class MainActivity extends AppCompatActivity {

    WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.codeitbro_web_view);
        mWebView.loadUrl("https://codeitbro.com/");
    }
}

Now you are all set to launch the app and as you will launch it the app will render the specified address, as shown in the screenshot below.

simple android app using webview

But as you will interact with the WebView, you will notice that it is not quite working as expected. No buttons on the rendered web view are clickable and images are also not fetched correctly. It is mainly because by default, the JavaScript is disabled in the WebView. Therefore, you must enable it to make your site usable in the WebView.

You can enable it by adding these lines of code.

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Try running your WebView app again and this time you will be able to use the website and images will be loaded as it would in any other browser.

enabling javascript in Android webview example project

2. Enable zoom in web view

What if users want to zoom in or out while using your site in this Android WebView example project?

No worries, you can enable this functionality too. Just use the code line specified below and add it to your activity class to enable zoom controls.

webSettings.setBuiltInZoomControls(true);

zoom in webview android app

Build the WebView project again and execute the app and viola the zoom feature is working!

3. Connecting Android App to Website

Yes, we can also bind an android app to the website using the JavaScriptInterface.

Here’s how to do it.

First, add a class named WebAppInterface to your app and add a variable named mContext of type Context.

public class WebAppInterface 
{
 Context mContext;
}

Now, instantiate it using the constructor.

WebAppInterface(Context c) 
{
   mContext = c;
}

And now, I will create a method to show a toast.

@JavascriptInterface
 public void showToast(String toast) 
{
   Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}

Don’t forget to add @JavascriptInterface above you method otherwise, it will not work.

Now add this interface to your WebView.

mWebView.addJavascriptInterface(new WebAppInterface(this),"Android");

The first parameter of the addJavascriptInterface() is the class that we created i.e., WebAppInterface. And, the second parameter is the name of the class using which will call the function to display the toast message.

Now, add a button to your site, using the code below.

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')"/>
function showAndroidToast(toast) 
{
   Android.showToast(toast);
}

Connecting Android webview App to Website

Now, run the app again and load the webpage on which you added the button. Click on it and a toast will appear, as shown in the screenshot above.

4. Navigating back to previous pages

Users will not like your app if they can’t visit the previous pages. To enable navigation i.e., allowing users to visit the previous web pages use the goback() function.

mWebView.goBack();

5. Enabling safe browsing

As a good Android developer, it is your job to ensure the security of your users. Fortunately, WebViews make it easier for you to make sure that the users browse just the safe side of the internet with its Safe Browsing feature.

If you will enable safe browsing, the WebView will show a warning if users try to visit any malicious URL. Use this line of code in the AndroidManifest.xml file of your Android WebView app project to enable safe browsing.

<meta-data android:name="android.webkit.WebView.EnableSafeBrowsing"
            android:value="true" />

Final Words:

We hope that this tutorial will help you to create a simple WebView Android app in no time. If you come across any issues, then put them in comments and we will be more than happy to assist you.

You can also download or clone our GitHub repository for this tutorial from the link below.

Download Android WebView example project from GitHub.