How to deploy Javascript In android applications

Android provides a very capable UI component called WebView that can be used to display HTML content. The WebView class is standard on Android and does not require anything special to use. The entry point in the 06_HtmlOnAndroid project is the class HtmlOnAndroid and shows how little code is required to get this type of application set up. Listing 6–1 shows the onCreate method of HtmlOnAndroid.

Listing 6–1. HtmlOnAndroid.onCreate()
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/index.html");
webView.addJavascriptInterface(new JavaScriptInterface(), "android");
webView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
setContentView(webView);
}
In Listing 6–1 we see that a new WebView is created and set as the contentView. This makes the WebView the only component visible in the application, allowing us to have a full screen JavaScript/HTML application. After the WebView is created, a number ofmethods are called on the WebView. These methods enable functionality that is required
by our application.
The call to webView.getSettings().setJavaScriptEnabled(true) is critical for our application because it allows the JavaScript to run, which defines the actual game. By default, JavaScript is disabled on new WebViews, perhaps for performance or security reasons.
In order to set the web page displayed by the WebView a call to loadUrl is made. As can be seen in Listing 6–1 we are setting the starting URL to file:///android_asset/index.html. The index.html file is located in the assets directory of the project. By default, any files stored in the assets directory are available
on the device at the path file:///android_asset/. Without modification, an application with a single WebView has a lot of extra stuff on the screen. We want to get rid of as much of this clutter as possible to make room for the application and to make it look more native. See Figure 6–2, which shows the application before and after our cosmetic changes are made.
Figure 6–

Fig:-6.2
You can see on the left that there is a header to the WebView and scroll bars on the right. The method call setScrollBarStyle is used to remove the default scroll bars of the WebView. Since this is a simple, full-screen application, we can remove the scroll bars to increase the viewing area and prevent some user confusion. To further increase the amount of screen area in the AndroidManifest.xml file, we set the theme of the
application to @android:style/Theme.NoTitleBar as can be seen in Listing 6–2.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="org.ljordan.anrdoid.chapter06"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".HtmlOnAndroid"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.ACCESS_ASSISTED_GPS" />
<uses-permission android:name="android.permission.ACCESS_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
</manifest>
Listing 6–2 shows the AndroidManifest.xml file for this project. Besides setting our theme for the application, we also define the permissions required by this application. It is important to note that the permissions of an application apply to an application that lives in a WebView as well. For example, if your application wants to make a call to an external server through JavaScript, you must include the INTERNET permission. This is
also true for the HTML5 location API, you must set the ACCESS_GPS and probably the ACCESS_FINE_LOCATION for this feature to work in your web view the way you want.