Android WebView Tutorial With An Example Project

Image for post
Image for post

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

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(;

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


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(; mWebView.loadUrl(""); } }

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.

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.

2. Enable zoom in web view

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.


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

3. Connecting Android App to Website

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); }

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

5. Enabling safe browsing

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.

Final Words:

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

Download Android WebView example project from GitHub.

Originally published at on January 13, 2018.

Written by

Love to write on the topics of programming, data science, and cloud communications: and

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store