Android’s WebView allows you to integrate a webpage as a part of the app. WebView comes with all the features that of a desktop browser like managing history, cookies, HTML5 support and lot more. Using webview you can build very cool apps like integrating HTML5 games in the app.
In this article we are going to learn the basic usage of WebView starting from displaying a webpage to building a simple in-app browser that provides navigation and bookmark support. You will also learn how to use the WebView with other material elements like CollapsingToolbar and NestedScrollView to achieve the native android experience.
1. The Basic Usage
Integrating a WebView in your app won’t take more than two steps. First you need to include the WebView element in your xml layout.
Second you have load the specific url in webview from your activity. The below loads google’s homepage into web view.
Even though loading a simple url seems very easy, customizing the WebView needs thorough knowledge over WebView and the methods it is providing. We’ll start with basic methods WebView is providing and later on we’ll build a simple browser activity which acts as in-app browser that provides backward, forward and bookmark options. We’ll learn one by one by starting a simple project in Android Studio.
2. Creating New Project
1. Create a new project in Android Studio from File ⇒ New Project by filling the required details.
2. As we need to make network requests, we need to add INTERNET permission in AndroidManifest.xml.
3. Open build.gradle and add Glide library support. This is required to load the image in CollapsingToolbar. This step is optional, but I suggest you follow it for this article.
4. Download this resources folder and add the contents to your project. This folder contains required drawables and assets required for this project.
5. Open the layout files your main activity (activity_main.xml and content_main.xml) and the WebView element. Along with this, I am also adding CoordinatorLayout, Toolbar and a ProgressBar which will be shown while the webpage is being loaded.
6. Now open the MainActivity.java and modify the code as below. Here initCollapsingToolbar() method is completely unrelated to WebView, but it is to provide collapsing effect when webpage is scrolled up. The Glide method is used to display the header image in toolbar.
If you run the app now, you can see the webpage is loading in WebView. Now we’ll check the other useful methods that web view provides.
2.1 Loading Local Html, CSS and Font-Style
In some cases your might need to load a web page from app’s local storage instead from an url. In order to do that we can keep all the html, css and fonts in assets folder and load them from there.
7. Create a new folder in src/main called assets (src/main/assets) and place your html, css and fonts over there. I am keeping an html file named sample.html. Also I am adding two custom fonts Roboto-Light.ttf and Roboto-Medium.ttf to apply custom font face in CSS. I hope you downloaded these resources from here.
8. Calling the below code in your MainActivity.java loads the the sample.html from assets folder.
2.3 Enabling Zooming Controls
WebView provides in-build zooming controls to zoom-in or zoom-out the webpage. These controls will be very useful when you have difficulty in reading the smaller fonts on webpage. Below code enables zooming controls on the webpage.
2.4 Building a Simple In-App Browser
Now with the basic knowledge we have, let’s see how to build a simple browser activity with backward, forward navigations and bookmark option. This in-app browser will be very useful to keep the users in your app instead of navigating them to third browser like Chrome.
9. Create a class named Utils.java and add the below code. Here
> isSameDomain() checks whether an url is from same domain or not. This method will be useful to launch the browser activity incase of external url.
> bookmarkUrl() method adds or removes an url from bookmarks list using SharedPreferences. isBookmarked() checks whether an url is bookmarked or not.
> tintMenuIcon() changes the color of toolbar icon. This method is to change the bookmark icon color when an url is bookmarked.
10. Under res ⇒ menu, create a new menu called browser.xml. This menu places the back, forward and bookmark icons on toolbar.
11. Create a new activity called BrowserActivity.java and add the below code. This activity handles the browser forward and backward navigation in the toolbar along with bookmark option.
12. Open the MainActivity.java modify the code as below. Here we use a custom MyWebChromeClient() to intercept the methods of WebView. In shouldOverrideUrlLoading() we detect whether the clicked link is internal or external. If it’s external, we launch the BrowserActivity.
Run the app and click on external link in the webpage. You can see the in-app browser launched with the navigation.
Here the code block that launches the in-app browser. Pass the intended url that you want to load.
Refrence from AndroidHive