How to make a Calculator in Android Studio | Part 2 | Adding a numpad for simple sum
In Part 1 (find it here) we have created a simple increment button that increments the value in our view. In this part, I will show you how to add buttons and a numpad to your Android Application to make it look more like a calculator.
The first thing we will do is to Update the activity_main.xml file to add all the buttons and place them as needed :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:padding="10dp"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/tv_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
<Button
android:id="@+id/btn_clear"
style="@style/Calculator.Buttons.Operations"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/clear" />
</LinearLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="9dp"
android:gravity="center"
android:stretchColumns="*"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn_plus"
style="@style/Calculator.Buttons.Operations"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
<Button
android:id="@+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="@+id/btn_equals"
style="@style/Calculator.Buttons.Operations"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="=" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>Note that here we replaced the increment button with the clear button.
Update the Strings file :
<resources>
<string name="app_name">Calculator</string>
<string name="clear">Clear</string>
</resources>Notice that the button “+” and “=” have a custom style in them Calculator.Buttons.Operations Let’s create that custom style in our themes.xml by adding a new tag <style> after the </style> tag
<style name="Calculator.Buttons.Operations" parent="Base.Theme.Calculator">
<item name="android:backgroundTint">@color/blue_light</item>
<item name="android:textColor">@color/black</item>
</style>And then define the new color blue_light in the colors.xml file :
<color name="blue_light">#6F3D72CF</color>Let’s update the logic in our java class MainActivity.java. First we replace all our class variables with the following :
private Button btnClear, btnPlus, btnEquals;
private List<Button> btnList;
private TextView tvValue;Then we update the initViews() method:
private void iniViews() {
this.btnPlus = findViewById(R.id.btn_plus);
this.btnEquals = findViewById(R.id.btn_equals);
this.btnClear = findViewById(R.id.btn_clear);
this.btnList = new ArrayList<>();
this.btnList.add( findViewById(R.id.button0) );
this.btnList.add( findViewById(R.id.button1) );
this.btnList.add( findViewById(R.id.button2) );
this.btnList.add( findViewById(R.id.button3) );
this.btnList.add( findViewById(R.id.button4) );
this.btnList.add( findViewById(R.id.button5) );
this.btnList.add( findViewById(R.id.button6) );
this.btnList.add( findViewById(R.id.button7) );
this.btnList.add( findViewById(R.id.button8) );
this.btnList.add( findViewById(R.id.button9) );
this.tvValue = findViewById(R.id.tv_value);
}And lastly we update the clickListeners() method:
private void clickListeners() {
this.btnClear.setOnClickListener(v-> this.tvValue.setText(""));
this.btnPlus.setOnClickListener(v->{
String value = this.tvValue.getText().toString();
if(value.length() == 0) return;
if(value.charAt(value.length()-1) == ' ') return;
this.tvValue.append(" + ");
});
for (int i = 0; i < this.btnList.size(); i++) {
final int iFinal = i;
this.btnList.get(i).setOnClickListener(v->this.tvValue.append(String.valueOf(iFinal)));
}
this.btnEquals.setOnClickListener((v)->{
long result = EvaluateOperations.evaluate(this.tvValue.getText().toString());
this.tvValue.setText(String.valueOf(result));
});
}You will have an error in the line containing EvaluateOperations as that class doesn’t exist. we’ll create it right away and we’ll see how to evaluate the sums that are entered by the user.
The class should have a static method evaluate() that takes as a parameter a String and returns the long value of the result:
public class EvaluateOperations {
public static long evaluate(String txtValue) { // 3 + 43 + 21
String[] list = txtValue.split(" \\+ ");
long result = 0;
for(String e : list){
result += Long.parseLong(e);
}
return result;
}
}I prefer creating the class in a Model package to differentiate between the Java classes linked to the views and the other classes.
And we’re done! You can run your application to see the changes. 😉
Here’s a YouTube video if you want to follow the same steps more visually :
