HTML into an Android Application [html to .apk]

First of all thanks for your comments after my previous Android posts, in fact I’m happy to see that some of coders give shit to my blog :) So in this post I again created a sample Android case of mine which is creating an application out of HTML. I sounds cool but to be honest it is not fair :) I mean creating an .apk without knowing some Java stuff.

In this post I will create a HTML page that gets RSS feeds from google .technology news with javascript and HTML which all of us familiar with and try to put it into my Android phone by the help of Android webview tool.

Step 1:Creating Our Html Site [JQueryMobile in my case]

So since we will export our HTML I prefered JQueryMobile to be look like real Android apps. just fake one of course in this case :). So here we go again with coding: we will create an index.html & someJavaScript.js

index.html:

<html>
<head>
<meta charset="UTF-8" />
<title>RSSreader!</title>
</head>
<body>
<link href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="someJavaScript.js"></script>
</body>
</html>

someJavaScrpit.js:

$(function(){
getFeed('http://news.google.com.tr/news?cf=all&ned=us&hl=en&topic=tc&output=rss');

});
var maxRSSFeed = 50;

document.write(
'<div data-role="page" data-theme="b" id="list">' +
'<div data-role="header" data-theme="b" data-position="fixed">' +
'<span id="title_widget">RSS</span> ' +
'</div>' +
'<div data-role="content" data-theme="b" >' +
'    <ul data-role="listview" data-theme="c" id="articleList">'
);
for(var i=1; i<=maxRSSFeed; i++){
document.write(
'<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>'
);
}
document.write(
'    </ul>' +
'  </div>' +
'</div>'
);
for(i=1; i<=maxRSSFeed; i++){
document.write(
'<div data-role="page" data-theme="b" id="article' + i + '">' +
'  <div data-role="header" data-theme="b" data-position="inline">' +
'    <a href="#list" data-role="button" data-theme="b" data-icon="arrow-l" data-back="true">menu</a>' +
'    <h1 id="articleHeader' + i + '">&nbsp;</h1>' +
'    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' +
'      data-theme="b" rel="external">Go News Source!</a>' +
'  </div>' +
'  <div data-role="content" data-theme="b" >' +
'    <div id="articleContent' + i + '"></div>' +
'    <div data-role="controlgroup" data-type="horizontal">' +
'      <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
'        data-inline="true">Previous</a>' +
'      <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
'        data-inline="true" data-iconpos="right">Next</a>' +
'    </div>' +
'  </div>' +
'</div>'
);
}

var listEntries = function(json) {
if (!json.responseData.feed.entries) return false;
$('#title_widget').text(json.responseData.feed.title);
var articleLength =json.responseData.feed.entries.length;
articleLength = (articleLength > maxRSSFeed) ? maxRSSFeed : articleLength;
for (var i = 1; i <= articleLength ; i++) {
var entry = json.responseData.feed.entries[i-1];
$('#link' + i).text(entry.title);
$('#articleHeader' + i).text(entry.title);
$('#openButton' + i).attr('href', entry.link);
$('#articleContent' + i).append(entry.content);
}
$('#article1 .prevButton').remove();
$('#article' + articleLength + ' .nextButton').remove();
if (articleLength < maxRSSFeed) {
for (i = articleLength + 1; i <= maxRSSFeed; i++) {
$('#list' + i).remove();
$('#article' + i).remove();
}
}
};
var getFeed = function(url) {
var script = document.createElement('script');
script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q='
+ encodeURIComponent(url)
+ '&v=1.0&num=' + maxRSSFeed);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
var script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
};

Famous Output Part [in fact worked on my machine :)]:

5Source [sendSpace.com]:

http://www.sendspace.com/file/f6930y

Step 2:HTML into an Android Application[Eclipse]

Now we have the html, so go ehead and publish your site on a server to get ready for the tricky step exporting an html into Android application.
Even I post this way on my blog I believe that this style of developing Android app. is really for nopes :). So again sayingn that coding this RSS on Java will be better solution but this method in this example for newbie Android developers. Here we go!

(NOTE: I assume that you already know how to make your Eclipse ready for developing Android applications and also familiar with emulator stuff.)

I use google news since I have no server to upload my site that I created at step 1 so I choose google news in my case but it does not matters as you can guess just change the site http source for your case.

MainActivity.java (some unnecassay imports from my previous post as I’m on a little lazy enough to delete them now):

package com.example.h;

import java.io.IOException;
import java.io.InputStream;
import java.io.Reader;
import java.io.StringReader;
import java.io.UnsupportedEncodingException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Timer;
import java.util.TimerTask;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathConstants;
import javax.xml.xpath.XPathExpressionException;
import javax.xml.xpath.XPathFactory;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.StatusLine;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.InputSource;
import org.xml.sax.SAXException;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.format.DateUtils;
import android.util.Log;
import android.view.Menu;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.TextView;





import android.app.Activity;
import android.content.Context;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;
import android.widget.Toast;



public class MainActivity extends Activity {



private static final Runnable Timer_Tick = null;
private static final ImageView ImageView = null;
private TextView textViewr=null;
int i=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView myWebView = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("http://news.google.com.tr/news/i/section?cf=all&ned=us&topic=tc");


}


}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="21dp"
android:text="Text" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView2"
android:layout_marginTop="34dp"
android:text="TextView" />

<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView3"
android:layout_marginTop="49dp"
android:src="@drawable/ic_launcher" />

<WebView
android:id="@+id/webView1"

android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

</RelativeLayout>

Famous Output Part [in fact worked on my emulator Android 4.2:)]:

Adsız

Source [sendSpace.com]:

http://www.sendspace.com/file/fkbj6h

If you want to see it on your phone upload your .apk to apkinstall.com as I mentioned in my previous blog posts!

just_keep_coding_bug_droid_letters_font_cards-p137158665082845626envwi_400