Compose Responsive Design — Smart Watch UI

A focused Jetpack Compose example demonstrating responsive UI design across phone, tablet, and desktop form factors.
This project shows how a single Compose screen adapts layout, typography, and spacing using Window Size Classes and Material 3 adaptive APIs.

---

📱 Overview

This project implements a product details screen for a smart watch (Chronos Active X) using Jetpack Compose.
The layout automatically adapts based on device size and orientation, following real-world responsive design principles.

It is intended as:

• A learning reference for Compose responsive UI
• A workshop or teaching example
• A clean portfolio demo

---

🎯 Key Concepts Demonstrated

• Jetpack Compose Responsive Design
• Material 3 Adaptive APIs
• WindowSizeClass usage
• Layout switching (Column ↔ Row)
• Responsive typography and line height
• Adaptive paddings and spacings
• System insets handling (safeDrawing, statusBars, navigationBarsPadding)
• Multiple device previews (phone, tablet, desktop)

---

🛠 Tech Stack

• Kotlin
• Jetpack Compose
• Material 3
• Compose Adaptive APIs

---

📁 Project Structure (Simplified)

• app/
• ├── ui/
• │ ├── theme/
• │ └── screens/
• ├── util/
• │ └── DeviceConfiguration.kt
• └── SmartWatchScreen.kt

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/DevNajiAbed/ComposeResponsiveDesign.git

2. Open the project in Android Studio

3. Run the app on:

   • Phone emulator
   • Tablet emulator
   • Desktop emulator

   Or inspect the UI directly using Compose Preview.

---

🧠 How Responsiveness Works

1️⃣ Detect Window Size

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

2️⃣ Map to Device Configuration

DeviceConfiguration.fromWindowSizeClass(windowSizeClass)

A custom DeviceConfiguration abstraction converts window size classes into meaningful device types:

• MOBILE_PORTRAIT
• MOBILE_LANDSCAPE
• TABLET_PORTRAIT
• TABLET_LANDSCAPE
• DESKTOP

This keeps UI logic clean and readable.

3️⃣ Switch Layout Dynamically

Device Type	Layout
Mobile (Portrait) / Tablet (Portrait)	Column
Mobile (Landscape) / Tablet (Landscape) / Desktop	Row

when (deviceConfiguration) {
    MOBILE_PORTRAIT, TABLET_PORTRAIT -> Column { /* ... */ }
    else -> Row { /* ... */ }
}

4️⃣ Responsive Typography

Font sizes and line heights scale based on screen size to maintain readability:

fontSize = when (deviceConfiguration) {
    MOBILE_PORTRAIT, 
    MOBILE_LANDSCAPE -> 32.sp
    TABLET_PORTRAIT, 
    TABLET_LANDSAPE-> 60.sp
    DESKTOP -> 80.sp
}

---

🧩 UI Components

SmartWatchScreen

• Main responsive screen
• Chooses layout based on device configuration

SmartWatchImage

• Displays the product image
• Scales correctly in all layouts

SmartWatchDetails

• Product title, description, and CTA button
• Fully responsive text and spacing

---

🔍 Compose Previews

Multiple previews are included for fast inspection without running the app:

• Phone — Portrait
• Phone — Landscape
• Tablet — Portrait
• Tablet — Landscape
• Desktop — Large screen

// Mobile Portrait Preview
@Preview(showSystemUi = true)
// Mobile Landscape Preview
@Preview(showSystemUi = true, device = "spec:parent=pixel_5,orientation=landscape")
// Tablet Portrait Preview
@Preview(showSystemUi = true, device = "spec:parent=pixel_tablet,orientation=portrait")
// Tablet Landscape Preview
@Preview(showSystemUi = true, device = "id:pixel_tablet")
// Desktop Preview
@Preview(device = "id:desktop_large", showSystemUi = true)
@Composable
private fun PreviewSmartWatchScreen() { /* ... */ }

---

👤 Author

Naji Abed
Android Developer & Trainer
Jetpack Compose • Kotlin • Clean Architecture

GitHub: https://github.com/DevNajiAbed