Jetpack Compose Basics Codelab

An interactive Jetpack Compose starter project demonstrating state hoisting, survival across configuration changes with rememberSaveable, spring-physics list animations, and Material 3 design systems.

---

📖 Overview

The Compose-BasicCodeLab project demonstrates fundamental paradigm shifts introduced by Jetpack Compose. Unlike imperative Android UI toolkits that mutate existing view trees, this application showcases declarative UI rendering, where the interface is a direct mathematical function of state ($UI = f(State)$).

🎯 Key Learning Objectives

• Unidirectional Data Flow (UDF): Understanding how state flows down and events flow up through composable hierarchies.
• State Hoisting: Promoting state to common ancestors (MyApp) to decouple business logic and make composables stateless, reusable, and easily testable.
• Configuration Survival: Leveraging rememberSaveable to retain UI state (such as onboarding status and card expansion) across device rotations and process recreations.
• Physics-Based UI Animations: Utilizing Jetpack Compose's animateContentSize with customized spring specs (DampingRatioMediumBouncy and StiffnessLow).
• High-Performance Lists: Rendering virtualized collections containing 1,000+ dynamic items via LazyColumn.

---

🏗️ Architecture & State Flow

graph TD
classDef state fill:#1A365D,stroke:#63B3ED,stroke-width:2px,color:#fff;
classDef comp fill:#2D3748,stroke:#4FD1C5,stroke-width:2px,color:#fff;
classDef event fill:#744210,stroke:#F6E05E,stroke-width:2px,color:#fff;
subgraph StateManagement ["Root State Hoisting (MyApp)"]
StateOnboard["shouldShowOnboarding: Boolean<br/>(rememberSaveable)"]:::state
end
StateOnboard -->|true| OnboardingScreen["OnboardingScreen()"]:::comp
StateOnboard -->|false| GreetingsScreen["Greetings()"]:::comp
OnboardingScreen -->|User clicks 'Continue'| EventContinue["onContinueClicked()"]:::event
EventContinue -->|Mutates state to false| StateOnboard
GreetingsScreen --> LazyList["LazyColumn(1000 items)"]:::comp
LazyList --> GreetingCard["Greeting(name)"]:::comp
subgraph CardComponent ["CardContents (Internal Component State)"]
CardState["expanded: Boolean<br/>(rememberSaveable)"]:::state
SpringAnim["animateContentSize(spring: Bouncy)"]:::comp
CardState --> SpringAnim
end
GreetingCard --> CardComponent
CardComponent -->|Toggle expanded| CardState

Loading

---

✨ Core Concepts & Patterns Demonstrated

1. State Hoisting & Unidirectional Data Flow

State is elevated to MyApp, allowing seamless transitions between the Onboarding screen and the Greeting feed:

@Composable
funMyApp(modifier:Modifier = Modifier) {
var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }
Surface(modifier, color =MaterialTheme.colorScheme.background) {
if (shouldShowOnboarding) {
OnboardingScreen(onContinueClicked = { shouldShowOnboarding =false })
} else {
Greetings()
}
}
}

2. Spring-Physics Animated Card Expansion

Cards dynamically expand to show detailed text with a fluid spring oscillation curve:

@Composable
funCardContents(name:String) {
var expanded by rememberSaveable { mutableStateOf(false) }
Row(
modifier =Modifier
.padding(12.dp)
.animateContentSize(
animationSpec = spring(
dampingRatio =Spring.DampingRatioMediumBouncy,
stiffness =Spring.StiffnessLow
)
)
) {
Column(
modifier =Modifier
.weight(1f)
.padding(12.dp)
) {
Text(text ="Hello ")
Text(
text = name,
style =MaterialTheme.typography.headlineMedium.copy(fontWeight =FontWeight.Bold)
)
if (expanded) {
Text(
text = ("Compose ipsum colors sit smoothly, padding themes elegantly... ").repeat(4)
)
}
}
IconButton(onClick = { expanded =!expanded }) {
Icon(
imageVector =if (expanded) Icons.Filled.ExpandLesselseIcons.Filled.ExpandMore,
contentDescription =if (expanded) stringResource(R.string.show_less) else stringResource(R.string.show_more)
)
}
}
}

3. Virtualized Lazy Lists (LazyColumn)

Replaces legacy RecyclerView adapters and view holders with a single declarative construct that efficiently emits visible items on demand.

4. Material 3 Theming & Multipreview

Pre-configured with light and dark mode @Preview definitions, verifying UI contrast and typography across form factors.

---

📱 Key Components & Project Structure

Compose-BasicCodeLab/
├── app/
│ ├── src/main/java/com/example/basiccodelab/
│ │ ├── MainActivity.kt # Host Activity, Onboarding & Greeting Composables
│ │ └── ui/theme/
│ │ ├── Color.kt # Material 3 Color tokens (Purple / Blue variants)
│ │ ├── Theme.kt # BasicCodeLabTheme wrapper & dynamic color logic
│ │ └── Type.kt # Custom Typography hierarchy
│ ├── src/main/res/
│ │ ├── drawable/ # Vector drawables & launcher icons
│ │ └── values/ # Localized string keys (show_more, show_less)
│ └── build.gradle.kts # Kotlin DSL Gradle build script & Compose BOM
└── gradle/
└── libs.versions.toml # Version Catalog for dependencies & plugins

---

🛠️ Technology Stack Matrix

Component	Library / Framework	Version / Notes
Platform	Android	API 24+ (Target SDK 35, Compile SDK 35)
Language	Kotlin	2.0+ with Kotlin Compose Compiler Plugin
UI Toolkit	Jetpack Compose	Compose BOM (androidx.compose:compose-bom)
Design System	Material Design 3	androidx.compose.material3:material3
Animation Engine	Compose Animation Core	Physics-based spring animations
Architecture	Unidirectional Data Flow	State hoisting & rememberSaveable
Tooling	Android Studio Preview	Multipreview (Light & Dark theme variants)

---

🚀 Getting Started

Prerequisites

• Android Studio Ladybug (2024.2.1+) or newer.
• JDK 17 or JDK 21.
• Android SDK 35.

Build & Run

1. Clone the repository:

   git clone https://github.com/shayann07/Compose-BasicCodeLab.git
   cd Compose-BasicCodeLab

2. Open in Android Studio: Open the folder and allow Gradle to complete dependency resolution.
3. Execute Build:

   ./gradlew assembleDebug

4. Deploy: Run on an emulator or physical device running Android 7.0 (Nougat) or higher.

---

📄 License

This project is licensed under the MIT License — Copyright (c) 2026 shayann07.