How to Create Android Calculator Application

In this post we are going to learn how to build mobile app from scratch, we are going to build a simple android calculator application with Kotlin support

Simple Calculator Application

Let's Start

Step 1: Create New Android Project

  • Open Android Studio
  • Go to file menu
  • Select  new
  • Enter project name 
  • Enter activity name
  • Keep other default settings
  • Select Language Kotlin
  • Click on finish button to create a new android project

Step 2: Add Required Dependencies in app level build.gradle file

implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
implementation 'androidx.core:core-ktx:1.3.0-alpha01'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Step 3: Updated all resourses files

colors.xml

<resources>
    <color name="colorPrimary">#EC9109</color>
    <color name="colorPrimaryDark">#F50959</color>
    <color name="colorAccent">#9C27B0</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
    <color name="colorAsh">#bbb</color>
    <color name="colorBg">#272927</color>
</resources>

 

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>



<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="stylish">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">30sp</item>
    <item name="android:fontFamily">@font/font_family_ptsans</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

<style name="arithmetic_keys" parent="stylish">
    <item name="android:textColor">@android:color/holo_red_light</item>
</style>

<style name="foto_vertical_views">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_weight">0.01</item>
    <item name="android:background">@android:color/black</item>
</style>

<style name="CalculatorTextView">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">0dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">30sp</item>
    <item name="android:fontFamily">@font/font_family_ptsans</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

Step 4: Now Update MainActivity.kt and xml file with below code

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.content.Intent
import android.os.Handler



class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val handler = Handler()
        handler.postDelayed({
            val intent = Intent(this@MainActivity, CalculatorActivity::class.java)
            startActivity(intent)
            finish()
        }, 2000)
    }
}

 

activity_main.xml

<FrameLayout 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:orientation="vertical"
             android:background="@color/colorBg"
             tools:context=".MainActivity">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="20dp"
            tools:ignore="UseCompoundDrawables">

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:contentDescription="@string/app_name"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Simple Calculator"
                android:textColor="@color/colorPrimary"
                android:layout_marginTop="10dp"
                android:textSize="14sp"/>



    </LinearLayout>

</FrameLayout>

 

Step 5: Create new Activity CalculatorActivity.kt and update below code

CalculatorActivity.kt

import android.content.pm.ActivityInfo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.method.TextKeyListener.clear
import android.util.Log
import android.view.View
import android.view.Window
import android.view.WindowManager
import androidx.appcompat.app.ActionBar
import kotlinx.android.synthetic.main.activity_calculator.*
import org.mariuszgromada.math.mxparser.Expression



class CalculatorActivity : AppCompatActivity() {
    private val TAG = CalculatorActivity::class.java!!.getSimpleName()
    private val text = ""


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        setContentView(R.layout.activity_calculator)

        result_tv.setText("0");

        key_seven.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x7");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "7");
                carryOutCalculation();
            }

        })

        key_percentage.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (!keys_pressed_tv.getText().toString().toString().equals("")) {
                    if (!containsLastLetter("%"))
                        keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "%");
                    carryOutCalculation();
                }

        }})

        key_close_bracket.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (!keys_pressed_tv.getText().toString().toString().equals("")) {
                    if (!containsLastLetter(")") || !containsLastLetter("("))
                        keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + ")");
                    carryOutCalculation();
                }
        }})
        key_open_bracket.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (keys_pressed_tv.getText().toString().toString().equals("")) {
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "(");
                    return;
                }
                if (!containsLastLetter("+") && !containsLastLetter("-") &&
                    !containsLastLetter("x") && !containsLastLetter("÷")) {
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "x(");
                    return;
                }

                if (!containsLastLetter("(")) {
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "(");
                    return;
                }

            }})

        key_divide_operation.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (!keys_pressed_tv.getText().toString().toString().equals("")) {
                    if (!containsLastLetter("÷"))
                        operatorClicked("÷");
                }   
        }})


        key_eight.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x8");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "8");
                carryOutCalculation();
        }})

        key_nine.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x9");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "9");
                carryOutCalculation();
        }})

        key_multiply_operation.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {

                if (!keys_pressed_tv.getText().toString().toString().equals("")) {
                    if (!containsLastLetter("x"))
                        operatorClicked("x");
                }
        }})

        key_four.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x4");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "4");
                carryOutCalculation();
        }})
        
        key_five.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x5");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "5");
                carryOutCalculation();
        }})
        
        key_six.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x6");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "6");
                carryOutCalculation();
        }})
        
        key_subtract_operation.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (keys_pressed_tv.getText().toString().toString().equals("")) {
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "-");
                    return;
                }
                if (!containsLastLetter("-"))
                    operatorClicked("-");   
        }})
        
         key_one.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x1");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "1");
                carryOutCalculation();
        }})
        
         key_two.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x2");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "2");
                carryOutCalculation();
        }})
        
         key_three.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (containsLastLetter("%"))
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString()+ "x3");
                else
                    keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "3");
                carryOutCalculation();
        }})
        
         key_addition_operation.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (!keys_pressed_tv.getText().toString().toString().equals("")) {
                    if (!containsLastLetter("+"))
                        operatorClicked("+");
                }
        }})
        
        key_zero.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + "0");
                carryOutCalculation();
        }})
         key_delete.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                deleteKeyClicked();
        }})

        key_dot.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                if (!keys_pressed_tv.getText().toString().equals("")) {
                    if (!containsLastLetter(".")) {
                        keys_pressed_tv.setText(keys_pressed_tv.getText().toString() + ".");
                    }
                }
        }})
        
        clear_tv.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                keys_pressed_tv.setText("");
                result_tv.setText("0");
                key_delete.setVisibility(View.VISIBLE);
                clear_tv.setVisibility(View.INVISIBLE);
        }})
        
        
         key_submission_operation.setOnClickListener(object:View.OnClickListener{
            override fun onClick(v: View?) {
                carryOutCalculation();
                clear_tv.setVisibility(View.VISIBLE);
                key_delete.setVisibility(View.INVISIBLE);
        }})
        
        
        
        
      }



     fun operatorClicked( operator:String) {
        if (clear_tv.getVisibility() == View.VISIBLE && result_tv.getText().toString().toString() != "Error") {
            keys_pressed_tv.setText(result_tv.getText().toString().toString() + operator);
            key_delete.setVisibility(View.VISIBLE);
            clear_tv.setVisibility(View.GONE);
        } else
            keys_pressed_tv.setText(keys_pressed_tv.getText().toString().toString() + operator);
    }

    
 

        fun containsLastLetter( letter :String):Boolean {
            var text = keys_pressed_tv.getText().toString().toString();
            var last = "";
            if(text.length != 0)
                last = text.substring(text.length - 1);
            return last.equals(letter);
        }
     fun deleteKeyClicked() {
     var   text = keys_pressed_tv.getText().toString().toString();
        if (text.length > 0) {

            var newText = text.substring(0, text.length - 1);

            if (newText.equals("-")) {
                newText = "";
            }

            keys_pressed_tv.setText(newText);

            if (!newText.isEmpty()) {
                var last = newText.substring(newText.length - 1);
            } else {
                result_tv.setText("0");
            }
        }
    }

     fun carryOutCalculation() {
        var expression = keys_pressed_tv.text.toString();


        if (expression.contains("x")) {
            expression = expression.replace("x", "*");
        }

        if (expression.contains("÷")) {
            expression = expression.replace("÷", "/");
        }


        if (expression.contains("(") && !expression.substring(expression.lastIndexOf("("), expression.length).contains(")")) {
            expression += ")";
        }

        Log.d(TAG, expression);

        //Carry out the calculation
        var e1 =  Expression(expression);
        var answer = (e1.calculate()).toString();

        //Format Error
        if (answer.equals("NaN"))
            answer = "Error";

        result_tv.setText(answer);
    }

   
}

 

activity_calculator.xml

<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"
        >

    <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorBg"
            app:layout_constraintBottom_toTopOf="@+id/scrollView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:id="@+id/result_tv"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            android:layout_weight="2"
            android:fontFamily="@font/font_family_ptsans"
            android:gravity="end|center"
            android:maxLines="1"
            android:padding="8dp"
            android:textColor="@color/colorWhite"
            android:textSize="60sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toggle_nav"
            tools:text="0" />

    <TextView
            android:id="@+id/keys_pressed_tv"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:fontFamily="@font/font_family_ptsans"
            android:gravity="end|center"
            android:maxLines="1"
            android:padding="8dp"
            android:textColor="@color/colorWhite"
            android:textSize="40sp"
            android:scrollHorizontally="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/result_tv"
            tools:text="0" />

    <ScrollView
            android:id="@+id/scrollView2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:fillViewport="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/keys_pressed_tv">

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintGuide_percent="0.25" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintGuide_percent="0.75" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintGuide_percent="0.5" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintGuide_percent="0.20" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintGuide_percent="0.40" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintGuide_percent="0.60" />

            <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintGuide_percent="0.80" />

            <TextView
                    android:id="@+id/key_percentage"
                    style="@style/CalculatorTextView"
                    android:text="%"
                    app:layout_constraintBottom_toTopOf="@+id/guideline4"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            <TextView
                    android:id="@+id/key_open_bracket"
                    style="@style/CalculatorTextView"
                    android:text="("
                    app:layout_constraintBottom_toTopOf="@+id/guideline4"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="parent" />

            <TextView
                    android:id="@+id/key_close_bracket"
                    style="@style/CalculatorTextView"
                    android:text=")"
                    app:layout_constraintBottom_toTopOf="@+id/guideline4"
                    app:layout_constraintEnd_toStartOf="@+id/guideline3"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toTopOf="parent" />

            <TextView
                    android:id="@+id/key_divide_operation"
                    style="@style/CalculatorTextView"
                    android:text="÷"
                    app:layout_constraintBottom_toTopOf="@+id/guideline4"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline3"
                    app:layout_constraintTop_toTopOf="parent" />

            <TextView
                    android:id="@+id/key_seven"
                    style="@style/CalculatorTextView"
                    android:text="7"
                    app:layout_constraintBottom_toTopOf="@+id/guideline5"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/guideline4" />

            <TextView
                    android:id="@+id/key_eight"
                    style="@style/CalculatorTextView"
                    android:text="8"
                    app:layout_constraintBottom_toTopOf="@+id/guideline5"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/guideline4" />

            <TextView
                    android:id="@+id/key_nine"
                    style="@style/CalculatorTextView"
                    android:text="9"
                    app:layout_constraintBottom_toTopOf="@+id/guideline5"
                    app:layout_constraintEnd_toStartOf="@+id/guideline3"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toTopOf="@+id/guideline4" />

            <TextView
                    android:id="@+id/key_multiply_operation"
                    style="@style/CalculatorTextView"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:text="x"
                    app:layout_constraintBottom_toTopOf="@+id/guideline5"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline3"
                    app:layout_constraintTop_toTopOf="@+id/guideline4" />

            <TextView
                    android:id="@+id/key_four"
                    style="@style/CalculatorTextView"
                    android:text="4"
                    app:layout_constraintBottom_toTopOf="@+id/guideline6"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/guideline5" />

            <TextView
                    android:id="@+id/key_five"
                    style="@style/CalculatorTextView"
                    android:text="5"
                    app:layout_constraintBottom_toTopOf="@+id/guideline6"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/guideline5" />

            <TextView
                    android:id="@+id/key_six"
                    style="@style/CalculatorTextView"
                    android:text="6"
                    app:layout_constraintBottom_toTopOf="@+id/guideline6"
                    app:layout_constraintEnd_toStartOf="@+id/guideline3"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toTopOf="@+id/guideline5" />

            <TextView
                    android:id="@+id/key_subtract_operation"
                    style="@style/CalculatorTextView"
                    android:text="-"
                    app:layout_constraintBottom_toTopOf="@+id/guideline6"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline3"
                    app:layout_constraintTop_toTopOf="@+id/guideline5" />

            <TextView
                    android:id="@+id/key_one"
                    style="@style/CalculatorTextView"
                    android:text="1"
                    app:layout_constraintBottom_toTopOf="@+id/guideline7"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/guideline6" />

            <TextView
                    android:id="@+id/key_two"
                    style="@style/CalculatorTextView"
                    android:text="2"
                    app:layout_constraintBottom_toTopOf="@+id/guideline7"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/guideline6" />

            <TextView
                    android:id="@+id/key_three"
                    style="@style/CalculatorTextView"
                    android:text="3"
                    app:layout_constraintBottom_toTopOf="@+id/guideline7"
                    app:layout_constraintEnd_toStartOf="@+id/guideline3"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toTopOf="@+id/guideline6" />

            <TextView
                    android:id="@+id/key_addition_operation"
                    style="@style/CalculatorTextView"
                    android:text="+"
                    app:layout_constraintBottom_toTopOf="@+id/guideline7"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline3"
                    app:layout_constraintTop_toTopOf="@+id/guideline6" />

            <TextView
                    android:id="@+id/key_zero"
                    style="@style/CalculatorTextView"
                    android:text="0"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/guideline7" />

            <TextView
                    android:id="@+id/key_dot"
                    style="@style/CalculatorTextView"
                    android:text="."
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/guideline7" />

            <TextView
                    android:id="@+id/key_submission_operation"
                    style="@style/CalculatorTextView"
                    android:text="="
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline3"
                    app:layout_constraintTop_toTopOf="@+id/guideline7" />

            <TextView
                    android:id="@+id/key_delete"
                    style="@style/CalculatorTextView"
                    android:text="?"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/key_submission_operation"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toBottomOf="@+id/key_three" />

            <TextView
                    android:id="@+id/clear_tv"
                    style="@style/CalculatorTextView"
                    android:text="CLS"
                    android:visibility="invisible"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline3"
                    app:layout_constraintStart_toStartOf="@+id/key_delete"
                    app:layout_constraintTop_toTopOf="@+id/key_delete" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </ScrollView>

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="20dp" />

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="20dp" />

    <ImageView
            android:id="@+id/toggle_nav"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:src="@android:drawable/ic_menu_more"
            app:layout_constraintStart_toStartOf="@+id/guideline8"
            app:layout_constraintTop_toTopOf="@+id/guideline9" />

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_end="20dp" />

    <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:src="@android:drawable/ic_media_play"
            app:layout_constraintEnd_toStartOf="@+id/guideline10"
            app:layout_constraintTop_toTopOf="@+id/guideline9" />

</androidx.constraintlayout.widget.ConstraintLayout>