Android Kotlin: Drawing multiple lines on Canvas

This code demonstrates how to draw multiple lines on a Canvas in an Android application written in Kotlin. It achieves this by creating a custom function called drawLines that generates a bitmap with lines drawn on it. The bitmap is then displayed on an ImageView within the activity.

Breakdown of the Code:

  1. Setting Up the Activity:

    • The MainActivity class extends Activity and overrides the onCreate method.
    • Inside onCreate, the layout (activity_main.xml) is inflated and the ImageView is referenced using findViewById.

  2. Drawing Function (drawLines):

    • This function creates a new Bitmap object with a specific width, height, and configuration (ARGB_8888).
    • A Canvas is created from the bitmap and used for drawing. The canvas background is set to a light blue color using drawColor.
    • A Paint object is configured to define the line properties: color (dark purple), stroke width (25 pixels), stroke style (stroke only), stroke cap (square ends), and stroke miter (controls how sharp corners join).
    • A list of Float values is created to store the starting and ending X,Y coordinates for each line. The function iterates through these points to define four lines forming a rectangle.
    • Finally, the drawLines method of the canvas is called, passing the list of points converted to a float array and the Paint object. This draws the lines onto the canvas.
    • The function returns the created bitmap.

  3. Displaying the Drawing:

    • In onCreate, the drawLines function is called and the returned bitmap is set as the image source for the ImageView using setImageBitmap.

Summary

This code provides a basic example of drawing lines on a canvas in Kotlin. You can modify the drawLines function to create different shapes and customize line properties based on your needs. Remember to update the list of points to reflect the desired line positions.


MainActivity.kt 

package com.cfsuman.kotlintutorials

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


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)


        // show drawing on image view
        imageView.setImageBitmap(drawLines())
    }
}



// function to draw lines on canvas
fun drawLines():Bitmap?{
    val bitmap = Bitmap.createBitmap(
        1500,
        850,
        Bitmap.Config.ARGB_8888
    )


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


    val paint = Paint().apply {
        color = Color.parseColor("#333399")
        strokeWidth = 25F
        style = Paint.Style.STROKE
        strokeCap = Paint.Cap.SQUARE
        strokeMiter = 20F
    }


    // list to hold lines xy positions
    val list = mutableListOf<Float>()


    // first line starting point x y
    list.add(50F) // x
    list.add(50F) // y

    // first line ending point x y
    list.add(canvas.width / 2F - 200)
    list.add(canvas.height / 2F)


    // second line starting x y
    list.add(canvas.width / 2F - 200)
    list.add(canvas.height / 2F)

    // second line ending point x y
    list.add(50F)
    list.add(canvas.height - 50F)


    // third line starting point x y
    list.add(canvas.width - 50F)
    list.add(50F)

    // third line ending point x y
    list.add(canvas.width / 2f + 200)
    list.add(canvas.height / 2F)


    // fourth line starting point x y
    list.add(canvas.width / 2f + 200)
    list.add(canvas.height / 2F)

    // fourth line ending point x y
    list.add(canvas.width - 50F)
    list.add(canvas.height - 50F)


    // finally, draw lines on canvas
    canvas.drawLines(
        list.toFloatArray(), 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" />

</androidx.constraintlayout.widget.ConstraintLayout>
More android kotlin tutorials