To display a web page as the part of the application we use android WebView in our application. We’ve covered the basics of WebView here. In this tutorial, we’ll implement a loading ProgressBar with a WebView and also allow bookmarking URLs for later viewing. Let’s get started.

Android WebView

Android WebView class is an extension of Android’s View class that allows you to display web pages as a part of your activity layout. To load an external page we invoke the method loadUrl(String url) on the WebView instance and pass in the url of the external page. The WebViewClient contains the following four important methods that are generally overridden.

  1. onPageStarted : As the name suggests, this method gets invoked when the url loading starts.
  2. shouldOverrideUrlLoading : This method is called whenever an internal link from an already loaded page is clicked. For API>24 shouldOverrideUrlLoading(WebView view, String url) is deprecated, use shouldOverrideUrlLoading(WebView view, WebResourceRequest request) instead.
  3. onPageFinished : When the url is loaded completely and successfully, this gets invoked
  4. onReceivedError : When the url isn’t loaded, this method gets invoked.

To enable zoom controls on the webview we can invoke the following methods on the webView instance.

Let’s create an application that loads a web page whilst showing the ProgressBar. We’ll add a functionality that lets us bookmark a URL and save it in our SharedPreferences for later viewing.

Android WebView with Bookmark Project Structure

android-webview-bookmarks-project-structure

We’ve selected the Activity type as Navigation Drawer.

android-webview-bookmarks-activity-type

Note: If you’ve updated your build tools to API 26 and are experiencing an error : “Failed to resolve com.android.support:appcompat-v7:26.0.1 “, you need to add Google’s Maven Repository in the build.gradle file as shown below:

Note: The Gson library dependency for saving bookmarked urls in Shared Preferences is also added above.

Android WebView Bookmarks Code

The code of the activity_main.xml layout is given below:

The code for the app_bar_main.xml layout is given below:

The layout for the content_main.xml is given below. It contains a Button that’ll be used to launch another activity.

The code for the MainActivity.java is given below:

In the above code we’ve defined two menu options(the file resides inside the menu folder as activity_main_drawer.xml) inside the NavigationDrawer.

Clicking the Button in the MainActivity.java would launch the BrowserActivity.java and clicking the Bookmark menu button would launch the BookmarkActivity.java that we’ll see shortly.

Add the following permission to access internet in your AndroidManifest.xml.

The code for the activity_browser.xml is given below.

The code for the BrowserActivity.java is given below:

In the above code, we load the url https://www.wikipedia.com in the WebView.

We display and hide the ProgressBar when the url is loading and completed respectively.

The menu is inflated from the browser.xml file as shown below.

In the onCreateOptionsMenu() we check if the current_page_url already exists in our SharedPreferences or not. Depending on the outcome, we show the relevant bookmark menu icon.

In the onOptionsItemSelected() we store or remove the url from the SharedPreferences depending on whether it exists or not.

The SharedPreferences stores the ArrayList of links and the respective web page titles, in the form of Gson strings that’ll be eventually displayed in the BookmarkActivity.java which we’ll discuss below.

invalidateOptionsMenu() is used to redraw the menu in the Toolbar.

onBackPressed() is used to navigate back through the web page if the user had clicked any of the internal links in the WebView by checking and returning using canGoBack() and goBack().

The code for activity_bookmark.xml is given below.

The code for the BookmarkActivity.java is given below.

In the above code we deserialise the strings from SharedPreferences using Gson and convert them into the respective links and titles ArrayList of Strings inside the AsyncTask LoadBookmarks.

SimpleAdapter is a built-in adapter for the ListView. Its useful to map static data to views defined in an XML file.

The layout for the ListView rows is given below:

setOnItemLongClickListener() is invoked to long press to delete a bookmark. Returning a false in it would call setOnItemClickListener() at the same time too, hence its recommended to return true.

The output that the application gives is shown below.

android webview bookmarks example app

This brings an end to this tutorial. You can download the final Android WebViewWithBookmarks Project from the link below.

References: WebView, Simple Adapter

By admin

Leave a Reply

%d bloggers like this: