Tag Archives: FeedStats

FeedStats, my first Android app

Just a quick note to you let you guys, that I have just pushed my android app to the market. 🙂

It’s called FeedStats and it allows you to get the stats of a feedburner feed url and shows the data in a graphical format.

I created this app to demonstrate how we can draw graphs in android using JavaScript in a HTML page and then embedding it inside a webview.

If you have an android phone, then you can download it from the Android market, by searching using the term “FeedStats”. Try it out and let me know if you have any feedbacks/comments.

The entire source code of the app is available at my github account. Download and play around with it.

Posted in Android/Java | Tagged , , | 10 Comments

Generating graphs in Android

I wanted to visualize data using graphs in one of the Android app that I was developing and found that Android SDK don’t provide a good graphing API, which you can use out of the box.

You have to either using Canvas 2D graphics to draw your graphs from scratch or use some commercial components.

If you can assume that some form of Internet connection will be available then you can use Google Graphs API to get the graph and embed it in a webview control. But I didn’t wanted to make that assumption and so I started to search for a good graph component, which I can use in my app.

After some frustrated search attempts, I stumbled upon a wiki at rapid android, which explained, how you can use jQuery based JavaScript library flot to draw graphs for android. At first I dismissed it, since I didn’t wanted to assume that an active Internet connection would be available for my app. But after reading it for the second time, I realized that the graphs could be drawn using HTML and JavaScript files stored locally, without the need to be connected.

So I wrote a sample app to try it out and it really worked out great. I thought of posting the source code and a little writeup about it so that it would be useful for others as well.

Goal

So my goal was to create graphs in android using any JavaScript or HTML that are stored locally. The app and the graphs should work even if access to Internet is not available.

Flot

Flot is a jQuery based JavaScript library that was easy to use and created powerful and feature-rich graphs. The main advantage of flot is that it is completely compatible with the browser that is available in android.

Setting up webview

The first thing that we have to do is to setup webview, which will be rendering the HTML page, on which we will be drawing the graph. You can add the webview control to your android layout.xml file using the following code.

Once it is added to your layout.xml page, you can access it in your activity using the following code.

Adding the HTML page to assets folder

The next step is to place the HTML, CSS and JavaScript files into the /assets folder. You should have the files only in the assets folder and not in any arbitrary folder because webview can only open files which are placed in the /assets folder.

Also add the flot and jQuery files into the /assets folder and refer to them with relative urls in your HTML file. You can also checkout the HTML file that I have created for reference.

Once you add the HTML file, you can load it in your webview using the following code snippet.

Connecting Java and JavaScript

We will be adding an interface to the webview  (by calling the addJavascriptInterface method) which will allow us call JavaScript methods from the Java code.

In the Java side, we have to create a separate class, which can be used to interact with JavaScript and pass data between the two worlds. Check out the following code snippets to find out how to do it.

Check out the StatsGraphHandler class in my sample project for reference.

Enjoy your graph

That’s it 🙂 Fire up your app and you can see the excellent graph generated.

Advanced usage

You can also add some buttons in the HTML page, which can directly interact with the graph. For other options, check out flot’s documentation.

Sample Code

You can download the complete code of the sample app that I created from my github account.

Links

Posted in Android/Java | Tagged , , , | 19 Comments