Daily New Blogs for Programmers and Tech Geeks

Menu 
Home / Android Development / Android Calculator App Tutorial | Roadway to Android Developer

Android Calculator App

Tutorial | Roadway to Android

Developer
Posted on November 23, 2017 by Rishabh Jain

0
SHARES
 Share  Tweet  Subscribe
 Holidays At Four Seasons
Create Lasting Memories With Four Seasons. Plan
Your Stay Today!

Book Now
Four Seasons Palm Beach

Creating an Android app isn’t an easy task, Henceforth to make things

a bit easy for you here is another Android App tutorial from our blog
series on Roadway to Android App Development Course. In this
tutorial, we will teach you how to make a simple Android Calculator
App (using Android Studio 3.x) that has functions like Add, subtract,
multiply, divide, Log, Square, square root, cube and cube root.

If you’re just a beginner don’t forget to look at our other tutorials on

how to make a login app and how to convert any website into an
Android App.

So before beginning, this is how our end product will look like. The app
has a clear button too that refreshes the calculator and also enter key
that displays the result in the green color text view. The black color
text view at the top is for the user to type in their input.

Like what you're reading? Subscribe to our Weekly Tech

Newsletter!
 * indicates required
Email Address *

Name *

Subscribe

So to make an app like shown above, follow these steps.

1.Open Android Studio and create a new Project named, My Calculator.

2. Select API 16 and then create an Empty Activity.

3. Now drag two textviews in Design view of activity_main.xml panel
and do the following:

Change their properties, set back color of textview1 to black (“#000000”) and
textview2, where the result will be displayed to green (#02b54b), remove their
margins.

Set only bottom margin as 8sp and set layout width to match_parent and height as
wrap_content.

We changed the text alignment of both these textviews as textEnd

Set their ids as txt1 and txt2.

Constraint txt1 to parent from all four sides and txt2 at bottom of txt1, for more info
on this see code below.

4. Drag a Linear layout at bottom of the textview and insert 4 buttons

in it.

Set Linear layout width to match_parent and height as wrap_content.

Set Top and left Margin as 8sp of the Linear layout.

Set it’s orientation to horizontal.

Constrain it below txt2 as shown in the code below.

Change button background color and set their width and height as wrap_content.

Add respective ids and text to buttons.

5. Below the Linearlayout insert, another layout and constraint it below
the Linear layout created above and set same properties as mentioned
above with ids and text to be changed respectively.

6. Similarly, create Enter and Clear widget by dragging two buttons and
constraining their layouts below. In case of any problem refer to the
code below.
activity_main.xml

<?xml version="1.0" encoding="utf­8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://sche
xmlns:app="http://schemas.android.com/apk/res­auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.faultinmycode.mycalculator.MainActivity"
android:background="#606060">
<TextView
android:id="@+id/txt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8sp"
android:background="#000000"
android:textAlignment="textEnd"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.016" />
<TextView
android:id="@+id/txt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#02b54b"
android:layout_marginTop="8sp"
android:textAlignment="textEnd"
android:textColor="#ffffff"
android:textSize="50sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/txt1"
app:layout_constraintTop_toBottomOf="@+id/txt1" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8sp"
android:layout_marginLeft="8sp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/txt2"
app:layout_constraintTop_toBottomOf="@+id/txt2">
<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
android:background="#e55c00"/>
<Button
android:id="@+id/sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtract"
android:background="#e55c00"/>
<Button
android:id="@+id/mul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Multiply"
android:background="#e55c00"/>
<Button
android:id="@+id/div"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Division"
android:background="#e55c00"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="8sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout"
tools:layout_editor_absoluteY="212dp"
>
<Button
android:id="@+id/nine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:background="#e55c00"
android:textSize="25sp"
/>
<Button
android:id="@+id/eight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e55c00"
android:text="8"
android:textSize="25sp"/>
<Button
android:id="@+id/seven"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e55c00"
android:text="7"
android:textSize="25sp"/>
<Button
android:id="@+id/sq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="x^2"
android:background="#e55c00"
android:textSize="25sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginLeft="8sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout2">
<Button
android:id="@+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/sqrt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SQRT"
android:background="#e55c00"
android:textSize="25sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8sp"
app:layout_constraintTop_toBottomOf="@+id/linearLayout3">
<Button
android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="25sp"
android:background="#e55c00"/>
<Button
android:id="@+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:background="#e55c00"
android:textSize="25sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8sp"
app:layout_constraintTop_toBottomOf="@+id/linearLayout4">
<Button
android:id="@+id/log"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log10"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/cub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="x^3"
android:textSize="25sp"
android:background="#e55c00"/>
<Button
android:id="@+id/cubroot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CubRT"
android:background="#e55c00"
android:textSize="25sp"/>
<Button
android:id="@+id/dec"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:background="#e55c00"
android:textSize="25sp"/>
</LinearLayout>
<Button
android:id="@+id/enter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter"
android:background="#77db35"
android:layout_marginTop="8sp"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout5"
app:layout_constraintVertical_bias="0.032" />
<Button
android:id="@+id/clear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#007aff"
android:textColor="#ffffff"
android:text="Clear"
android:textSize="25sp"
 app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/enter"
app:layout_constraintVertical_bias="0.074" />
</android.support.constraint.ConstraintLayout>

7. Now go to MainActivity.java file and lets code. Don’t forget to read

our Java basics for Android Developer blog here.

Create Button and TextView objects and refer them ids created in XML using code:

button = findViewById(R.id.[Respective_ID);

For 0 to 9 and decimal button, use setOnClickListener and using new View create
onClick method, as shown in the code below. Using this we can display numbers as
the string variable in TextView. Code for this is:

txt1.setText(txt1.getText()+"1");

We have then created a method named colorChange to change the color of

Mathematical operators when used. The code for this is:
public void colorChange(Button b){
b.setBackgroundColor(getResources().getColor(R.color.colorAccent));
}

To reset these buttons we needed another allReset() method in which color can be
changed back. Code for this is:

public void allReset(){
[Button].setBackgroundColor(getResources().getColor(R.color.[Button_Co

Now for mathematical operations to happen we have to first set values between
which these operations will happen. So create two double variables var1 and var2.
Their values will be derived from txt1 (a.k.a. TextView1).

To derive the value of variable1 create a method and in this method we will convert a
string variable to double variable in code as shown below:

public void setVar1(){
var1 = Double.parseDouble(txt1.getText().toString());
}

So now we create an onClickListener for Add button.

add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(add);
buttonFalse();
addition = true;
}
});

In the code above we have first set val1 value, then the color of the button is
changed and then the addition button is deactivated and txt1 is reset using another
method buttonFalse() and addition which is a boolean variable is set to true which
was false in the beginning. The addition will be done after the user enters the second
variable again and clicks Enter button. Code for buttonfalse() can be found below.

The Same procedure is followed for other mathematical operators i.e, subtract,
divide and multiply as well.

For Log, Sqrt, Square, Cube and Cube root, we have made the results available
without needing the user to press enter as only one variable is required. See code
below to know more about Java code used in each operator.

The Enter button does the main calculation, but before that var2 has to be set. For
this first setOnClickListener and then enter following code:

var2 = Double.parseDouble(txt1.getText().toString());

Using If-Else code as shown below:

if(addition){
ans = var1 + var2;
} else if (subtract){
ans = var1 ­ var2;
} else if (multiply){
ans = var1 * var2;
} else if (divide){
ans = var1 / var2;
} else {
ans = ans + 0;
}

Now set ans to txt2 and disable enter button by using the code below:

txt2.setText(ans.toString());
enter.setEnabled(false);

To reuse the calculator use allReset method which will reset colors, availability of all
buttons and textview text by using the code as shown below.
MainActivity.java

package com.faultinmycode.mycalculator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button b1, b2, b3, b4, b5, b6, b7, b8, b9, b0, enter, add, sub, mul, di
Button cb, cbrt, dec, log10;
TextView txt1, txt2;
Double var1;
Double var2;
Double ans;
Boolean addition = false, subtract = false, multiply = false, divide = 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1 = findViewById(R.id.one);
b2 = findViewById(R.id.two);
b3 = findViewById(R.id.three);
b4 = findViewById(R.id.four);
b5 = findViewById(R.id.five);
b6 = findViewById(R.id.six);
b7 = findViewById(R.id.seven);
b8 = findViewById(R.id.eight);
b9 = findViewById(R.id.nine);
b0 = findViewById(R.id.zero);
add = findViewById(R.id.add);
sub = findViewById(R.id.sub);
mul = findViewById(R.id.mul);
div = findViewById(R.id.div);
sq = findViewById(R.id.sq);
sqrt = findViewById(R.id.sqrt);
cb = findViewById(R.id.cub);
cbrt= findViewById(R.id.cubroot);
dec = findViewById(R.id.dec);
log10 = findViewById(R.id.log);
enter = findViewById(R.id.enter);
clear = findViewById(R.id.clear);
txt1 = findViewById(R.id.txt1);
txt2 = findViewById(R.id.txt2);
//to show value of this button in textView1
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"1");
}
});
//to show value of this button in textView1
b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"2");
}
});
//to show value of this button in textView1
b3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"3");
}
});
//to show value of this button in textView1
b4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"4");
}
});
//to show value of this button in textView1
b5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"5");
}
});
//to show value of this button in textView1
b6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"6");
}
});
//to show value of this button in textView1
b7.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"7");
}
});
//to show value of this button in textView1
b8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"8");
}
});
//to show value of this button in textView1
b9.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"9");
}
});
//to show value of this button in textView1
b0.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+"0");
}
});
//to show value of this button in textView1
dec.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
txt1.setText(txt1.getText()+".");
}
});
//To calculate Log with base 10
log10.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(log10);
ans = Math.log10(var1);
txt2.setText(ans.toString());
enter.setEnabled(false);
buttonFalse();
}
});
//To Add
add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(add);
buttonFalse();
addition = true;
}
});
//To subtract
sub.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(sub);
buttonFalse();
subtract = true;
}
});
//To multiply
mul.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(mul);
buttonFalse();
multiply = true;
}
});
//To divide
div.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(div);
buttonFalse();
divide = true;
}
});
//To calculate square
sq.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(sq);
ans = var1 * var1;
txt2.setText(ans.toString());
enter.setEnabled(false);
buttonFalse();
}
});
//To calculate square Root
sqrt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(sqrt);
ans = Math.sqrt(var1);
txt2.setText(ans.toString());
enter.setEnabled(false);
buttonFalse();
}
});
//To calculate cube
cb.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(cb);
ans = var1 * var1 * var1;
txt2.setText(ans.toString());
enter.setEnabled(false);
buttonFalse();
}
});
//To calculate Cube Root
cbrt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setVar1();
colorChange(cbrt);
ans = Math.cbrt(var1);
txt2.setText(ans.toString());
enter.setEnabled(false);
buttonFalse();
}
});
//To clear and refresh everything!
clear.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allReset();
}
});
//To calculate answer
enter.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
var2 = Double.parseDouble(txt1.getText().toString());
if(addition){
ans = var1 + var2;
} else if (subtract){
ans = var1 ­ var2;
} else if (multiply){
ans = var1 * var2;
} else if (divide){
ans = var1 / var2;
} else {
ans = ans + 0;
}
txt2.setText(ans.toString());
enter.setEnabled(false);
}
});
}
//To disable buttons
public void buttonFalse(){
sub.setEnabled(false);
mul.setEnabled(false);
div.setEnabled(false);
add.setEnabled(false);
txt1.setText("");
}
//To set val1 value
public void setVar1(){
var1 = Double.parseDouble(txt1.getText().toString());
}
//to reset all buttons and textview
public void allReset(){
sq.setBackgroundColor(getResources().getColor(R.color.buttonColor));
 sqrt.setBackgroundColor(getResources().getColor(R.color.buttonColor));
cb.setBackgroundColor(getResources().getColor(R.color.buttonColor));
cbrt.setBackgroundColor(getResources().getColor(R.color.buttonColor));
log10.setBackgroundColor(getResources().getColor(R.color.buttonColor));
add.setBackgroundColor(getResources().getColor(R.color.buttonColor));
mul.setBackgroundColor(getResources().getColor(R.color.buttonColor));
sub.setBackgroundColor(getResources().getColor(R.color.buttonColor));
div.setBackgroundColor(getResources().getColor(R.color.buttonColor));
enter.setEnabled(true);
sub.setEnabled(true);
mul.setEnabled(true);
div.setEnabled(true);
add.setEnabled(true);
txt1.setText("");
txt2.setText("");
}
//to change button color
public void colorChange(Button b){
b.setBackgroundColor(getResources().getColor(R.color.colorAccent));
}
}

8. TaDa! Run your app and let us know about your experience in the
comment section below.

Download Android Calculator tutorial

Project from link here
Facebook Comments
 0 Comments Sort by  Oldest

Add a comment...

Facebook Comments Plugin

Share this:

 2

Like this:

Loading...
Android Login App Tutorial | Roadway to Using WebView convert any website into
Android Developement Course Android App

Android Toast Tutorial | Roadway to Android

Development

Posted in Android DevelopmentTagged Android Java, Android Tutorial,

Calculator App, Roadway to Android Development

Related posts

17 most valuable tips from Top 6 Android Image filter libraries to

professionals to become a better create Instagram like filter App
Android Developer

7 Most Important Java Programming

concepts to know for Android App
Development
 Android Thread and Handler Tutorial |
FaultInMyCode

Trending Posts

In 4 Simple Steps Learn How to Setup Your Own WordPress Website...

 7 Shares

5 Tips on how you can become a smart programmer...

 6 Shares

11 Android Development Tips for Beginners from Experienced Developers...

 4 Shares

Android Toast Tutorial | Roadway to Android Development...

 4 Shares

7 Most Important Java Programming concepts to know for Android App

Development...
 4 Shares

Subscribe to our mailing list

 * indicates required
Email Address *

Name *

Subscribe

We're Social

   

Instagram

@faultinmy
Your daily dose of Tech feed :)
  Follow on Instagram

Facebook

Fault in my Code
380 likes

Like Page Share

Be the first of your friends to like this
 Feeling Lucky

Search … Search

See More

Android Development (10)

Blogging (27)

Mobile (4)

Online Deals (1)

Programming (11)

Python (3)

Technology (1)

Tips and Tricks (1)

Vellapanti (1)

You Should Know (1)

Copyright © 2017 Faultinmycode.com. All rights reserved. By visiting this Website you agree to be
bound by the Terms and Conditions and the Privacy Policy.