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

1. Basic Screen Setup

• In the **Components** list (right), click on **Screen1**. • In the **Properties** panel (far right), find **Title** and change it to "Matrix Calculator". • Change **BackgroundColor** to Black and **AlignHorizontal** to Center. • This gives your app a professional dark theme from the start.

2

2. Adding the Title

• Go to the **Palette** (left side) -> **User Interface**. • Drag a **Label** onto the screen. • In Properties, change **Text** to "MATRIX A" and **TextColor** to White. • Set **FontBold** to checked.

3

3. Creating the 2×2 Input Grid

• Go to **Palette** -> **Layout**. • Drag a **HorizontalArrangement** under your label. • Inside it, drag 2 **TextBoxes** from **User Interface**. • **Crucial**: Rename these (using the button under Components list) to 'A11' and 'A12'. • Repeat for the second row (Rename to 'A21' and 'A22'). • Set all TextBoxes to **NumbersOnly** = checked in Properties.

4

4. Adding Operation Buttons

• Drag another **HorizontalArrangement** from Layout. • Drag 3 **Buttons** inside it. • Rename them to 'AddBtn', 'SubBtn', and 'DetBtn'. • Change their **Text** properties to "+", "-", and "DET". • Set **Width** to "Fill Parent" so they share the space.

5

5. Result Display

• Drag a **Label** to the very bottom. • Rename it to 'ResultLbl'. • Change **Font Size** to 20 and **Text** to "Result will appear here". • Change **TextColor** to Green.

🧩Part B — Blocks View (Logic & Calculation)

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

1

1. Switch to Blocks

• Look at the top right of your screen. • Click the **Blocks** button to leave the Designer and enter the logic area.

2

2. Handle the Addition Button

• Click on **AddBtn** in the list on the left. • Drag the gold 'when AddBtn.Click' block into the empty space. • Click on **ResultLbl**. Drag the green 'set ResultLbl.Text to' block and snap it inside the gold button block. • Go to the **Math** drawer (Blue). Drag out the '+' block and plug it into the green 'to' slot. • Click **A11**. Drag out 'A11.Text' and snap it into the first slot of the '+' block. • Click **B11**. Drag out 'B11.Text' and snap it into the second slot.

3

3. Handle the Determinant (2×2)

• Cramer's Rule is (A11 * A22) - (A12 * A21). • Drag 'when DetBtn.Click' (Gold). • From **Math** (Blue), get the '-' and '*' blocks. • Logic structure: [set ResultLbl.Text to] [ (A11 * A22) - (A12 * A21) ]. • Use the Blue '*' blocks for each multiplication and '-' for the subtraction.

4

4. Error Checking

• Go to the **Control** drawer (Dark Orange). Drag an 'if...then' block and snap it at the very top of your button logic. • In the 'if' slot, check if a textbox is empty. • Go to the **Text** drawer (Pink) and use the 'is empty' block. • If empty, use **Notifier1.ShowMessageDialog** to tell the user: "Please fill all boxes!".

🧪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 →