ANDROID

How to create Android WebView App from Scratch

Create Android WebView App from Scratch

Want to turn your Android application into a web application? If yes, then an Android WebView is all that you need to work on.

Starting with what exactly is an Android WebView. It is an extension of Android’s class View, and what it does is that it integrates webpages inside the app, allowing webpages to be displayed within your application. WebView offers all the features of a typical web browser.  We can also specify the HTML string and then show it inside the app using WebView.

In this article, we shall learn using WebView from displaying a simple webpage to creating an in-app browser that shall have the features of forward, backward and bookmark. Let’s get started then!

Start by creating a new project in the Android Studio.

We need to add INTERNET permission in AndroidManifest.xml as we will be making network requests:

AndroidManifest.xml:

Now add the WebView element in the xml layout:

Then we load the particular url in WebView from our activity. E.g. loading Google’s homepage in this example:

Android WebView Frontend example

Android WebView Frontend example

Next add the Glide library support in the build.gradle. This will allow us to load the image in CollapsingToolbar:

Download this resources folder that contains required drawables and assets required for this project. Then add the contents of folder to your project.

In the activity_main.xml, add the CoordinatorLayout, Toolbar and a ProgressBar which will be shown while the webpage is being loaded.

Activity_main.xml:

Content_main.xml:

Open the MainActivity.java and modify the code as below.

The initCollapsingToolbar() method enables the collapsing effect when webpage is scrolled up and the Glide method displays the header image in toolbar:

On running the app now, we will see the webpage being loaded in the WebView! Woohoo, way to go!

Sometimes however, instead of loading a webpage from a url, we might want to load it from our app’s local storage. In that case, all html, css and fonts in the assets folder of your project and load them from there. Suppose we name the html file in the assets folder as example. html:

Example.html:

Call the following code in your MainActivity.java which will load the example.html from assets folder:

Now by calling setJavaScriptEnabled() method, you can easily enable or disable javascript functionality on a webpage:

Next enable the zooming controls (zooming in and zooming out of the webpage), using the following code:

Now let’s move over to building a simple browser activity with the forward, backward navigations and bookmark option.

Start by creating a class named Utils.java and add the below code:

Utils.java:

Here the isSameDomain() checks whether or not the url is from same domain or not. bookmarkUrl() adds or removes a url from bookmarks list using SharedPreferences. isBookmarked() checks if a url is bookmarked or not.

Create a new menu called browser.xml. under menu in the res, which places the back, forward and bookmark icons on toolbar:

BrowserActivity.java:

Now modify the code in MainActivity.java as follows:

MainActivity.java:

Here MyWebChromeClient() intercepts the methods of WebView. shouldOverrideUrlLoading() detects whether the link that has been clicked is internal or external. If it’s external, the BrowserActivity is launched.

Now that everything is done, run the app and click on the external link in the webpage and you will be able to see the in-app browser launched with the navigation.

The following code will launch the in-app browser.

In place of url, enter the url that you want to load.

2 Comments

2 Comments

  1. Yasir Siraj

    April 11, 2017 at 4:37 pm

    Plz can you tell me how to download any file like (.docx, .pdf, .img, etc)

    using webview app from my website to my mobile using android app?

    I want to download file from my website into my mobile using web view app.

    Please Help me.
    I am waiting for your reply..

  2. Dhanush

    April 23, 2017 at 7:34 pm

    You can make video tutorials in YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

Buzzing your life from assorted Coding,tips and general life opinion. Made your life Buzz by BuzzMyCode articles, share with world.

What is Buzzmycode, we had started this website to give tech savy the new way of life by reading our fresh organic content on every technology and applications.

Copyright © 2017 SyncSaS. Theme by SyncSaS Themes, powered by BuzzMyCode.

To Top