Share
Explore

Android with Jet Pack Compose Lab 1: “Quote of the Day”

🧪 Lab 1: First Composable App – “Quote of the Day”

⁠
image.png
⁠
⁠
⁠

🧭 Objective

Create a basic Android app using Jetpack Compose that displays a quote and author.
This activity introduces:
Composable functions
Material3 theming
UI layout with Column & Surface
Modifiers for styling
Live Preview in Android Studio
⁠

📦 Project Setup

Open Android Studio → New Project
Choose “Empty Activity”
Language: Kotlin
Minimum SDK: API 26 (Android 8.0) or higher
Project name: QuoteOfTheDay
Ensure Material3 support is enabled in your build.gradle:
implementation("androidx.compose.material3:material3:1.1.2")


Android Studio Setup Notes:

minus

✅ "Empty Activity" is the Compose template… now

As of recent Android Studio versions (like Hedgehog and later), Jetpack Compose is integrated into the "Empty Activity" template by default — as long as you enable Kotlin and Compose support during setup.
So while it doesn’t say “Empty Compose Activity” in the template picker anymore, choosing “Empty Activity” will get you Compose if you configure it correctly on the next screen.
⁠

🛠️ What to Do Next

After selecting "Empty Activity" and clicking Next, make sure:
Language = Kotlin
Use Jetpack Compose = ✅ (checked)
⚠️ If you don’t see this checkbox, your Android Studio installation may not be fully updated or Compose-enabled.
Minimum SDK: Choose API 26 or higher (ideally 28+)
That will scaffold a Compose-ready project with:
MainActivity.kt using setContent {}
Material3 theme
Gradle dependencies preconfigured for Compose
⁠

🧰 If You Don't See the "Use Jetpack Compose" Checkbox:

Go to File > Project Structure > Modules > Dependencies and manually add:
implementation("androidx.compose.ui:ui:1.6.4")
implementation("androidx.compose.material3:material3:1.2.0")
implementation("androidx.activity:activity-compose:1.8.0")

Also ensure Compose is enabled in build.gradle:
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.6.4"
}

⁠

🧠 Instructor Tip:

To simplify onboarding in Week 1, consider preparing a starter repo or GitHub Classroom template with Compose already configured — this ensures students don't get blocked by tooling inconsistencies.

🛠️ Development Instructions

🔹 Step 1: Define the QuoteCard Composable

In MainActivity.kt, add the following inside the MainActivity class (or in a separate ui/ file later):
@Composable
fun QuoteCard(quote: String, author: String) {
Surface(
color = MaterialTheme.colorScheme.primaryContainer,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.wrapContentHeight()
.shadow(4.dp, RoundedCornerShape(12.dp)),
shape = RoundedCornerShape(12.dp),
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "\"$quote\"",
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onPrimaryContainer
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "- $author",
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onPrimaryContainer
)
}
}
}

⁠

🔹 Step 2: Call the Composable in Main UI

Replace the default Greeting() call in setContent {} with QuoteCard():
setContent {
MaterialTheme {
QuoteCard(
quote = "The best way to predict the future is to invent it.",
author = "Alan Kay"
)
}
}

⁠

🔹 Step 3: Add a Preview

Below your composable, add:
@Preview(showBackground = true)
@Composable
fun QuoteCardPreview() {
MaterialTheme {
QuoteCard(
quote = "Imagination is more important than knowledge.",
author = "Albert Einstein"
)
}
}

Use Preview in Android Studio to render the UI without needing to run the emulator.
⁠
⁠

🧪 Lab Deliverables

Students must:
Build and preview the QuoteCard composable.
Apply Material3 theming.
Use Modifier for layout styling.
Submit a screenshot of the app preview and share code via GitHub Classroom.
⁠

🧠 Skills Practiced

Creating and previewing @Composable functions
Using Surface, Text, Column, and Spacer
Applying Modifier chaining for layout and design
Theming with MaterialTheme.colorScheme and typography
Structuring visual hierarchy declaratively
⁠

🧰 Instructor Notes

Reinforce the idea of composables as functions, not widgets.
Emphasize immutability: the UI does not change state here — but that’s coming in Week 2.
Encourage students to experiment with typography and colors.
If students finish early: 🔁 Challenge them to add a random quote selector or allow the quote to be updated from a list.
⁠

🖼️ Visual Preview

+--------------------------------------------------+
| "The best way to predict the future is |
| to invent it." |
| |
| – Alan Kay |
+--------------------------------------------------+

Styled with rounded corners, a soft primary container background, and Material3 text styles.
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.