Home/Mathematics III Year/Team 1
Team 1

Matrix Calculator

Build a powerful Android app that performs matrix operations — addition, subtraction, multiplication, transpose, and determinant — for 2×2 and 3×3 matrices. Users will enter matrix values through text boxes and see instant results.

🎯 Learning Goals

  • ▹ Understand Row-Column arrangement of data
  • ▹ Perform basic Matrix arithmetic (Add/Sub/Mul)
  • ▹ Learn properties like Transpose and Determinants
  • ▹ Handle grid-based user input in App Inventor

🌎 Why This Matters

Matrices are the heart of computer graphics (rotating 3D models), Google search algorithms (PageRank), and modern AI/Machine Learning. Learning how matrices work is learning the language of data.

📖Understanding Matrices

Theory Masterclass
"

A matrix is a rectangular arrangement of numbers in rows and columns. Matrices are used everywhere — in computer graphics, engineering, economics, and machine learning. A 2×2 matrix looks like: | a b | | c d | A 3×3 matrix has 3 rows and 3 columns (9 values total). Matrix Addition: Add corresponding elements. Both matrices must be the same size. Matrix Subtraction: Subtract corresponding elements. Matrix Multiplication: For 2×2 matrices A and B, result C where C[i][j] = sum of A[i][k] × B[k][j]. Transpose: Swap rows and columns. Element at row i, column j moves to row j, column i. Determinant (2×2): det = (a × d) - (b × c) Determinant (3×3): Use the rule of Sarrus or cofactor expansion.

Mathematical Foundation

fxAddition: C[i][j] = A[i][j] + B[i][j]
fxDeterminant (2×2): det(A) = ad - bc
fxDeterminant (3×3): det(A) = a(ei-fh) - b(di-fg) + c(dh-eg)
fxTranspose: A^T[i][j] = A[j][i]

🎨Part A — Designer View (UI Design)

Open MIT App Inventor → Switch to Designer view. Follow each step below to build the interface.

1

Set up the screen layout

Set Screen1 title to "Matrix Calculator". Set BackgroundColor to black and ForegroundColor to white. Set ScreenOrientation to Portrait.

2

Add a mode selector

Drag a HorizontalArrangement to the top. Add 2 Buttons inside: "2×2 Mode" and "3×3 Mode". Set each button width to Fill Parent (50%). These will toggle between 2×2 and 3×3 input.

3

Create Matrix A input (2×2)

Add a Label: "Matrix A" Add 2 HorizontalArrangements (one per row). In each row, add 2 TextBoxes. Name them: A11, A12, A21, A22. Set each TextBox: NumbersOnly = true, Hint = "0", Width = 25%.

4

Create Matrix B input (2×2)

Add a Label: "Matrix B" Repeat the same layout: B11, B12, B21, B22. Set the same properties as Matrix A text boxes.

5

Add operation buttons

Add a HorizontalArrangement. Add 5 Buttons: "Add", "Subtract", "Multiply", "Transpose A", "Determinant A". Set each button to a different color for visual clarity.

6

Create result display

Add a Label: "Result" with bold formatting. Add a Label named ResultLabel with FontSize 18. This will show the calculated output.

7

Add a Clear button

Add a Button at the bottom: "Clear All". Set BackgroundColor to red, TextColor to white. This will reset all text boxes and the result.

🧩Part B — Blocks View (Logic & Calculation)

Switch to Blocks view. Now add the logic that makes your app actually work.

1

Create helper variables

Initialize 4 global variables for the result matrix: - global R11 = 0, global R12 = 0 - global R21 = 0, global R22 = 0

2

Build the Addition logic

When AddButton.Click: 1. Set R11 = number(A11.Text) + number(B11.Text) 2. Set R12 = number(A12.Text) + number(B12.Text) 3. Set R21 = number(A21.Text) + number(B21.Text) 4. Set R22 = number(A22.Text) + number(B22.Text) 5. Set ResultLabel.Text to: join "| " R11 " " R12 " |\n| " R21 " " R22 " |"

3

Build the Subtraction logic

When SubtractButton.Click: Same as addition but use minus (-) instead of plus. R11 = number(A11.Text) - number(B11.Text) and so on.

4

Build the Multiplication logic (2×2)

When MultiplyButton.Click: R11 = A11×B11 + A12×B21 R12 = A11×B12 + A12×B22 R21 = A21×B11 + A22×B21 R22 = A21×B12 + A22×B22 Display the result in the same format as addition.

5

Build the Transpose logic

When TransposeButton.Click: Simply swap positions: R11 = A11 (stays same) R12 = A21 (row 2, col 1 goes to row 1, col 2) R21 = A12 R22 = A22 (stays same) Display the transposed matrix.

6

Build the Determinant logic

When DeterminantButton.Click: det = (A11 × A22) - (A12 × A21) Set ResultLabel.Text to: join "Determinant = " det

7

Build the Clear logic

When ClearButton.Click: Set all TextBox.Text = "" Set ResultLabel.Text = "" This resets the calculator for new input.

8

Add input validation

Before any calculation, check if TextBoxes are empty: if A11.Text = "" then Notifier.ShowAlert("Please fill all matrix values!") return (don't calculate) This prevents the app from crashing on empty input.

🧪Testing Your App

  • ✓Try adding two identity matrices (1,0,0,1) — result should be (2,0,0,2)
  • ✓Multiply any matrix by identity — result should be the same matrix
  • ✓Determinant of identity matrix should be 1
  • ✓Try entering negative numbers and decimals
  • ✓Leave a field empty and check your validation works

🚀Bonus Challenges

Extra credit — impress your instructor

  • ★Add 3×3 matrix support with 9 TextBoxes per matrix
  • ★Add a 'history' feature using TinyDB to save previous calculations
  • ★Color-code positive results in green and negative in red
  • ★Add an 'Inverse' button for 2×2 matrices using adj(A)/det(A)
← Back to Mathematics III YearReview Basics →