Saturday, July 6, 2013

Develop your own android application using HTML and JavaScript.



PreRequirements :
  •   Eclipse IDE
  •   AVD 
For Linux users every things comes under one zip ,just extract to home folder is enough.  
here you can get http://developer.android.com/sdk/index.html

For Windows users may be this  http://www.youtube.com/watch?v=TTrUX1kUpDo video will help or do other searches.

Steps 

1.  Creation of project..

     In Eclipse, choose file -> new -> android app project.
     give app name and choose next
     choose icon click next and create a blank activity and choose finish..


2. Creation of html file as application..

    Assume that this html file is your application.
    just close that default opened xml file.

    create a html file inside the folder assets 
    right click on assets and choose  new -> file 
    and give file name     ex)  my_app.html

Note : open all the files using the text editor..     

     sample html file 
----------- my_app.html--------

<html>
<head>
<script language="javascript">
function modify()
{
var obj=document.getElementById("h2");
obj.innerHTML="Using Html javascript any thing is possible !";
}
</script>
</head>
<h1 >This is Android Web Application</h1>
<h2 id="h2">Is it Possible ?</h2>
<body>
<input type="button" value="Click Me" onclick="modify()"></input>
</body>
</html> 

----------------------------------------


3. Creation of Webview layout..

  create an xml file "webview.xml" inside the folder
                res -> layout ->webview.xml 
  right click on the layout folder and click new -> file ..

webview.xml should contains following .. just copy and paste the following 


----------- webview.html--------


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

----------------------------------------

4. Modification in MainActivity.java file..

   Open the MainActivity.java file in the folder 
    src -> com.package.yourappname ->  MainActivity.java
  
    delete the @Override public boolean onCreateOptionsMenu(Menu menu) {}  method 


    import the android.webkit.WebView package..

    type the following line on the top 

        " import android.webkit.WebView; "


     create one object for the WebView class

      type the following line after this public class MainActivity extends Activity {

"  private WebView webView;  "

   inside the onCreate(Bundle savedInstanceState) method 
    set the content view to webview layout.

    modify this "setContentView(R.layout.activity_main)" line to "setContentView(R.layout.webview)" 

   and  add the following lines after the setContentView() method

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/my_app.html");  

Note: html file name should be your file name ,in my case it was my_app.html


now your MainActivity is looking like the following

----------MainActivity.java----------------

package com.example.webapplication;


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


public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/my_app.html");

}


}

-----------------------------------------------

5.Modification in the AndroidManfest.xml file..

   open the AndroidManfest.xml file and add the following line between the <uses-sdk tag > and <application tag> 

 <uses-permission android:name="android.permission.INTERNET" />



6. Run the Project..

   Save all the files and 
   Right Click on the project and choose run as -> Android Application project.



References

http://developer.android.com/guide/webapps/webview.html