How to build Analog Clock in Jetpack Compose

An analog clock is a clock displaying time using hands ( hour, minute, second) that rotating around a dial marked with numbers.

Learn how to crate a BMI App using Jetpack Compose

What do we need?

To build an analog clock in Jetpack Compose, you'll need to work with Canvas, Animation, and State Management. Here's a breakdown of what you need:

Key Components

Canvas - To draw the clock face, hour, minute, and second hands.
State Management - To update the clock hands every second.
Animation/Coroutine - To smoothly update the clock hands.
Math (Trigonometry) - To position clock hands correctly based on time.

Step-by-Step Implementation

Get the Current Time
Update time every second using a coroutine (LaunchedEffect with delay(1000)).
Draw the Clock Face
Use Canvas with drawCircle for the outer clock.
Draw hour markers using drawLine.
Draw Clock Hands
Convert hours, minutes, and seconds to angles
Use animateFloatAsState for smoother transitions.

Do you want to build a beautiful digital clock using Jetpack Compose?

How to build Analog Clock in Jetpack Compose

We can build an analog clock in jetpack compose using canvas that displays real time with hour., minute and second hands. As a beginner you will learn the basics of canvas functions through this project.

What You Will Learn:

✔ Using Canvas API to draw a clock face in Jetpack Compose

✔ Implementing real-time updates using LaunchedEffect

✔ Drawing clock hands dynamically based on system time

✔ Customizing tick marks and hour labels

✔ Enhancing aesthetics with colors and stroke variations

1. Setting Up the Jetpack Compose Project

Before we begin, ensure that your project is configured for Jetpack Compose. If you haven't set up Jetpack Compose, update your build.gradle:

implementation ("androidx.compose.ui:ui:1.7.7")
implementation ("androidx.compose.material3:material3:1.3.1")
implementation ("androidx.lifecycle:lifecycle-runtime-compose:2.8.7")

2. Building the Analog Clock

Step 1: Fetching Current Time

The clock should update every second. We use LaunchedEffect to update state.

@Composable
fun AnalogClockWithDigitalTime(modifier: Modifier = Modifier) {
    val currentTime = remember { mutableStateOf(Calendar.getInstance()) }

    // Update the clock every second
    LaunchedEffect(Unit) {
        while (true) {
            currentTime.value = Calendar.getInstance()
            delay(1000) // Update every second
        }
    }

This function ensures that the clock is updated once per second.

Step 2: Drawing the Clock Face

We use Canvas to draw the background circle, hour markers, and minute ticks.


@Composable
fun AnalogClockWithDigitalTime(modifier: Modifier = Modifier) {
    // Extract hour, minute, and second
    val time = rememberCurrentTime()
    val hours = time.get(Calendar.HOUR)
    val minutes = time.get(Calendar.MINUTE)
    val seconds = time.get(Calendar.SECOND)

    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .size(300.dp)
            .background(Color.Black, CircleShape)
    ) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            val center = Offset(size.width / 2, size.height / 2)
            val radius = size.minDimension / 2.2f

            // Draw clock face
            drawCircle(color = Color.White, radius = radius, center = center)

            // Draw minute ticks (small lines for every minute)
            for (i in 0 until 60) {
                val angle = Math.toRadians(i * 6.0).toFloat()
                val startLength = if (i % 5 == 0) 0.8f else 0.9f // Longer for hour markers
                val start = center + Offset(radius * startLength * cos(angle), radius * startLength * sin(angle))
                val end = center + Offset(radius * cos(angle), radius * sin(angle))
                drawLine(
                    color = Color.Black,
                    start = start,
                    end = end,
                    strokeWidth = if (i % 5 == 0) 4f else 2f
                )
            }

Minute ticks are drawn every 6°.
Hour markers (thicker) appear at 12 positions (every 30°).
Circle background is drawn using drawCircle.

Step 3: Adding Hour Numbers

// Draw hour numbers (1-12)
val textPaint = android.graphics.Paint().apply {
    color = android.graphics.Color.BLACK
    textSize = size.width / 12
    textAlign = android.graphics.Paint.Align.CENTER
    typeface = android.graphics.Typeface.DEFAULT_BOLD
}
for (i in 1..12) {
    val angle = Math.toRadians(i * 30.0 - 90).toFloat()
    val textOffset = center + Offset(radius * 0.72f * cos(angle), radius * 0.72f * sin(angle))
    drawContext.canvas.nativeCanvas.drawText(
        i.toString(),
        textOffset.x,
        textOffset.y + (textPaint.textSize / 3), // Adjust baseline
        textPaint
    )
}

Now, let's display numbers (1-12) for the hours.

Step 4: Drawing the Clock Hands

// Function to draw clock hands
fun drawHand(angle: Float, length: Float, strokeWidth: Float, color: Color) {
    val radians = Math.toRadians(angle.toDouble()).toFloat()
    val end = center + Offset(length * cos(radians), length * sin(radians))
    drawLine(
        color = color,
        start = center,
        end = end,
        strokeWidth = strokeWidth,
        cap = StrokeCap.Round
    )
}

Animating the Hands

// Calculate angles
val hourAngle = (hours % 12 + minutes / 60f) * 30 - 90
val minuteAngle = (minutes + seconds / 60f) * 6 - 90
val secondAngle = (seconds * 6) - 90

// Draw clock hands
drawHand(hourAngle, radius * 0.5f, 8f, Color.Black)
drawHand(minuteAngle, radius * 0.7f, 6f, Color.DarkGray)
drawHand(secondAngle.toFloat(), radius * 0.9f, 2f, Color.Red)

// Draw center circle
drawCircle(color = Color.Black, radius = 6f, center = center)

hourAngle: Adjusts based on hour + minute fraction.
minuteAngle: Adjusts based on minute + second fraction.
secondAngle: Moves instantly every second.
Uses trigonometry (cos, sin) for precise placement.

Final Result 🎯

✅ Smooth real-time updates 📆

✅ Aesthetic hour numbers and tick marks 🎨

✅ Clean and readable clock hands ⏳

Analog Clock in Jetpack Compose Final Result

How to build Digital Clock in Jetpack Compose?

Full Code

package com.codingbihar.jetpackcomposeskill

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import java.util.Calendar
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.graphics.nativeCanvas
import kotlin.math.cos
import kotlin.math.sin

@Composable
fun MyApp() {
    Box(Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center){
        AnalogClockWithDigitalTime()
    }
}


@Composable
fun rememberCurrentTime(): Calendar {
    val currentTime = remember { mutableStateOf(Calendar.getInstance()) }

    LaunchedEffect(Unit) {
        while (true) {
            currentTime.value = Calendar.getInstance()
            delay(1000) // Update every second
        }
    }
    return currentTime.value
}

@Composable
fun AnalogClockWithDigitalTime(modifier: Modifier = Modifier) {
    // Extract hour, minute, and second
    val time = rememberCurrentTime()
    val hours = time.get(Calendar.HOUR)
    val minutes = time.get(Calendar.MINUTE)
    val seconds = time.get(Calendar.SECOND)

    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .size(300.dp)
            .background(Color.Black, CircleShape)
    ) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            val center = Offset(size.width / 2, size.height / 2)
            val radius = size.minDimension / 2.2f

            // Draw clock face
            drawCircle(color = Color.White, radius = radius, center = center)

            // Draw minute ticks (small lines for every minute)
            for (i in 0 until 60) {
                val angle = Math.toRadians(i * 6.0).toFloat()
                val startLength = if (i % 5 == 0) 0.8f else 0.9f // Longer for hour markers
                val start = center + Offset(radius * startLength * cos(angle), radius * startLength * sin(angle))
                val end = center + Offset(radius * cos(angle), radius * sin(angle))
                drawLine(
                    color = Color.Black,
                    start = start,
                    end = end,
                    strokeWidth = if (i % 5 == 0) 4f else 2f
                )
            }

            // Draw hour numbers (1-12)
            val textPaint = android.graphics.Paint().apply {
                color = android.graphics.Color.BLACK
                textSize = size.width / 12
                textAlign = android.graphics.Paint.Align.CENTER
                typeface = android.graphics.Typeface.DEFAULT_BOLD
            }
            for (i in 1..12) {
                val angle = Math.toRadians(i * 30.0 - 90).toFloat()
                val textOffset = center + Offset(radius * 0.72f * cos(angle), radius * 0.72f * sin(angle))
                drawContext.canvas.nativeCanvas.drawText(
                    i.toString(),
                    textOffset.x,
                    textOffset.y + (textPaint.textSize / 3), // Adjust baseline
                    textPaint
                )
            }

            // Function to draw clock hands
            fun drawHand(angle: Float, length: Float, strokeWidth: Float, color: Color) {
                val radians = Math.toRadians(angle.toDouble()).toFloat()
                val end = center + Offset(length * cos(radians), length * sin(radians))
                drawLine(
                    color = color,
                    start = center,
                    end = end,
                    strokeWidth = strokeWidth,
                    cap = StrokeCap.Round
                )
            }

            // Calculate angles
            val hourAngle = (hours % 12 + minutes / 60f) * 30 - 90
            val minuteAngle = (minutes + seconds / 60f) * 6 - 90
            val secondAngle = (seconds * 6) - 90

            // Draw clock hands
            drawHand(hourAngle, radius * 0.5f, 8f, Color.Black)
            drawHand(minuteAngle, radius * 0.7f, 6f, Color.DarkGray)
            drawHand(secondAngle.toFloat(), radius * 0.9f, 2f, Color.Red)

            // Draw center circle
            drawCircle(color = Color.Black, radius = 6f, center = center)
        }
    }
}

Trending

Static Online Shopping App in Jetpack Compose

How to Create a Table in Jetpack Compose

Collapsing Toolbar in Jetpack Compose

How to build Analog Clock in Jetpack Compose

Text Clock in Android using Jetpack Compose

How to build Analog Clock in Jetpack Compose

Learn how to crate a BMI App using Jetpack Compose

What do we need?

Key Components

Step-by-Step Implementation

Do you want to build a beautiful digital clock using Jetpack Compose?

How to build Analog Clock in Jetpack Compose

What You Will Learn:

1. Setting Up the Jetpack Compose Project

2. Building the Analog Clock

Step 1: Fetching Current Time

Step 2: Drawing the Clock Face

Step 3: Adding Hour Numbers

Step 4: Drawing the Clock Hands

Animating the Hands

Final Result 🎯

How to build Digital Clock in Jetpack Compose?

Full Code

Contact Form