Android WebView, detect touch events with Javascript.

This example show how to create hybrid web-app, using WebView. And detect the touch events with Javascript.


/assets/mypage.html, it will be loaded in our WebView, to perform the main function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>

var p1;
var p2;

function init(){
 p1 = document.getElementById('p1');
 p2 = document.getElementById('p2');
 p1.innerHTML=navigator.userAgent;
 var canvas = document.getElementById('myCanvas');
 var canvasOffsetX = canvas.getBoundingClientRect().left;
 var canvasOffsetY = canvas.getBoundingClientRect().top;
 
 canvas.width = window.innerWidth - (2 * canvasOffsetX);
 canvas.height = window.innerHeight - canvasOffsetY - 100;
 canvas.fillStyle="#a0a0a0";

 canvas.addEventListener('touchstart', touchstartListener, false);
 canvas.addEventListener('touchmove', touchmoveListener, false);
 canvas.addEventListener('touchend', touchendListener, false);
 canvas.addEventListener('touchenter', touchenterListener, false);
 canvas.addEventListener('touchleave', touchleaveListener, false);
 canvas.addEventListener('touchcancel', touchcancelListener, false);
 
}

function touchstartListener(event){
 p2.innerHTML= "touchstart - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

function touchmoveListener(event){
 p2.innerHTML= "touchmove - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

function touchendListener(event){
 p2.innerHTML= "touchend - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

function touchenterListener(event){
 p2.innerHTML= "touchenter - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

function touchleaveListener(event){
 p2.innerHTML= "touchleave - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

function touchcancelListener(event){
 p2.innerHTML= "touchcancel - <br/>" 
  + event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
 event.preventDefault();
}

</script>
</HEAD>
<BODY onload="init()" style="border:5px solid #000000;">

<p id='p1'>un-init</p>

<canvas id='myCanvas' style="border:1px solid #FF0000;">
Canvas not support!
</canvas>

<p id='p2'></p>

</BODY>
</HTML>

/res/layout/activity_main.xml, with <WebView>.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:background="@android:color/background_dark"
    tools:context="com.example.androidhybridwebview.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://arteluzevida.blogspot.com/"
        android:textStyle="bold" />

    <WebView
        android:id="@+id/mybrowser"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

package com.example.androidhybridwebview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {

 WebView myBrowser;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  myBrowser = (WebView) findViewById(R.id.mybrowser);
  myBrowser.getSettings().setJavaScriptEnabled(true);
  myBrowser.loadUrl("file:///android_asset/mypage.html");
 }

}

Next:
- Detect touch and draw circle on Android WebView with Javascript

Labels: ,