android kotlin - Canvas draw dotted line

MainActivity.kt


package com.cfsuman.kotlintutorials

import android.app.Activity
import android.graphics.*
import android.os.Bundle
import android.widget.ImageView
import android.widget.SeekBar


class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // get the widgets reference from XML layout
        val imageView = findViewById<ImageView>(R.id.imageView)
        val seekBar = findViewById<SeekBar>(R.id.seekBar)


        // show initial drawing on image view
        imageView.setImageBitmap(
            drawDottedLine(seekBar.progress + 10F)
        )


        // update drawing on seek bar change
        seekBar.setOnSeekBarChangeListener(object :
            SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(
                seekBar: SeekBar?, progress: Int, fromUser: Boolean) {

                val bitmap = drawDottedLine(progress + 10F)
                imageView.setImageBitmap(bitmap)
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
            }
        })
    }
}



// function to draw dotted line on canvas
fun drawDottedLine(
    dotWidth : Float = 25F
):Bitmap?{
    val bitmap = Bitmap.createBitmap(
        1500,
        850,
        Bitmap.Config.ARGB_8888
    )


    // canvas for drawing
    val canvas = Canvas(bitmap).apply {
        drawColor(Color.parseColor("#A2A2D0"))
    }


    // paint to draw dotted line
    val paint = Paint().apply {
        isAntiAlias = true
        color = Color.parseColor("#333399")

        strokeWidth = dotWidth
        style = Paint.Style.STROKE
        strokeCap = Paint.Cap.ROUND

        pathEffect = DashPathEffect(
            // try to make nearly rounded shape / dot
            floatArrayOf
                (dotWidth / 12,
                dotWidth * 2
            ),
            0F // phase
        )
    }


    // draw a line path
    val path = Path().apply {
        // move to line starting point
        moveTo(100F,canvas.height / 2F)

        // draw line
        // add a quadratic bezier
        quadTo(
            100F, // x1
            canvas.height / 2F, // y1
            canvas.width - 100F, // x2
            canvas.height / 2F // y2
        )
    }


    // finally, draw the path (dotted line) on canvas
    canvas.drawPath(path, paint)

    return bitmap
}

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DCDCDC"
    android:padding="24dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="200"
        android:progress="20"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>