Apr 29, 2011

Android: WebView, Detect HTML Element on Click

Android WebView allow us to display web pages inside the application. Also allowed to  interact with web content, there are several reasons that you might want to use WebView in your applications. It is powerful enough to execute JavaScript. It allow us to load HTML content as String and also display Web Page from domain/URL.

Here I am going to teach you how to detect user's action. Suppose you want to take specific action when user click on image or button or link then it is possible.

We can detect following HTML elements as per Android API Document.

int ANCHOR_TYPE HitTestResult for hitting a HTML::a tag
int EDIT_TEXT_TYPE HitTestResult for hitting an edit text area
int EMAIL_TYPE HitTestResult for hitting an email address
int GEO_TYPE HitTestResult for hitting a map address
int IMAGE_ANCHOR_TYPE HitTestResult for hitting a HTML::a tag which contains HTML::img
int IMAGE_TYPE HitTestResult for hitting an HTML::img tag
int PHONE_TYPE HitTestResult for hitting a phone number
int SRC_ANCHOR_TYPE HitTestResult for hitting a HTML::a tag with src=http
int SRC_IMAGE_ANCHOR_TYPE HitTestResult for hitting a HTML::a tag with src=http + HTML::img
int UNKNOWN_TYPE Default HitTestResult, where the target is unknown
Src : http://developer.android.com/reference/android/webkit/WebView.HitTestResult.html

Here are many HTML element missing. like RadioButton, CheckBox etc.. I can not detect radio button or check box click event.

Here I assume that you are Android programmer and you know how to create projects.

1. Create Project named "MyWebView"
2. Package Name "com.kpbird.mywebview"
3. Activity Name "MyWebView"
4. Edit  MyWebView.java , main.xml and AndroidManifest.xml


In following I have implemented onTouchListener. when user click on WebView this event will call. In setOnTouchListener function I have created object of View.OnTouchListener interface.
WebView has inner class named "HitTestResult". HitTestResult class will help us to find the HTML element which press when user click on WebView.

HitTestResult class has only two method.

  1. getExtra() : It return String. String has HTML element which is clicked by user
  2. getType() : It return integer. It is used to identify which HTML element is clicked by user.
In following code I have print getExtra() and getType() value in LogCat.

package com.kpbird.mywebview;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.RadioButton;

public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    String TAG = this.getClass().getSimpleName();
    WebView wv;
    public void onCreate(Bundle savedInstanceState) {
        wv = (WebView) findViewById(R.id.MyWebView);
        wv.setWebViewClient(new VideoWebViewClient());
        wv.getSettings().setUserAgentString("Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)");
        wv.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                WebView.HitTestResult hr = ((WebView)v).getHitTestResult();
                Log.i(TAG, "getExtra = "+ hr.getExtra() + "\t\t Type=" + hr.getType());
                return false;
    private class VideoWebViewClient extends WebViewClient {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {


            return false;




Add WebView XML tag in main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <WebView android:id="@+id/MyWebView" android:layout_width="fill_parent" android:layout_height="fill_parent" />



Add User Permission for INTERNET.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MyWebView"
                  android:label="@string/app_name" android:screenOrientation="portrait">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />