How I developed A Really bad Calculator app

A few weeks ago i was pondering on Twitter about how Calculator apps still look like traditional physical calculators.

I think I'd recently been using the Calculator widget on my Mac so the thought wasn't specifically aimed at mobile apps.  I wasn't even sure how true it was exactly.  For all I knew there could have been a massive surge in designers and developers re-thinking the  calculator experience.  I discussed this on twitter a little and did have a look around on Google Play.  There are some new apps that push the design but there hasn't  been any big revolution of Calculator apps.

I was looking for a project while I was off work over Christmas and the thoughts about calculators was still floating around in my head. I wanted to keep working on my design skills and also do a native Android App as its been a while and was feeling out of practise.

Not sure where it came from but I had the idea of doing a calculator that would add, subtract,multiply and divide two numbers simultaneously and I wanted the app to be really simple.

How I envisaged it working was that you would enter a number, press the <enter> key, enter a second number and the results of the two numbers having been added, subtracted, divided and multiplied  would be shown on separate lines.  I also wanted the results to be updated as the second number was being entered.

The interface design and development took the longest because I was very keen not to compromise two of the features of the app.


The finished interface design


The first feature is the large right angled enter key. I originally looked at  using a  Android GridView to layout the buttons, but it isn't actually possible  to have buttons that aren't rectangular.  It would probably have been possible to define a different shaped button and GridView layout to accommodate it.  But that seemed like a lot of work and didn't seem a very general purpose solution.  I'll write another more detailed blog post but it boils down to putting another image above the image used for the layout, making it invisible but still being able to detect the colours in that image


 The hidden image showing the different colours used for detecting the different buttons

I wasn't sure if I needed to detect the plus,minus,divide and multiply symbols being pressed but I decided it was better to have them in just in case.

The other difficult part was lining up the displayed  results with the +, -, ÷ and × symbols.  There is a lot of formatting in the TextView that had to be stripped out. It took a bit of googling to find out how to do it exactly.

Another design decision I made was to have the number keypad using the layout shown.  A traditional calculator has the number 1 at the bottom left and numbers go upwards.  I chose to have the keypad with the number 1 at the top left and have the numbers go downwards the same as a telephone keypad.

Once the design had been done, it took a few attempts to get the operation of the calculator just right. It was then I spotted the massive flaw in the design.

The calculator cannot mix operations  on the numbers that have been input. For example it will do

5 + 6 + 3

5 - 6 - 3,

5 × 6 × 3

5 ÷ 6 ÷ 3

all at the same time but it cannot do 5 + 6 × 3 or 5 - 6  ÷ 3

big OOPS there.  I did wonder if it would be possible to alter the interface to select which operation you would want to do next on the already displayed answers, but chose not to. It would have become very complicated very quickly.

I decided to end the development at that point.  I was happy that I came up with a new idea for a calculator, learnt some new skills designing and developing the app but didn't want to get bogged down fighting a design that didn't work

I still think that there is room for improvement and fresh thinking of the calculator.  If any ideas do pop out of my head i may have another look at the calculator.

The calculator isn't on Google play but the source code is up on Github for anyone that wants to have a look at it.


The calculator showing the results of the add,subtract,multiply and divide operations on 12 and 3

Comments are closed.