Thursday 12 December 2013

Android Native Data to HTML page

Here comes one more Blog on HTML5.

Have you ever tried sending data from Android native to HTML page? like SMS, Call, JSON Array etc.

This blog gives you a clear picture how to pass Data to HTML5.

I have created 2 methods getTimeAndroid() which passes String to setTime() (javascript method)and getValueJson() passes JsonArray to setJson() (javascript method) respectively.

You 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.






Android Native code 



package com.rnd.rnd;

import java.text.SimpleDateFormat;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class HtmlToAndroid extends Activity{
WebView mWebview;
@SuppressLint("SetJavaScriptEnabled")
@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
// 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. 
mWebview.addJavascriptInterface(new JavaScriptInterface(this), "AndroidNativeCode");
mWebview.loadUrl("file:///android_asset/www/index.html");
}
public class JavaScriptInterface {
        Context mContext;

     
        JavaScriptInterface(Context c) {
            mContext = c;
        }

        // Simple method to pass Data to HTML
        
     @SuppressLint("SimpleDateFormat")
@JavascriptInterface
        public void getTimeAndroid() {
     
    long date = System.currentTimeMillis(); 

SimpleDateFormat sdf = new SimpleDateFormat("dd MMM yyyy HH:mm");
             mWebview.loadUrl("javascript:setTime('"+sdf.format(date)+"')");
     
        }
     
     // method to send JsonArray to HTML
     @JavascriptInterface
     public void getValueJson() throws JSONException
     {
    JSONArray jArray = new JSONArray();
      
     
      JSONObject jObject = new JSONObject();
      
      jObject.put("Name", "Jackson");
      jObject.put("Age","24");
      jArray.put(jObject);
      
      jObject = new JSONObject();
      jObject.put("Name", "Jenny");
      jObject.put("Age","23");
      jArray.put(jObject);
      
      jObject = new JSONObject();
      jObject.put("Name", "Fenny");
      jObject.put("Age","28");
      jArray.put(jObject);
      
      mWebview.loadUrl("javascript:setJson("+jArray+")");
          
      
     }
        
    }
}


HTML page

<html>
<head>
<title>Android is Awesome!!</title>

<script type="text/javascript">

function getTime()
{
AndroidNativeCode.getTimeAndroid();
}



function setTime(time)
{
document.getElementById('datetime').innerHTML = time;
}


function getJson()
{
AndroidNativeCode.getValueJson();
}

function setJson(Jsonobject)
{

var log="";
for(var i =0; i<Jsonobject.length;i++)
{
log+= Jsonobject[i].Name +" : "+ Jsonobject[i].Age + "<br> <br>" ;

}
document.getElementById('JsonDiv').innerHTML = log;
}
</script>

</head>

<body>
<br>
<h1>Android DATA to HTML</h1>
<br>
<Button onclick="getTime()">Time</Button>
<div id="datetime"></div>


<Button onclick="getJson()">JSon Data</Button>
<div id="JsonDiv"></div>

</div>


</body>
</html>



Android Layout


<?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>

If you like it then please share it. Also if you know anything like please feel free to share

Also see 


  1. Also check out how to operate your Android phone from Window OS. 
  2. Android apk generation through command line 
  3. Android SQL browsing through Windows
  4. Access Android Native code from HTML
  5. ADB over Wifi 
  6. EditText to TextView conversion 
  7. SVN for Android Eclipse



2 comments:

  1. Can you set your code to "block code", because I'm bit confuse to see your code without highlight.

    ReplyDelete
  2. can we do the same thing with typescript angular
    with hosted javascript?

    ReplyDelete