How to make a Calculator in Android Studio | Part 1 | Make a simple Increment application

In this part, I will show you how to to create a simple application that increments a value displayed in the interface. We’ll setup the interface and link the UI elements to our Java code to perform our logic.

The first thing we will do is to Update the res/layout/activity_main.xml file to add a button and a text view:

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/initial_tv_value"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.366" />

    <Button
        android:id="@+id/btn_increment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="@string/increment"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_value" />

</androidx.constraintlayout.widget.ConstraintLayout>

After that, add the referenced text values in the res/values/strings.xml file:

<string name="app_name">Calculator</string>
<string name="increment">Increment</string>

The button has an ID btn_increment and the text view has an id tv_value that will be used to display our value.

Next step would be to define the variables in your Java class : res/layout/MainActivity.java and initialize them. To do that, we’ll first add the variables on the class level:

private Button btnIncrement;
private TextView tvValue;

Then to initialize them, we’ll create a new method called initViews() as such:

private void iniViews() {
    this.btnIncrement = findViewById(R.id.btn_increment);
    this.tvValue = findViewById(R.id.tv_value);
}

Then we’ll call this method in the onCreate() method. So our new OnCreate() would look like this:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    iniViews();
}

Once the views are initialized, we’ll need to setup the listeners to listen for the event of the button click to perform or logic. To do that, we’ll define a class variable called displayedValue and a function called clickListeners() that will increment a value. The result result should look like this :

private int displayedValue;

private void clickListeners() {
    this.btnIncrement.setOnClickListener((v) -> {

        // increment a value
        this.displayedValue += 1;

        Log.d("displayedValue", String.valueOf(displayedValue));

        this.tvValue.setText(String.valueOf(this.displayedValue));

    });
}

We’ll then call this method in the onCreate() method and our code should look like this:

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Button btnIncrement;
    private TextView tvValue;
    private int displayedValue;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iniViews();
        clickListeners();
    }

    private void clickListeners() {
        this.btnIncrement.setOnClickListener((v) -> {

            // increment a value
            this.displayedValue += 1;

            Log.d("displayedValue", String.valueOf(displayedValue));

            this.tvValue.setText(String.valueOf(this.displayedValue));

        });
    }

    private void iniViews() {
        this.btnIncrement = findViewById(R.id.btn_increment);
        this.tvValue = findViewById(R.id.tv_value);
    }
}

So far, your application is operational with no custom styling and with the default button colors.

If you want to change the style you can add a new color in the res/values/colors.xml file:

<color name="blue">#125BDA</color>
<color name="blue_night">#6190E1</color>

Then change our style in the res/values/themes.xml to add a new item with the name colorPrimary and reference our color like so :

<item name="colorPrimary">@color/blue</item>

Do the same in the style for the dark mode res/values-night/themes.xml

<item name="colorPrimary">@color/blue_night</item>
<item name="colorOnPrimary">@color/white</item>

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 :

You can checkout Part 2 HERE