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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
    <WebView 
        android:id="@+id/webview"
        android:layout_width="fill_parent" android:layout_height="50dip"/>
    
    <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <Button android:layout_height="wrap_content" android:id="@+id/buttonLeftParen" android:text="(" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonRightParen" android:text=")" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonBackspace" android:layout_weight="1" android:text="B" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonClear" android:text="C" android:layout_weight="1" android:layout_width="fill_parent"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <Button android:layout_height="wrap_content" android:id="@+id/button7" android:text="7" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button8" android:text="8" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button9" android:text="9" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonPlus" android:text="+" android:layout_weight="1" android:layout_width="fill_parent"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <Button android:layout_height="wrap_content" android:id="@+id/button4" android:text="4" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button5" android:text="5" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button6" android:text="6" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonMinus" android:text="-" android:layout_weight="1" android:layout_width="fill_parent"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout4" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <Button android:layout_height="wrap_content" android:id="@+id/button1" android:text="1" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button2" android:text="2" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/button3" android:text="3" android:layout_weight="1" android:layout_width="fill_parent"></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonTimes" android:text="*" android:layout_weight="1" android:layout_width="fill_parent"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout5" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <Button android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_weight="1" android:id="@+id/button0" android:text="0"></Button>
        <Button android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_weight="1" android:id="@+id/buttonDecimal" android:text="."></Button>
        <Button android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_weight="1" android:id="@+id/buttonEquals" android:text="="></Button>
        <Button android:layout_height="wrap_content" android:id="@+id/buttonDivide" android:text="/" android:layout_width="fill_parent" android:layout_weight="1"></Button>
    </LinearLayout>
    
</LinearLayout>

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.

// Enable javascript for the view
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);

Button Listeners and String Builders

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.

private class ButtonClickListener implements OnClickListener {

@Override
public void onClick(View v) {
 switch (v.getId()) {
 case R.id.buttonBackspace:
  if(mMathString.length() > 0)
   mMathString.deleteCharAt(mMathString.length()-1);
  break;
 case R.id.buttonClear:
  if(mMathString.length() > 0)
   mMathString.delete(0, mMathString.length());
  break;
 default:
  mMathString.append(((Button) v).getText());
 }
 
 updateWebView();
}

Updating the WebView

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.

private void updateWebView() {
 
 StringBuilder builder = new StringBuilder();
 
 builder.append("<html><body>");
 builder.append("<script type=\"text/javascript\">document.write('");
 builder.append(mMathString.toString());
 builder.append("');");
 builder.append("document.write('<br />=' + eval(\"");
 builder.append(mMathString.toString());
 builder.append("\"));</script>");
 builder.append("</body></html>");

 mWebView.loadData(builder.toString(), "application/xhtml", "UTF-8");

I tried to split up the building of the string into smaller chunks in order to improve readability. As you can see, it can get pretty difficult to read fairly quickly.

The App in Action

Listed below is a screenshot from the app.

A screenshot of the calculator evaluating an expression

There are a number of areas in which this app could be improved, and if there is interest, I may do a follow up tutorial.

• Design a better layout
• Format the output better
• Free text input
• More advanced math functions (sine, cosine, etc...)

Thanks for checking out my tutorial. Please leave feedback and follow the blog!

Full Code for Activity

Listed below is the full code for the activity.

package com.androiddom.calculatortest;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

public class CalculatorActivity extends Activity {
 
 private WebView mWebView;
 private StringBuilder mMathString;
 private ButtonClickListener mClickListener;
 
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  // Create the math string
  mMathString = new StringBuilder();
  
  // Enable javascript for the view
  mWebView = (WebView) findViewById(R.id.webview);
  mWebView.getSettings().setJavaScriptEnabled(true);
  
  // Set the listener for all the buttons
  mClickListener = new ButtonClickListener();
  int idList[] = { R.id.button0, R.id.button1, R.id.button2,
    R.id.button3, R.id.button4, R.id.button5, R.id.button6,
    R.id.button7, R.id.button8, R.id.button9, R.id.buttonLeftParen,
    R.id.buttonRightParen, R.id.buttonPlus, R.id.buttonPlus,
    R.id.buttonMinus, R.id.buttonDivide, R.id.buttonTimes,
    R.id.buttonDecimal, R.id.buttonBackspace, R.id.buttonClear };

  for(int id : idList) {
   View v = findViewById(id);
   v.setOnClickListener(mClickListener);
  }

 }
 
 private void updateWebView() {
  
  StringBuilder builder = new StringBuilder();
  
  builder.append("<html><body>");
  builder.append("<script type=\"text/javascript\">document.write('");
  builder.append(mMathString.toString());
  builder.append("');");
  builder.append("document.write('<br />=' + eval(\"");
  builder.append(mMathString.toString());
  builder.append("\"));</script>");
  builder.append("</body></html>");

  mWebView.loadData(builder.toString(), "application/xhtml", "UTF-8");
 }

 private class ButtonClickListener implements OnClickListener {

  @Override
  public void onClick(View v) {
   switch (v.getId()) {
   case R.id.buttonBackspace:
    if(mMathString.length() > 0)
     mMathString.deleteCharAt(mMathString.length()-1);
    break;
   case R.id.buttonClear:
    if(mMathString.length() > 0)
     mMathString.delete(0, mMathString.length());
    break;
   default:
    mMathString.append(((Button) v).getText());
   }
   
   updateWebView();
  }

 }

------------------------------------------------------------

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.