Acess Android native code from
HTML, Its not that tough as you think to access native code of Android.
You just need a "
JavascriptInterface" which is a class written by you in your activity, a HTML page where you define methods & pass arguments to Android java class.
I have created a sample Android java class to
1. Show a
Toast Notification
2.
Alert builder
3.
Progress Dialog
1. Show a Toast Notification
From html you will call below method like this, where you will pass the message to your Toast Notification
AndroidNativeCode.showToast(message);
2. Alert builder
From html you will call below method like this, where you will pass the Title & Message for AlertBuilder
AndroidNativeCode.showAlertDialog(title,message);
3. Progress Dialog
From html you will call below method like this, where you will pass integer to ProgressDialog, which will be active for defined milliseconds by you.
AndroidNativeCode.showProgressDialog(parseInt(seconds));
Android java code is as follows
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
public class HtmlToAndroid extends Activity{
WebView mWebview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.html_layout);
// Assing webview object
mWebview = (WebView)findViewById(R.id.webview);
// Load your html page here
mWebview.loadUrl("file:///android_asset/www/index.html");
// Enable javascript
mWebview.getSettings().setJavaScriptEnabled(true);
// Adding javascript interface to your page.
// Pass the JavaScriptInterface class & related String "AndroidNativeCode" which will be used to call android methods written below.
// ex AndroidNativeCode.showToast("Your toast notification")
mWebview.addJavascriptInterface(new JavaScriptInterface(this), "AndroidNativeCode");
}
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
// Simple method to display Toast Notification
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
// Simple method to disply Alert Dialog
@JavascriptInterface
public void showAlertDialog(String title, String message)
{
Builder alert = new AlertDialog.Builder(mContext);
alert.setTitle(title);
alert.setMessage(message);
alert.setPositiveButton("Cool",new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
});
alert.show();
}
// Simple method to display Progress Dialog
@JavascriptInterface
public void showProgressDialog(int seconds)
{
final ProgressDialog l_progressDialog = new ProgressDialog(mContext);
l_progressDialog.setMessage("HTML to Android code");
l_progressDialog.setTitle("Wait for "+seconds+" miliseconds");
l_progressDialog.setCanceledOnTouchOutside(false);
l_progressDialog.show();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
l_progressDialog.dismiss();
}
}, seconds);
}
}
}
Layout code is as follows
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
HTML page which needs to be put in Android Project assets folder inside www folder.
<html>
<head>
<title>Android is Awesome!!</title>
<script type="text/javascript">
function getAlert()
{
var title = document.getElementById('alert_title').value;
var message = document.getElementById('alert_message').value;
AndroidNativeCode.showAlertDialog(title,message);
}
function getToast()
{
var message = document.getElementById('toast_input').value;
AndroidNativeCode.showToast(message);
}
function getProgressDialog()
{
var seconds = document.getElementById('progress_input').value;
AndroidNativeCode.showProgressDialog(parseInt(seconds));
}
</script>
</head>
<body>
<br>
<center><h1>HTML to Android Native code access</h1></center>
<br><br>
<div>
Toast Message: <input type="text" id="toast_input"/>
<br>
<Button onclick="getToast()">Toast Message</Button>
</div>
<br><br>
<div>
Alert Dialog Title : <input type="text" id="alert_title"/>
<br>
Alert Dialog Message : <input type="text" id="alert_message"/>
<br>
<Button onclick="getAlert()">Get Alert</Button>
</div>
<br><br>
<div>
Progress Dialog Timing : <input type="number" id="progress_input"/>
<br>
<Button onclick="getProgressDialog()">Get Progress Dialog</Button>
</div>
</body>
</html>
Let me know if you have any doubts.
.jpg)
