Introduction

Most DSA tutorials teach algorithms with console-based code. That’s useful — but limited. Visual learning makes abstract steps concrete. In this guide we build 12 practical projects combining DSA concepts with Jetpack Compose so readers can both understand algorithms and learn modern Android UI patterns.

Who is this for? Android developers who want to strengthen problem-solving skills and create portfolio-friendly apps; instructors who want interactive teaching material; students preparing for interviews who prefer visual learning.

Project Setup (Shared by all parts)

Create a single Android Studio project and reuse the UI scaffold for each tutorial. This keeps consistency and reduces boilerplate.

Recommended Gradle dependencies (update versions to latest stable):

// build.gradle (module)

dependencies {

  implementation("androidx.activity:activity-compose:1.9.0")

  implementation("androidx.compose.ui:ui:1.7.0")

  implementation("androidx.compose.ui:ui-tooling-preview:1.7.0")

  implementation("androidx.compose.material3:material3:1.3.0")

}

Base scaffold (MainActivity + DSAVisualizerScreen) — keep a top-level navigation that links each part for easy testing.

Part 1 — Arrays and Basic Visuals

Concept: Arrays are the foundation for many algorithms. Start by visualizing arrays as a row of boxes or bars so you have a UI primitive to reuse for sorting and searching.

Example: Display an array

@Composable
fun ArrayRow(arr: List) {

  Row(Modifier.horizontalScroll(rememberScrollState())) {

    arr.forEach { value ->

      Box(Modifier.width(48.dp).height(48.dp).padding(4.dp), contentAlignment = Alignment.Center) {

        Text(value.toString())

      }

    }

  }

}

Practice: Hook this display to random data and a "Shuffle" button so readers can feed different inputs to later algorithms.

Part 2 — Bubble Sort Visualizer

Why Bubble Sort? It's simple and swaps adjacent elements — ideal for animations that show comparisons and swaps.

Visualization plan

• Vertical bars represent values
• Red = comparing pair; Green = sorted; Blue = default
• Use Composable state + a coroutine (LaunchedEffect) to step through the algorithm

Core Coroutine-driven bubbleSort function

suspend fun bubbleSort(list: MutableList, onUpdate: (List, Pair, Int) -> Unit) {

  for (i in 0 until list.size) {

    for (j in 0 until list.size - i - 1) {

      onUpdate(list.toList(), j to (j+1), list.size - i)

      delay(250)

      if (list[j] > list[j+1]) { swap...; onUpdate(...); delay(250) }

    }

  }

}

Tip: Keep delays configurable so readers can speed up or slow down the animation.

Part 3 — Selection Sort Visualizer

Concept: Selection Sort scans for the min element and swaps once per outer iteration. Visualizing the current minimum and comparisons clarifies why the algorithm does so many comparisons.

Key color mapping

• Yellow — current minimum candidate
• Red — current comparison
• Green — sorted prefix

// pseudocode to drive UI updates

for (i in 0 until n) {

  minIdx = i

  for (j in i+1 until n) {

    onUpdate(list, j, minIdx, i)

    delay(300)

    if (list[j] < list[minIdx]) { minIdx = j; onUpdate(...) }

  }

  swap(i, minIdx)

}

Part 4 — Quick Sort Visualizer

Concept: Quick Sort is divide-and-conquer. Visualizing partitioning and recursion helps learners understand how subarrays get sorted independently.

Visual approach

• Pivot = yellow
• Comparing index = red
• Sorted indices = green

suspend fun partition(list: MutableList<Int>, low:Int, high:Int):Int { ... }

suspend fun quickSortRecursive(low, high) { if (low < high) { pi = partition(...); quickSortRecursive(low,pi-1); quickSortRecursive(pi+1,high) }}

UX note: Because recursion can bubble many small steps fast, consider grouping smaller delays for partition vs swaps to keep the visualization readable.

Part 5 — Stack (Undo Example)

Concept: Stack is LIFO. Use it in UI for undo features or navigation history.

Simple Kotlin Stack class

class MyStack<T> { private val items = mutableListOf<T>(); fun push(item:T)=items.add(item); fun pop():T?=if(items.isNotEmpty()) items.removeAt(items.lastIndex) else null }

Compose Example: Save the previous text state before every change and push into the stack so an "Undo" button restores the last state.

Part 6 — Queue

Concept: Queue is FIFO. Great for modelling print queues, message buffers, or task schedulers.

Compose UI idea

• Input to enqueue tasks
• Process/Dequeue button that pops the head
• Show processing animation for each dequeued item

val queue = ArrayDeque<String>()
queue.addLast("task") // enqueue

queue.removeFirst()     // dequeue

Part 7 — Searching (Linear & Binary)

Searching is everywhere. Start with Linear Search (O(n)) and then Binary Search (O(log n)) for sorted arrays.

fun linearSearch(arr:List<Int>, target:Int):Int { for(i in arr.indices) if (arr[i]==target) return i; return -1 }
fun binarySearch(arr:List<Int>, target:Int):Int { var l=0; var r=arr.size-1; while(l<=r){ val m=(l+r)/2; if(arr[m]==target) return m; if(arr[m]

UI: Highlight checked indexes in the array; for binary search highlight the mid element at each step.

Part 8 — Binary Search Visualizer

This part builds a step-by-step visualizer for Binary Search so readers can see mid changes and how the search interval shrinks.

fun binarySearchSteps(array:List<Int>, target:Int):List<Int> {
  var low=0; var high=array.size-1; val steps= mutableListOf<Int>()

  while (low<=high) {

    val mid=(low+high)/2

    steps.add(mid)

    when {

      array[mid]==target -> break

      array[mid] low=mid+1

      else -> high=mid-1

    }

  }

  return steps

}

Use `steps` to animate or allow step-through controls in the UI.

Part 9 — Heap & Priority Queue

Concept: Heaps power priority queues and are used in algorithms like Dijkstra. Visualize the array-backed heap and show bubble-up / bubble-down operations.

class MinHeap { private val heap = mutableListOf<Int>()
fun insert(v:Int){ heap.add(v); bubbleUp(heap.lastIndex) }

fun remove():Int?{ if(heap.isEmpty()) return null; val root=heap[0]; heap[0]=heap.removeAt(heap.lastIndex); bubbleDown(0); return root }

}

UI ideas: show both the array layout (LazyRow) and an optional tree diagram (Canvas) for the heap levels.

Part 10 — Graphs (BFS & DFS)

Concept: Graphs model relationships. BFS explores by layers; DFS explores deep first. For visualization, draw nodes & edges and highlight visited nodes in order.

class Graph<T> { private val adj = mutableMapOf<T, MutableList<T>>()

fun addVertex(v:T){ adj.putIfAbsent(v, mutableListOf()) }

fun addEdge(a:T,b:T){ adj[a]?.add(b); adj[b]?.add(a) }

fun bfs(start:T):List<T>{ ... }

fun dfs(start:T):List<T>{ ... }

}

Canvas layout tip: predefine node coordinates and draw edges first, then nodes so nodes appear on top. Animate traversal using a coroutine and a `visited` list.

Part 11 — Priority Queue (Max Heap) Visualizer

Implement a MaxHeap of tasks with priorities and expose UI to insert tasks (name + priority) and extract the highest-priority task.

data class Task(val name:String, val priority:Int)

class MaxHeap { private val items= mutableListOf<Task>() ... }

Show tasks in heap order and optionally animate swaps so readers see priorities bubble up.

Part 12 — Hash Table (HashMap) Visualizer

Concept: Hash tables offer near O(1) access. Visualize buckets so readers see collisions and chaining behavior.

class HashTable<K,V>(val size:Int=10) {

  private val buckets = Array(size) { mutableListOf<Pair<K,V>>() }

  fun put(k:K,v:V){ val i = k.hashCode() % size; // chain into buckets[i] }

}

UI: show each bucket with its list of key→value pairs. Add insertion and lookup forms so readers can experiment with.