Sunday, May 1, 2011

Creating an Android Calculator Tutorial

Through this tutorial you will learn how to develop and code a simple calculator in Android. Topics covered will include using a webview, layouts, and button listeners.

Introduction

One of the cool things about having a smart phone is knowing that you will always have a calculator handy. If you need to total receipts, perform some supermarket comparisons, or calculate tips or percentages on the fly a calculator is definitely a handy tool.

Screenshot of the calculator tutorial

However, the basic calculator app that comes preloaded with the Android Operating system leaves a lot to be desired. Perhaps you want to build your own more advanced calculator. You can use this tutorial as a starting point.

The Layout

This layout could admittedly be improved upon. The focus of this tutorial is about bringing together all of the pieces rather than creating a beautiful looking program, so we really just want something functional. Listed below is the xml code for the layout.

The layout is pretty straightforward, a bunch of rows with buttons in them. This layout uses a combination of linear layouts, whereas a table layout could also be suited.

As I mentioned in my layout tutorial, it is often a good idea to sketch out what you want beforehand, because it is much easier to make changes on paper and make the XML once. Regretfully, I did not follow my own advice when I wrote this tutorial...

The Secret

So know we have a bunch of buttons that we can use to have the user add input, but how do we actually crunch the numbers? Remember the "Golden Rule" of programming. Reuse code and don't try to reinvent the wheel!

The display at the top is actually a WebView. Using a webview instead of a TextView gives us extra formatting options, and also allows us to leverage the power of JavaScript.

JavaScript has a built in "eval" function that will take a string as an argument and run that string as JavaScript code. Our string will just be a bunch of math that we want to compute, and JavaScript will handle all the work for us.

Enabling JavaScript for the WebView

It is important to note that the WebView by default does not have javascript enabled. Use the code below to enable JavaScript in the WebView.

The calculator works by storing the user inputs in a String Builder and passing this information to the web view for evaluation. StringBuilders are used instead of strings because they are more efficient when you are constantly changing values.

We will use one button listener for all of the buttons. For most of the buttons, what we want to append to the string is exactly what the button is displaying. This makes the listener code fairly simple.

You will notice that the listener calls a function to update the web view. This function creates a simple string of html to display everytime it is called. I believe there is a way to more fully integrate the JavaScript handler with the Android App, but for the small amount of computation we are doing it is probably not worth it right now.

We create these tutorials in our free time. If you like what you see please consider buying us a cup of coffee so we can keep creating useful material. Click on the image below to make a donation via Paypal.

Hi, Thanks for the Post. :) But I am getting Null pointer exception in the activityFile at line no 27 . that is while doingmWebView.getSettings() , I think (WebView) findViewById(R.id.webview); is returning NULL. I am not getting whats the problem. Can ANyone help me?? My email Id is sachinpattan@gmail.com

mMathString like its name describes is just a string.We are using Javascript to do the operations for us:"JavaScript has a built in "eval" function that will take a string as an argument and run that string as JavaScript code. Our string will just be a bunch of math that we want to compute, and JavaScript will handle all the work for us."

So, basically we are passing a string to javascript and it returns the result.

i have no error in program but when i run there is show an eror msg tha "the application calculator has stop unexpectedly.please try again"..is there something missing..?????? may be in string.xml or androidmanifest.xml..??

I copied the Final Code 1to1 just to understand it first. However nothing is happening. The App loads in the VM but my button pushes aren't being captured by the OnClickListener :(Am I missing something?

I implemented this code in my app and Ive also read that numbers aren't showing up for some people. I have both both a physical DroidX, code works perfectly, and a Asus TF101 Tablet, which shows the calculator but does not show number input. I am trying to narrow down what the issue is but maybe this info will help someone do it faster than me. I am guessing incompatibility with versions? DroidX 2.3.4TF101 4.0.3

I also cannot see the text in web view, just wanted to know if there is any plugin or some other stuff I need to download. My email is sheilsarda@yahoo.com. By the way, very nice step by step tutorials.

thank U so much :) :) :) i find ur post most useful to me as it is simple n effective than other calculator source codes for android tq so much...im tryna make calculator app for android which uses custom buttons....but i have a problem... getText() is not working coz i didnt menntion android:text in xml...can u sugest me few solutions...

Hello, and thank you for this tutorial,I do have a problem I have to implement a code ''Enabling JavaScript for the WebView'' but I don't have any idea where I have to put it. Can not see any info on the location.Can you provide me the name of the file and the location.

Programming is combination of intelligent and creative work. Programmers can do anything with code. The entire Programming tutorials that you mention here on this blog are awesome. Beginners Heap also provides latest tutorials of Programming from beginning to advance level. Be with us to learn programming in new and creative way.