TY Practical No. 12 Develop a Simple Calculator Using GridLayout and GUI Concepts

Practical No. 12

Develop a Simple Calculator Using GridLayout and GUI Concepts

Aim of the Experiment

To develop a Simple Calculator Android Application using GridLayout and GUI concepts that performs basic arithmetic operations and displays:

Student Name: FirstName LastName

on the application screen.

I. Practical Significance

This practical focuses on implementing a Basic Calculator App using:

GridLayout for structured UI design
GUI components such as TextView and Button
Event handling for user interaction

It helps students understand how real-world utility applications are designed in Android.

II. Industry / Employer Expected Outcome(s)

After completing this experiment, students will be able to:

Design calculator keypads using GridLayout
Implement event-driven programming
Build arithmetic logic useful in scientific and financial applications

III. Course Level Learning Outcome(s)

CO3 – Develop Android applications using UI components and layouts.

IV. Laboratory Learning Outcome(s)

LLO 12.1 – Create an application using GridLayout.

V. Relevant Affective Domain Related Outcomes

Builds confidence in developing real-world utility apps
Improves logical thinking and UI structuring skills

VI. Relevant Theoretical Background

GridLayout: Organizes UI elements in rows and columns; ideal for calculator keypads
GUI Concepts:
- TextView → Displays numbers and results
- Button → Accepts user input
Event Handling: setOnClickListener() handles button clicks
Arithmetic Logic: Uses Double.parseDouble() for calculations
State Management: Maintains operands and operator during calculation

Project File Structure (Tree Diagram)

SimpleCalculator/
│
├── app/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/simplecalculator/
│   │   │   │   └── MainActivity.java
│   │   │   │
│   │   │   ├── res/
│   │   │   │   ├── layout/
│   │   │   │   │   └── activity_main.xml
│   │   │   │   │
│   │   │   │   └── values/
│   │   │   │       └── strings.xml
│   │   │   │
│   │   │   └── AndroidManifest.xml

Step 1: `activity_main.xml`

(GridLayout User Interface)

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:padding="16dp">

    <!-- Student Name -->
    <TextView
        android:id="@+id/txtStudent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Student Name: FirstName LastName"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_columnSpan="4"
        android:gravity="center"
        android:padding="8dp" />

    <!-- Display -->
    <TextView
        android:id="@+id/txtDisplay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="24sp"
        android:background="#DDDDDD"
        android:gravity="end"
        android:padding="10dp"
        android:layout_columnSpan="4" />

    <!-- Calculator Buttons -->
    <Button android:id="@+id/btn7" android:text="7"/>
    <Button android:id="@+id/btn8" android:text="8"/>
    <Button android:id="@+id/btn9" android:text="9"/>
    <Button android:id="@+id/btnDiv" android:text="/"/>

    <Button android:id="@+id/btn4" android:text="4"/>
    <Button android:id="@+id/btn5" android:text="5"/>
    <Button android:id="@+id/btn6" android:text="6"/>
    <Button android:id="@+id/btnMul" android:text="*"/>

    <Button android:id="@+id/btn1" android:text="1"/>
    <Button android:id="@+id/btn2" android:text="2"/>
    <Button android:id="@+id/btn3" android:text="3"/>
    <Button android:id="@+id/btnSub" android:text="-"/>

    <Button android:id="@+id/btn0" android:text="0"/>
    <Button android:id="@+id/btnClear" android:text="C"/>
    <Button android:id="@+id/btnEqual" android:text="="/>
    <Button android:id="@+id/btnAdd" android:text="+"/>

</GridLayout>

Step 2: `MainActivity.java`

(Event Handling + Arithmetic Logic)

package com.example.simplecalculator;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    TextView display;
    double firstNumber = 0;
    String operator = "";

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

        display = findViewById(R.id.txtDisplay);

        int[] numberButtons = {
                R.id.btn0, R.id.btn1, R.id.btn2, R.id.btn3,
                R.id.btn4, R.id.btn5, R.id.btn6,
                R.id.btn7, R.id.btn8, R.id.btn9
        };

        View.OnClickListener numberListener = v -> {
            Button b = (Button) v;
            if (display.getText().toString().equals("0")) {
                display.setText(b.getText().toString());
            } else {
                display.setText(display.getText().toString() + b.getText().toString());
            }
        };

        for (int id : numberButtons) {
            findViewById(id).setOnClickListener(numberListener);
        }

        findViewById(R.id.btnAdd).setOnClickListener(v -> setOperator("+"));
        findViewById(R.id.btnSub).setOnClickListener(v -> setOperator("-"));
        findViewById(R.id.btnMul).setOnClickListener(v -> setOperator("*"));
        findViewById(R.id.btnDiv).setOnClickListener(v -> setOperator("/"));

        findViewById(R.id.btnEqual).setOnClickListener(v -> calculateResult());

        findViewById(R.id.btnClear).setOnClickListener(v -> {
            display.setText("0");
            firstNumber = 0;
            operator = "";
        });
    }

    private void setOperator(String op) {
        firstNumber = Double.parseDouble(display.getText().toString());
        operator = op;
        display.setText("0");
    }

    private void calculateResult() {
        double secondNumber = Double.parseDouble(display.getText().toString());
        double result = 0;

        switch (operator) {
            case "+": result = firstNumber + secondNumber; break;
            case "-": result = firstNumber - secondNumber; break;
            case "*": result = firstNumber * secondNumber; break;
            case "/": result = (secondNumber != 0) ? firstNumber / secondNumber : 0; break;
        }

        display.setText(String.valueOf(result));
    }
}

Result

A Simple Calculator Android Application using GridLayout and GUI concepts is successfully designed, implemented, and executed without errors.

Search This Blog

Technology and Innovation by Atul Kalukhe