tekpot blogs: December 2012

In this post, I am going to explain how to create a simple android application using Html and javascript as grphical interface. Basic concept is loading html file in Webview object using Web Client in Android.

Assuming Eclipse environment for developing Android applications is ready.

What we are going to do sample?
Create a html file which contains few hard coded contacts list items and two buttons (Exit & About) on the top in Main page. On About click, About us page will be shown. Back button in About Us page returns to Main page.

Create new Android project by clicking File>New>Android Application Project and name it as 'MyContacts'.

First we design a simple HTML file to host it on mobile.
Contact.html

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
        body
        {
            background: Black;
            color: White;
            font-size: small;
        }
        .Header
        {
            border: 1px solid #AAA;
            width: 100%;
        }
        
        .Button
        {
            text-align: center;
            border: 1px solid #333;
            background: #AAA;
            width: 50px;
            font-weight: bold;
            padding: 5px;
            float: left;
            color: #000;
            margin: 1px;
            cursor:pointer;
        }
        .Left
        {
            float: left;
        }
        .Right
        {
            float: Right;
        }
        .Content
        {
         Float:Left;
            width: 100%;
            background: #AAA;
            border: 1px solid #AAA;
            height: auto;
            margin: 1px;
        }
        
        .AboutUs
        {
         Float:Left;
            width: 100%;
            background: #AAA;
            border: 1px solid #AAA;
            height: auto;
            margin: 1px;
            padding:10px;
        }
        
        .ContentHeader
        {
            border: 1px solid #333;
            padding: 2px;
            font-weight: bold;
            color: #000;
        }
        .ContentItem
        {
            border: 1px solid #333;
            padding: 2px;
            margin: 1px;
            color: #333;
        }
    </style>
   <script type="text/javascript">
   $(document).ready(function(){
    $("#About").click(function(){
     $(".Content").hide(); 
     $(".AboutUs").show(); 
     });
    $("#Back").click(function(){
     $(".Content").show(); 
     $(".AboutUs").hide(); 
     });
   });
    </script>
</head>
<body>
    <div class="Header">
        <div class="Button Left">
            Exit</div>
        <div id="About" class="Button Right">
            About</div>
    </div>
    <div class="Content">
        <div class="ContentHeader">
            Contacts</div>
        <div class="ContentItem">
            Andrew</div>
        <div class="ContentItem">
            Chris</div>
        <div class="ContentItem">
            David</div>
        <div class="ContentItem">
            Mickel</div>
        <div class="ContentItem">
            Mahesh</div>
    </div>
    <div class="AboutUs" style="display:none;">
    Developed By : tekpot.blogspot.com<br/>
    Thank You! <br/>
    Happy Coding!
    <div id="Back" class="Button Right">
            Back</div>
    </div>
    
</body>
</html>

Preview will be as

In the above html file I have included JQuery plugin google reference. Instead download JQuery and include local reference to html file.
Copy paste Contact.html and Jquery.min.js files in Project folders as mentioned path bellow.

MyContacts/assets/www/contact.html

Create a Webview object and load our Contact.html page in MyContacts activity class.

import android.webkit.WebView;
import android.webkit.WebViewClient;

public class ContactActivity extends Activity {
    /** Called when the activity is first created. */
 WebView mWebView;  

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview); 
        mWebView.getSettings().setJavaScriptEnabled(true);  
        mWebView.getSettings().setDomStorageEnabled(true);  
        mWebView.loadUrl("file:///android_asset/www/Contact.html");
    }

In the above code WebView mWebView; webview object is declared.

        mWebView.getSettings().setJavaScriptEnabled(true);  
        mWebView.getSettings().setDomStorageEnabled(true);

above statements enable Javascript and DOM object in Android Webview.

        mWebView.loadUrl("file:///android_asset/www/Contact.html");

LoadUrl loads html file mentioned in the path. Http url can be given in LoadUrl method.
Example

        mWebView.loadUrl("Http://google.com");

Compile and run the application in simulator.
Main Page

About Us page

Thats it we have developed a simple Android application using Javascript and html with out using much Java code.

Wait for next post to load data from server and display on html and javascript.

Happy Coding! :-)

tekpot blogs

Pages

Monday, 31 December 2012

Build an Android app using JQuery and HTML