{"id":3893,"date":"2025-06-01T11:21:30","date_gmt":"2025-06-01T11:21:30","guid":{"rendered":"https:\/\/alsaeeddev.com\/?p=3893"},"modified":"2025-06-01T11:21:30","modified_gmt":"2025-06-01T11:21:30","slug":"stunning-custom-analog-clock-in-android-java-kotlin","status":"publish","type":"post","link":"https:\/\/alsaeeddev.com\/shop\/stunning-custom-analog-clock-in-android-java-kotlin\/","title":{"rendered":"Stunning Custom Analog Clock in Android \u2013 Java & Kotlin"},"content":{"rendered":"

Want to design a custom analog clock in Android<\/strong>? In this post, you’ll learn how to create one using both Java and Kotlin. Whether you’re building a utility app, dashboard UI, or simply improving your UI skills, this is the perfect project to implement a working analog clock in Android.<\/p>\n

\ud83c\udfaf What\u2019s Inside This Project?<\/h3>\n

You\u2019ll get the complete source code for both languages, canvas-based drawing, second-by-second ticking hands, and a beautiful rounded design. Let\u2019s dive into development!<\/p>\n

\u2705 What You’ll Learn<\/h3>\n
    \n
  • How to draw a custom analog clock using Canvas<\/li>\n
  • Java and Kotlin implementations side by side<\/li>\n
  • Center dot, circular frame, and dynamic ticking hands<\/li>\n
  • Modern, responsive UI layout for all screen sizes<\/li>\n<\/ul>\n

    This article provides two versions: AnalogClockView.java<\/code> and AnalogClockViewKotlin.kt<\/code>. You can use either based on your language preference.<\/p>\n

    \ud83d\udcc4 XML Layout<\/h3>\n

    To use the custom clock in your activity, add this to your activity_main.xml<\/code>:<\/p>\n

    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <www.alsaeeddev.clock.AnalogClockView\r\n        android:id=\"@+id\/analogClock\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_centerInParent=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/code><\/pre>\n
    \ud83d\udce6 Java Code: AnalogClockView.java<\/h3>\n
     \r\npackage www.alsaeeddev.clock;\r\nimport android.content.Context;\r\nimport android.graphics.Canvas;\r\nimport android.graphics.Color;\r\nimport android.graphics.Paint;\r\nimport android.graphics.Rect;\r\nimport android.util.AttributeSet;\r\nimport android.view.View;\r\n\r\nimport java.util.Calendar;\r\n\r\npublic class AnalogClockView extends View {\r\n\r\n    private Paint paint;\r\n    private int width, height, radius;\r\n    private int padding = 0;\r\n    private int numeralSpacing = 30;\r\n    private int handTruncation, hourHandTruncation;\r\n    private final int[] numbers = {1,2,3,4,5,6,7,8,9,10,11,12};\r\n    private Rect textBounds = new Rect();\r\n\r\n    public AnalogClockView(Context context) {\r\n        super(context);\r\n        init();\r\n    }\r\n\r\n    public AnalogClockView(Context context, AttributeSet attrs) {\r\n        super(context, attrs);\r\n        init();\r\n    }\r\n\r\n    private void init() {\r\n        paint = new Paint();\r\n    }\r\n\r\n    @Override\r\n    protected void onDraw(Canvas canvas) {\r\n        width = getWidth();\r\n        height = getHeight();\r\n        int min = Math.min(width, height);\r\n        radius = min \/ 2 - 40;\r\n\r\n        canvas.drawColor(Color.parseColor(\"#928dab\")); \/\/ Background\r\n\r\n        \/\/ Draw clock background\r\n        paint.reset();\r\n        paint.setColor(Color.parseColor(\"#b3f6f8\"));\r\n        paint.setStyle(Paint.Style.FILL);\r\n        canvas.drawCircle((float) width \/2, (float) height \/2, radius + 30, paint);\r\n\r\n        paint.setStyle(Paint.Style.STROKE);\r\n        paint.setColor(Color.parseColor(\"#9e7419\"));\r\n        paint.setStrokeWidth(8f);\r\n        canvas.drawCircle((float) width \/2, (float) height \/2, radius + 30, paint);\r\n\r\n        \/\/ Draw center dot\r\n        paint.setStyle(Paint.Style.FILL);\r\n        paint.setColor(Color.BLACK);\r\n        canvas.drawCircle((float) width \/2, (float) height \/2, 12, paint);\r\n\r\n        \/\/ Draw clock numbers\r\n        paint.setTextSize(40);\r\n        paint.setColor(Color.BLACK);\r\n        for (int number : numbers) {\r\n            String tmp = String.valueOf(number);\r\n            paint.getTextBounds(tmp, 0, tmp.length(), textBounds);\r\n            double angle = Math.PI \/ 6 * (number - 3);\r\n            int x = (int)((double) width \/2 + Math.cos(angle) * (radius - numeralSpacing) - (double) textBounds.width() \/2);\r\n            int y = (int)((double) height \/2 + Math.sin(angle) * (radius - numeralSpacing) + (double) textBounds.height() \/2);\r\n            canvas.drawText(tmp, x, y, paint);\r\n        }\r\n\r\n        \/\/ Get time\r\n        Calendar calendar = Calendar.getInstance();\r\n        int hour = calendar.get(Calendar.HOUR);\r\n        int minute = calendar.get(Calendar.MINUTE);\r\n        int second = calendar.get(Calendar.SECOND);\r\n\r\n        drawHand(canvas, (hour + minute \/ 60.0) * 5f, true, false); \/\/ Hour hand\r\n        drawHand(canvas, minute, false, false);                     \/\/ Minute hand\r\n        drawHand(canvas, second, false, true);                      \/\/ Second hand\r\n\r\n        postInvalidateDelayed(1000);\r\n        invalidate();\r\n    }\r\n\r\n\r\n\r\n\/\/ draw the clock hands\r\n    private void drawHand(Canvas canvas, double loc, boolean isHour, boolean isSecond) {\r\n        double angle = Math.PI * loc \/ 30 - Math.PI \/ 2;\r\n        int handRadius = isHour ? radius - 120 : radius - 60;\r\n        if (isSecond) handRadius = radius - 40;\r\n\r\n        paint.setColor(isSecond ? Color.parseColor(\"#e74c3c\") : Color.BLACK);\r\n        paint.setStrokeWidth(isSecond ? 4f : isHour ? 8f : 6f);\r\n        canvas.drawLine((float) width \/2, (float) height \/2,\r\n                (float)((double) width \/2 + Math.cos(angle) * handRadius),\r\n                (float)((double) height \/2 + Math.sin(angle) * handRadius),\r\n                paint);\r\n    }\r\n}\r\n<\/code><\/pre>\n
    \ud83e\uddd1\u200d\ud83d\udcbb Kotlin Code: AnalogClockViewKotlin.kt<\/h3>\n
     \r\npackage www.alsaeeddev.clock\r\n\r\nimport android.content.Context\r\nimport android.graphics.Canvas\r\nimport android.graphics.Color\r\nimport android.graphics.Paint\r\nimport android.graphics.Rect\r\nimport android.util.AttributeSet\r\nimport android.view.View\r\nimport java.util.Calendar\r\nimport kotlin.math.cos\r\nimport kotlin.math.min\r\nimport kotlin.math.sin\r\n\r\nclass AnalogClockViewKotlin @JvmOverloads constructor(\r\n    context: Context, attrs: AttributeSet? = null\r\n) : View(context, attrs) {\r\n\r\n    private val paint = Paint()\r\n    private val numbers = (1..12).toList()\r\n    private val textBounds = Rect()\r\n    private var widthCenter = 0\r\n    private var heightCenter = 0\r\n    private var radius = 0\r\n\r\n    init {\r\n        paint.isAntiAlias = true\r\n    }\r\n\r\n    override fun onDraw(canvas: Canvas) {\r\n        super.onDraw(canvas)\r\n\r\n        widthCenter = width \/ 2\r\n        heightCenter = height \/ 2\r\n        radius = min(widthCenter, heightCenter) - 60\r\n\r\n        drawBackground(canvas)\r\n        drawCenterDot(canvas)\r\n        drawNumbers(canvas)\r\n        drawHands(canvas)\r\n\r\n        postInvalidateDelayed(1000)\r\n        invalidate()\r\n    }\r\n\r\n    private fun drawBackground(canvas: Canvas) {\r\n        paint.reset()\r\n        paint.isAntiAlias = true\r\n\r\n        \/\/ Clock circle fill\r\n        paint.color = Color.parseColor(\"#b3f6f8\")\r\n        paint.style = Paint.Style.FILL\r\n        canvas.drawCircle(widthCenter.toFloat(), heightCenter.toFloat(), radius + 30f, paint)\r\n\r\n        \/\/ Clock border\r\n        paint.style = Paint.Style.STROKE\r\n        paint.strokeWidth = 8f\r\n        paint.color = Color.parseColor(\"#9e7419\")\r\n        canvas.drawCircle(widthCenter.toFloat(), heightCenter.toFloat(), radius + 30f, paint)\r\n    }\r\n\r\n    private fun drawCenterDot(canvas: Canvas) {\r\n        paint.style = Paint.Style.FILL\r\n        paint.color = Color.BLACK\r\n        canvas.drawCircle(widthCenter.toFloat(), heightCenter.toFloat(), 12f, paint)\r\n    }\r\n\r\n    private fun drawNumbers(canvas: Canvas) {\r\n        paint.textSize = 40f\r\n        paint.color = Color.BLACK\r\n        for (number in numbers) {\r\n            val numStr = number.toString()\r\n            paint.getTextBounds(numStr, 0, numStr.length, textBounds)\r\n            val angle = Math.PI \/ 6 * (number - 3)\r\n            val x = (widthCenter + cos(angle) * (radius - 30) - textBounds.width() \/ 2).toFloat()\r\n            val y = (heightCenter + sin(angle) * (radius - 30) + textBounds.height() \/ 2).toFloat()\r\n            canvas.drawText(numStr, x, y, paint)\r\n        }\r\n    }\r\n\r\n    private fun drawHands(canvas: Canvas) {\r\n        val calendar = Calendar.getInstance()\r\n        val hour = calendar.get(Calendar.HOUR)\r\n        val minute = calendar.get(Calendar.MINUTE)\r\n        val second = calendar.get(Calendar.SECOND)\r\n\r\n        drawHand(canvas, (hour + minute \/ 60f) * 5, isHour = true, isSecond = false)\r\n        drawHand(canvas, minute.toFloat(), isHour = false, isSecond = false)\r\n        drawHand(canvas, second.toFloat(), isHour = false, isSecond = true)\r\n    }\r\n\r\n    private fun drawHand(canvas: Canvas, loc: Float, isHour: Boolean, isSecond: Boolean) {\r\n        val angle = Math.PI * loc \/ 30 - Math.PI \/ 2\r\n        val handLength = when {\r\n            isHour -> radius - 120\r\n            isSecond -> radius - 30\r\n            else -> radius - 60\r\n        }\r\n\r\n        paint.color = if (isSecond) Color.parseColor(\"#e74c3c\") else Color.BLACK\r\n        paint.strokeWidth = when {\r\n            isHour -> 8f\r\n            isSecond -> 4f\r\n            else -> 6f\r\n        }\r\n        paint.style = Paint.Style.STROKE\r\n\r\n        canvas.drawLine(\r\n            widthCenter.toFloat(), heightCenter.toFloat(),\r\n            (widthCenter + cos(angle) * handLength).toFloat(),\r\n            (heightCenter + sin(angle) * handLength).toFloat(),\r\n            paint\r\n        )\r\n    }\r\n}\r\n\r\n<\/code><\/pre>\n
    \n