Build A Calculator App for Android 📱

Welcome back Android devs! In the past three lessons HooApps lessons we created the views for our calculator, added in the calculator functionality, and styled our finish product. This post is going to try to clarify any questions that you might have when poking around the repo for the project because there’s just too much code to fit into one post 😕. We are going to set this app up just like we did in our Hello World tutorial. Go check that out if you have any questions about setting up a project in Android Studio 🛠

Creating the Views

I know that most calculators have more functionality but I’m trying to keep this tutorial short and sweet 🙂

To start laying out our views, we are going to take the concepts we learned about while creating the Hello World tutorial to create some nested LinearLayouts in activity_main.xml. LinearLayouts areViews but can also hold Views themselves, so this allows us to create the layout structure for our calculator which is a vertical LinearLayout holding horizontal LinearLayouts that will hold a row of buttons. The xml code a layout like this is about 150 lines so here is a link to the activity_main.xml file in lieu of pasting everything here.

Adding the Functionality

Just like in the Hello World app, we’re going to open up our file and declare all of our Views and other variables that we need so that we can link them up to our activity_main.xml file.

TextView textView;
Button button_add;
Button button_subtract;
Button button_multiply;
Button button_divide;
Button button_equals;
Button button_clear;
Integer firstNumber;
int i;

But wait, why don’t we declare Buttons for each of our digits 0–9? Since the id's of all of the Buttons are buttonX where X is the digit 0–9, we can use a for loop and getIdentifier to dynamically assign an OnClickListener to our 10 buttons.

for (i = 0; i <= 9; i++) {
findViewById(getResources().getIdentifier("button"+String.valueOf(i), "id", getPackageName())).setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
textView.setText(textView.getText().toString() + i);

That may look really complex 😵 but let’s deconstruct it line by line and we’ll see it’s not too hard to grasp what’s going on here.

for (i = 0; i <= 9; i++)

Execute the code inside the loop for with the value of i set to 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9.

findViewById(getResources().getIdentifier("button"+String.valueOf(i), "id", getPackageName()))

findViewById is a familiar function that returns a View for us when given an id of a View but we unfortunately we cant give it and get back button0, button1, etc. 😞.

To get around this problem, we will use getIdentifier, which takes in a String as one if it’s arguments that corresponds to the id of a View. Lucky for us we can use "button"+String.valueOf(i) as the String corresponding to the ids of our ten buttons so that we don’t have to copy and paste the code 10 times for findViewById and setOnClickListener.

setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
textView.setText(textView.getText().toString() + i);

Speaking of OnClickListener, after we get the View corresponding to the id of the String we specified, we set an OnClickListener for that View which will append the digit i to whatever String is in our TextView. Our TextView will act as our display, so this means that every time we tap one of our numerical Buttons, that digit will be put at the end of the display, just like how a calculator works!

For the sake of brevity, I don’t want to talk too much about the logic behind the calculator and explain all of the edge cases, but here is the behavior that the ➕ ➖ ➗ ✖️ =Buttons will have:

button_operation.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
firstNumber = Integer.valueOf(textView.getText());
operation = view.getText();
button_equals.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
textView.setText(firstNumber ➕/➖/➗/✖ secondNumber);

This code is only pseudocode, check out for the real Java code.

When an operation button (plus, minus, etc.) is clicked, the value in the first number will be saved and we will start entering the second number. When the equals button is hit, the display will show the result of the first number combined with the second number using the operation specified. This doesn’t give us as much functionality as you might find on the calculator app that comes with your phone, but the emphasis of these tutorials is to learn how to make Android apps, not calculators 🙂.

The Glow Up ✨

Now that we can add, divide, subtract, and multiply numbers, we want our calculator to have an aesthetically pleasing theme and good styling. To do this, we are going to start by opening res/values/styles.xml and overriding some parts of our Theme.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:buttonStyle">@style/digitStyle</item>
<item name="colorPrimary">@color/black</item>
<item name="colorPrimaryDark">@color/black</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorBackground">@android:color/black</item>
<item name="android:fontFamily">monospace</item>
<item name="android:statusBarColor">?android:attr/colorBackground</item>

With this snippet of code we change our font, status bar color, and the default Style of all of our Buttons. Now we need to create digitStyle, the style for all of our Buttons.

<style name="digitStyle" parent="android:style/Widget.Button">
<item name="android:textColor">@color/white</item>
<item name="android:minWidth">80dp</item>
<item name="android:minHeight">80dp</item>
<item name="android:textSize">30sp</item>
<item name="android:background">@drawable/button_background</item>

Our digitStyle inherits all of the properties of the default Style for Buttons but brings in a few changes to the dimensions, text size, text color, and background. The background is a custom shape that we will have to make in our res/drawable directory called button_background.

<shape xmlns:android=""
<solid android:color="@color/black"/>

This means that every Button is going to be a black square with white text and a white border.

Looks nice! Well, nice-ish… We do have the problem that the borders on the outside aren’t as thick as the borders on the inside since each cell has a square border, but we can deal with that by only giving each button a North and West border.

That’s a little better. Now we only need to make some special borders for the edge (literal and figurative, get it?) cases. To do this, we can set the Theme of an individual Button in our activity_main.xml file to override the overall Theme of the app.


This code for the ✖️ button overrides the Theme for the entire app and has this particular Button use the operationStyle which is similar to digitStyle but with different color and border to make the app look how we would expect a calculator to look. There are a few edge cases that I would suggest you look at by poking around the /res folder.

Here is how the finished project looks, definitely a huge improvement from the style-less product we had before ✨

Be sure to check out the project on Github, smash dat clap button, and leave any feedback you have for me about this tutorial! I hope to see everyone who attends UVa at the HooApps meetings 🙂

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.