How I Created My First Android Watch Face in Jetpack Compose
Creating my first Android watch face felt scary at the beginning, but once I understood the basics of Wear OS and Jetpack Compose, it became a fun and rewarding experience. In this article, I’ll share my step‑by‑step journey, the mistakes I made, and how you can build your own custom watch face using modern Android tools.
This article is written in a real, beginner‑friendly tone, especially for students and developers who are new to Wear OS + Jetpack Compose.
Why I Chose Jetpack Compose for Watch Face
Earlier, watch faces were created using:
- XML layouts
- Canvas drawing
- Complicated services
With Jetpack Compose, everything becomes:
- Declarative ✨
- Less boilerplate
- Easier to maintain
Compose makes UI creation feel like writing normal Kotlin code, which is perfect for modern Android development.
What I Learned First
Before starting, I made sure I understood:
- Basics of Kotlin
- Jetpack Compose fundamentals
- What Wear OS is
- Difference between mobile apps and watch apps
💡 Tip: If you already know Compose for mobile, Wear OS Compose feels very familiar.
Step 1: Setting Up the Wear OS Project
In Android Studio:
- Click New Project
- Select Wear OS
- Choose Empty Compose Activity
- Select Minimum SDK: Wear OS API 30+
Android Studio automatically configures:
- Wear‑specific dependencies
- Compose for Wear OS
Step 2: Understanding Watch Face Architecture
A watch face mainly has:
Time (hours, minutes, seconds)
Date (optional)
Background design
Complications (battery, steps, weather)
My first goal was simple:
🕒 Show time beautifully with Compose
Step 3: Designing the UI with Compose
I started with a simple circular layout:
- Black background (battery‑friendly)
- Large digital time
- Subtle date text
Key Compose concepts I used:
- Box() for center alignment
- Text() for time display
- MaterialTheme for styling
Step 4: Getting the Current Time
Instead of hardcoding time, I learned how to:
- Use LocalTime
- Update UI every second
- Use LaunchedEffect and delay()
This helped me understand state management in Compose.
Step 5: Handling Always‑On Mode (AOD)
This was new for me.
In Always‑On Display:
- Animations should stop
- Colors should be minimal
- Brightness must be low
I learned:
- How Wear OS informs the app about ambient mode
- How to switch UI based on mode
This is very important for real‑world watch faces.
Step 6: Testing on Emulator & Real Device
I tested on:
Issues I faced:
- Text too big 😅
- UI clipped on round screen
- Seconds not updating
Testing helped me fine‑tune padding, font sizes, and alignment.
Mistakes I Made (So You Don’t)
❌ Ignoring round screen safe area
❌ Using too many colors (battery drain)
❌ Forgetting Always‑On rules
❌ Not testing on real hardware
What I Learned from My First Watch Face
This project taught me:
- Wear OS is not mobile Android
- Compose simplifies complex UI
- Battery optimization matters
- Small UI changes make big differences
Most importantly, I gained confidence 💪
What’s Next?
After my first watch face, I plan to add:
- Battery complication
- Step counter
- Custom fonts
- User‑selectable themes
Source Code
package com.codingbihar.mywatchface.presentation
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.material.Text
import kotlinx.coroutines.delay
import java.time.LocalDateTime
import java.time.format.DateTimeFormatter
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
installSplashScreen()
super.onCreate(savedInstanceState)
setTheme(android.R.style.Theme_DeviceDefault)
setContent {
MyFirstWatchFace()
}
}
}
@Composable
fun MyFirstWatchFace() {
var time by remember { mutableStateOf(LocalDateTime.now()) }
LaunchedEffect(Unit) {
while (true) {
time = LocalDateTime.now()
delay(1000)
}
}
Box(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF87CEEB)) // sky blue
) {
/* ☀️ Sun */
Text(
text = "☀️",
fontSize = 36.sp,
modifier = Modifier
.align(Alignment.TopEnd)
.padding(8.dp)
)
/* ☁️ Clouds */
Text(
text = "☁️",
fontSize = 30.sp,
modifier = Modifier
.align(Alignment.TopStart)
.padding(10.dp)
)
Text(
text = "☁️",
fontSize = 24.sp,
modifier = Modifier
.align(Alignment.TopCenter)
.padding(top = 20.dp)
)
/* 🐦 Birds */
Text(
text = "🐦",
fontSize = 24.sp,
modifier = Modifier
.align(Alignment.CenterStart)
.padding(start = 8.dp)
)
Text(
text = "🐦",
fontSize = 22.sp,
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 8.dp)
)
/* ⌚ Time & Date (CENTER) */
Column(
modifier = Modifier.align(Alignment.Center),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("By-codingbihar.com",
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
color = Color(0xFFFF9800)
)
Text(
text = time.format(DateTimeFormatter.ofPattern("hh:mm")),
fontSize = 38.sp,
fontWeight = FontWeight.Bold,
color = Color(0xFF0D47A1)
)
Text(
text = time.format(DateTimeFormatter.ofPattern("EEE, dd MMM")),
fontSize = 14.sp,
color = Color(0xFF1A237E)
)
}
/* 🌳 Tree */
Text(
text = "🌳",
fontSize = 40.sp,
modifier = Modifier
.align(Alignment.BottomStart)
.padding(6.dp)
)
/* 🌼 Flowers */
Row(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(bottom = 6.dp)
) {
Text("🌼", fontSize = 20.sp)
Text("🌼", fontSize = 20.sp)
Text("🌼", fontSize = 20.sp)
}
/* ⭐ Stars */
Text(
text = "⭐",
fontSize = 16.sp,
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(8.dp)
)
}
}Output:
Final Thoughts
Creating my first Android watch face using Jetpack Compose was one of the best learning experiences in my Android journey.
If you are a student, beginner, or Android developer, I strongly recommend trying this once. Even a simple watch face teaches:
- UI design
- State management
- Real‑world constraints
🚀 Start simple, learn fast, and improve step by step.
