Introduction

Their are times when need may arise to display a portion of a webpage only and not the entire page using WebView in an android application, for example an application might just need to display the blog post portion of this page only and not the comments section. In this blog post I will explain how this could be achieved using the open source libraries jsoup and htmlcleaner.

Needed Libraries

To do this, open the eclipse IDE and create a new android project, name it PortionofPageViewer and then point your browser to jsoup.org/download to download the jsoup library and htmlcleaner.sourceforge.net to download the htmlcleaner library which will both be used to select a portion of the DOM and clean up the retrieved page contents or tags respectively.

Building the application

First the Internet permission need to be added to the androidmanifest.xml file.

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

NNext things to be added are the WebView,ProgressBar and TextView widgets to the main.xml file in the res/layout folder, now in package explorer, right click the project in the package explorer and add a new folder with the name libs, right click the folder, select import and in the dialog box, select file system and browse to where the two jar files that you downloaded  are and import them to the folder. Then right click the project and select properties, in the dialog box select Java Build Path and click on Add Jar, in the dialog box select the project and select the libraries from the libs folder and click ok.

In the auto generated PortionofPageViewerActivity class, import the following packages, because they will be needed.

import org.htmlcleaner.CleanerProperties;
import org.htmlcleaner.HtmlCleaner;
import org.htmlcleaner.SimpleHtmlSerializer;
import org.htmlcleaner.TagNode;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;

Thee jsoup library can be used to select elements as well as manipulate elements using the CSS or the jquery like element selection style. The lines of codes below are responsible for connecting to a page, getting the raw html tags and selecting the elements needed out of the returned tags.

Document doc = Jsoup.connect(url).get();
Elements newsRawTag = doc.select("div#cntent");
newPage=newsRawTag.html();
        

Jsoup does a good work of returning the elements or portion of the page needed, however, the htmlcleaner does the work of cleaning up and adding the required html tags to the retrieved elements, the line of codes below do that.

HtmlCleaner cleaner = new HtmlCleaner();
CleanerProperties props = cleaner.getProperties();
TagNode tagNode = new HtmlCleaner(props).clean(newPage);
SimpleHtmlSerializer htmlSerializer =  new SimpleHtmlSerializer(props);
//the cleaned html is then passed to the webview widget for rendering
browser.loadDataWithBaseURL(null, htmlSerializer.getAsString(tagNode),
"text/html", "charset=UTF-8",null);
        

The screen cast of the device during loading and when the page has been rendered by the WebView widget are shown below.

                       

The full source code of the PortionofPageViewerActivity class is shown below