Building Android Application Using HTML

This entry was posted on Friday, October 21st, 2011 and is filed under Android, apps, JavaScript, jQuery, JSON.

Programming in Java is complex than JavaScript. So in this tutorial learn how to build Android Application using JavaScript.  I will demonstrate building simple Hacker News and YouTube Search Android Application using javascript.

Configuring Eclipse, Android SDK

Step 1:- Download Android SDK (http://developer.android.com/sdk/index.html) and Install

Step 2:-Download Eclipse Classical (http://www.eclipse.org/downloads/)

Step 3:- Run Android SDK and Install Required Platform Packages

It is recommended that you install SDK Platform Android 2.2, 2.3.3

Step 4:- Configure Eclipse ADT Plugin

Open Eclipse, Go to Help > Install New Software 

Add

https://dl-ssl.google.com/android/eclipse/

Select all Developer Tools and Click Next.

Step 5:-Specifying Android SDK Path

Go to Windows > Preferences >Android, Specify the directory where you have installed Android SDK.

Step 6:- Adding Android Virtual Device

Open Android SDK, Click on virtual devices and Add Virtual Device

We have now finished all the requirements for development. Lets look at building applications using HTML.

Step 1:- Download Phonegap (http://www.phonegap.com/download-thankyou)

Step 2:- Unpack Phonegap files in Android SDK Folder

Step 3:- Open Eclipse, File>New>Project>Android>Android Project

Select create a project from existing source. Location is the sample PhoneGap Android Source.

Step 4:- Adding Library

In your PhoneGap Example right click on libs folder Buid Path>Configure Build Path. In Java Build Path, click on Add JARs . Click libs folder and select phonegap 1.1.0.jar.

If you get an error ‘xlarge screen not defined’ in AndroidMainfest.xml. Please remove that line.

Step 5:-  In Package Explorer Click on assets > www. Right Click on Index.html Open With>Text Editor.

Here you can write the HTML code which you want to execute. HTML5 and Javascripts are supported.

Sample Example 1:- Creating A Hacker News App

index.html

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hacker News App</title>
    <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
    <script type="text/javascript">
    /*
    *  How to see historical entries in a feed.  Usually a feed only returns x number
    *  of results, and you want more.  Since the Google Feeds API caches feeds, you can
    *  dig into the history of entries that it has cached.  This, paired with setNumEntries,
    *  allows you to get more entries than normally possible.
    */
    
    google.load("feeds", "1");
    
    // Our callback function, for when a feed is loaded.
    function feedLoaded(result) {
      if (!result.error) {
        // Grab the container we will put the results into
        var container = document.getElementById("feed");
        container.innerHTML = '';
        var div='';
        // Loop through the feeds, putting the titles onto the page.
        // Check out the result object for a list of properties returned in each entry.
        // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
           j=i+1;
           div += j+') <a class="link" href="'+entry.link+'">'+entry.title+'</a><div class="comments"> '+entry.content+'</div>';
        }
           container.innerHTML=div;
      }
    }
    
    function OnLoad() {

      // Create a feed instance that will grab Digg's feed.
      var feed = new google.feeds.Feed("http://news.ycombinator.com/rss");
    
      feed.includeHistoricalEntries(); // tell the API we want to have old entries too
      feed.setNumEntries(25); // we want a maximum of 250 entries, if they exist
    
      // Calling load sends the request off.  It requires a callback function.
      feed.load(feedLoaded);
    }
    
    google.setOnLoadCallback(OnLoad);
    </script>
  
	<link href="style.css" rel="stylesheet" type="text/css"/>
	<style>
	  body {overflow: hidden;}
		#container, #spinner {width:auto;}
	</style>
</head>
<body>
	<div id="spinner" style="display:none">

		<img src="ajax-loader.gif">
	</div>
	<div id="container" class="popup-container">
		<div id="header">
			<img src="icon18.gif">
			<a id="title" href="http://news.ycombinator.com">Hacker News</a>
			<span>|</span>
			

		</div>
		
		<table id="feed" cellspacing="3" cellpadding="0">
		</table>
		<div id="footer">
			<div class="right">
<a href="#" onclick="OnLoad();" id="refresh">Refresh</a>
			</div>
		</div>
	</div>
</body>
</html>

I have used Hacker News RSS Feeds to build Hacker News Application.
style.css
Create a file style.css in www folder with following contents.

body {font-family: verdana,helvetica, arial, sans-serif;font-size: 10pt;}
a {text-decoration:none; color:#000;}
a:hover {text-decoration:underline;}
#container, #spinner { background:#F6F6EF;}
#header {height:26px; background: #f60; color:#222;}
#header img { border: 1px solid #fff; float:left; margin:3px;}
#header a, #header span, #header h1 { color:#222; float:left; margin:5px 2px 0 5px; }
#title, a#title { font-weight:bold; font-size:14px; margin-top:5px; }
#feed {min-width:auto; margin:5px; font-size:9pt; padding-bottom:2px; }
#feed table, #feed a:visited, #feed a.comments, #feed td:nth-child(1), #footer, #footer a, #searchbox { color:#828282;}
#feed td { vertical-align:top; }
.link { padding: 2px 0px; }
.link span { margin-right:3px;}
.comments { font-size:7pt; margin-left:5px; }
.error {white-space: nowrap;color: red;}
#footer {font-size:11px;}
.left {float:left;}
.right {float:right;}
#spinner {height:300px; text-align:center; padding-top:50px;}
#searchbox { margin:12px 3px 0 26px; font-size:11px; width:215px;}
#searchbutton {font-family:courier;}
label.instapaper { float: left; margin-right: 10px; text-align: right; width: 5%;}

Download This Image and save it in www folder.
Now Run Application

Example 2 YouTube Search
Please read this article.
Replace index.html contents in www folders with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YouTube Search</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
</head>
<style>
tml, body, div, ul {
	margin: 0;
	padding: 0;
}
 
body {
font-family: "Segoe UI", Tahoma, Verdana, Arial;
font-size:10px;
	color: #000;
	background: transparent;
    padding:10px;
}
 
.nannuin
{
color:#fff;
 
}
#content {
	background:#000;
     height:auto;
	padding:10px;
	font: normal 12px/18px Verdana, sans-serif;
	-moz-box-shadow: 0px 0px 10px #cbcbcb;
	-webkit-box-shadow: 0px 0px 10px #cbcbcb;
 
}
#content .latest {
		padding: 10px 20px 10px 0;
		margin-bottom: 10px;
	}
#content .latest h2 {
			font-size: 1.5em;
			padding-right: 90px;
			padding-bottom: 15px;
		}
 
		#content .latest p {
			font-size: 0.9em;
			margin-bottom: 12px;
			line-height: 1.4em;
		}
#content .single ul {
	margin: 0 0 10px 18px;
}
 
#content .single ol {
	margin: 0 0 10px 20px;
}
 
	#content .single li {
		padding: 2px 0;
		line-height: 1.4em;
	}
 
	#content .single h3 {
		margin-bottom: 5px;
		font-size: 1.4em;
		font-size: 1.5em;
		font-weight: normal;
	}
	.single .details {
		padding: 20px 0;
	}
	.single .details p {
		margin-bottom: 5px !important;
	}
 
#wrapper {
	text-align: left;
	width: 270px;
}
 
h1 {
	margin: 30px 0 15px 0;
	font-size: 30px;
	font-weight: bold;
	font-family: Arial;
}
 
.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
 
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
 
}
 
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
 
}
 
.hidden {
 
	display: none;
 
}
 
.noimage img {
 
	display: none;
 
}
a {
 
	text-decoration: none;
 
	color: #fff;
 
}
 
h1 span {
	font-size: 50%;
	letter-spacing: -0.05em;
}
 
hr {
	border: none;
	height: 1px; line-height: 1px;
	background: #E5E5E5;
	padding: 0;
}
 
p {
	margin: 0;
	padding: 7px 0;
}
 
a {
	outline: none;
}
 
a img {
	border: 1px solid #BBB;
	padding: 2px;
	margin: 10px 20px 10px 0;
	vertical-align: top;
}
 
a img.last {
	margin-right: 0;
}
 
ul {
	margin-bottom: 24px;
	padding-left: 30px;
}
#content {
	padding-left:10px;
	clear: both;
	float: left;
	border-right: 1px solid #CCCCCC;
	width: 270px;
	//height:400px;
	padding:10px 10px 10px 10px;
    padding-left:15px;
    font-family:"Segoe UI", Tahoma, Verdana, Arial;
}
#con{
color:#fff;
}
#instantinput{
/*This CSS is an important part of project
We use Z index to show the suggest behind current text box.
*/
width:200px ;
height:35px;
position:absolute;
color:  #ccc;
z-index:-1;
 border:1px #000 double;
font-family: "Segoe UI", Tahoma, Verdana,  Arial;
font-size: 16px;
}
 
#input {
/* We make use of two input text box
one is readonly */
width:200px ;
height:35px;
color:  #000;
background:transparent;
border:none;
font-family:  "Segoe UI", Tahoma, Verdana, Arial;
 font-size: 16px;
}</style>
<body>
<p>
<script type="text/javascript"><!--
function searching()
{
	var text=$('#search').val();
var yurl='http://gdata.youtube.com/feeds/api/videos?q='+text+'&format=5&max-results=4&v=2&alt=jsonc&key=AI39si47aoxcLBAwU2xJOF947q1cduwa0d9sEAP_yoWvbh5-zhNU89jwff2IiDoicddKaaxu9q-6cz9TyaoB_dUlwULIV3uYxA';
$('#result').empty();
$.ajax
({type: "GET",url: yurl,dataType:"jsonp",success: function(response)
{
 
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
	    if(data.duration) {
		duration =data.duration;
		//Initially we set hours,minutes and second all to zero
		hours = 0;
		minutes = 0;
		seconds = 0;
		//If duration > 3600 sec then we increase hour count
		// We increase count untill duration is less than 3600
		while(duration >= 3600) {
		hours = hours + 1;
	    duration = duration - 3600;
        }
		//suppose we have duration more than 60 sec then we increment minute count
		//We increase count untill duration is less than 60 sec
		while(duration >= 60) {
                    minutes = minutes + 1;
                    duration = duration - 60;
                  }
		seconds = duration;
		//if duration of video is less than 10 sec then we directly  write it in M:S
	    if(seconds < 10) {
		seconds = '0'+seconds;
					}
		//We store the duration in Variable Time
		time = minutes+':'+seconds;
		if(hours > 0) {
		time = hours+':'+time;
			}
		}
        var title = '<div id=tile>'+data.title;
		var views ='<br />'+data.viewCount+' views</br>';
		var label = 'Label:- '+data.category =='undefined' ? 'undefined' : data.category;
		var duration = '</br> Duration:- '+time;
        var image  = "<img src = "+data.thumbnail.sqDefault+">";
		var vid =data.id;//Video id of Video
        var urlvalue = '<br /><a id="light" class="example6" href = "http://www.highesthits.com/video.php?v='+ vid + '" target="_blank">'+image;
        var plus= '<div class=nannuin><table><tr><td>'+ urlvalue+'</td><td>'+title+ views+label+duration+'</td></tr></table></div>';
        $(plus).appendTo('#result'); // Result
 
});
}
}
});
}
$(document).ready(function()
{
var yurl='http://gdata.youtube.com/feeds/api/standardfeeds/on_the_web?v=2&alt=jsonc&max-results=5&key=AI39si47aoxcLBAwU2xJOF947q1cduwa0d9sEAP_yoWvbh5-zhNU89jwff2IiDoicddKaaxu9q-6cz9TyaoB_dUlwULIV3uYxA';
$.ajax
({type: "GET",url: yurl,dataType:"jsonp",success: function(response)
{
 
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
	    if(data.duration) {
		duration =data.duration;
		//Initially we set hours,minutes and second all to zero
		hours = 0;
		minutes = 0;
		seconds = 0;
		//If duration > 3600 sec then we increase hour count
		// We increase count untill duration is less than 3600
		while(duration >= 3600) {
		hours = hours + 1;
	    duration = duration - 3600;
        }
		//suppose we have duration more than 60 sec then we increment minute count
		//We increase count untill duration is less than 60 sec
		while(duration >= 60) {
                    minutes = minutes + 1;
                    duration = duration - 60;
                  }
		seconds = duration;
		//if duration of video is less than 10 sec then we directly  write it in M:S
	    if(seconds < 10) {
		seconds = '0'+seconds;
					}
		//We store the duration in Variable Time
		time = minutes+':'+seconds;
		if(hours > 0) {
		time = hours+':'+time;
			}
		}
        var title = '<div id=tile>'+data.title;
		var views ='<br />'+data.viewCount+' views</br>';
		var label = 'Label:- '+data.category =='undefined' ? 'undefined' : data.category;
		var duration = '</br> Duration:- '+time;
        var image  = "<img src = "+data.thumbnail.sqDefault+">";
		var vid =data.id;//Video id of Video
        var urlvalue = '<br /><a id="light" class="example6" href = "http://www.highesthits.com/video.php?v='+ vid + '" target="_blank">'+image;
        var plus= '<div class=nannuin><table><tr><td>'+ urlvalue+'</td><td>'+title+ views+label+duration+'</td></tr></table></div>';
        $(plus).appendTo('#result'); // Result
 
});
}
}
});
});
// --></script>
</p>
<div id="con"><input id="search" type="text" /> <a href="#" onclick="searching();">Search</a>
<p>&nbsp;</p>
<div id="result"></div>
<p><a href="http://www.youtube.com" target="_blank">Powered by YouTube</a></p>
</div>
</body>
</html>

Thanks to John Michel

You Might Also Like

Filed Under: Android, apps, JavaScript, jQuery, JSON

  • Anonymous

    awesome