Create Your Own Twitter Android Application Using PhoneGap

You can let your followers download your own Twitter Android App!, So that  your followers can read your tweets directly from their phone. In this tutorial I will explain building simple Twitter Android App using PhoneGap.

You need to configure eclipse before you start, click here to know more.

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. Specify your project name.

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.
index.html

<html>
<body>
<style type="text/css">
body{background:#000;}
.status{
color:#fff;
}    
    

#txt
{
font-size: 11px;
font-family: "Segoe UI", Tahoma, Verdana, Arial;
}
.status
{
min-height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE
font-size: 11px;
background:transparent;
border:#eaeaea 2px;
}
.status a
{
color:#3cf; 
text-decoration:none
font-size: 11px;
}
.status a:hover{
color:#3cf;
text-decoration:underline
}
.twitter_image{
float:left;
margin-right:14px;
width:50px;
height:50px;
padding:3px;
}
.twitter_posted_at{
font-size:11px;
color:#999
} 
</style>
<div id="tweets">Loadin</div> 
<script type="text/javascript">
function ptweet(read)
{
var tdata='';
for(i=0;i<15;i++)
{
data =read[i];
var id=data.id;
var text=data.text;
var created_time=data.created_at;
var screen_name=data.user.screen_name;
var image=data.user.profile_image_url;
var source=data.source;
tdata+="<div class='status' id='"+id+"'><img src="+image+" class='twitter_image'/><a href='http://twitter.com/"+screen_name+"'>"+screen_name+"</a><div id='txt'>"+text+"<div class='twitter_posted_at'><span class='timeago' title='"+created_time+"'></span><i>via "+source+" </i></div></div></div>";

}
document.getElementById("tweets").innerHTML=tdata;
}
</script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=mrnayak&count=15&callback=ptweet"></script>
</body> 
</html>

In this code change screen_name to your twitter screen name. If you want to know more about JSON click here

Create APK and let your followers install your app on their phone.

You Might Also Like

  • Mcongo11

    right clicking on libs only brings normal right click options