Android Kotlin: How to draw text on a path in a Canvas

This code demonstrates how to draw text along a curved path on an Android Canvas using Kotlin. It achieves this by creating a bitmap, defining a path (a circle in this case), and then using the drawTextOnPath function to place text along that path.

Breakdown:

  1. Setting Up the Canvas:

    • The onCreate method of the MainActivity class inflates the layout (activity_main.xml) and retrieves the ImageView from it.
    • A new Bitmap with a specific size and configuration is created using Bitmap.createBitmap.
    • A Canvas is then obtained from the bitmap for drawing operations. The canvas background is set to a light blue color using drawColor.

  2. Defining the Path and Style:

    • A Paint object is created to define the style of the path. Anti-aliasing is enabled, the color is set to dark blue, stroke width is set to a thick value, and the paint style is set to stroke (to draw only the outline of the path).
    • A Path object is created and a circle is added to it using addCircle. The circle is centered within the canvas and its radius is calculated to fit within the canvas dimensions with some padding.
    • The defined path is then drawn onto the canvas using drawPath.

  3. Drawing Text on the Path:

    • A separate TextPaint object is created specifically for drawing text. Similar to the path paint, anti-aliasing is enabled, the color is set to white, and the text size is defined.
    • Finally, the drawTextOnPath function is called. This function takes the text to be drawn, the path it should follow, the starting position along the path, the vertical offset from the path, and the TextPaint object that defines the text style.

  4. Displaying the Result:

    • The function drawTextOnPath returns the created Bitmap containing the drawn path and text.
    • In the onCreate method, this bitmap is set as the image source for the ImageView retrieved earlier.

Summary:

This code provides a basic example of how to leverage the drawTextOnPath function in Kotlin to achieve creative text layouts by following a defined path on a Canvas. You can modify the code to experiment with different path shapes, text properties, and positioning to create unique visual effects in your Android applications.


MainActivity.kt 

package com.cfsuman.kotlintutorials

import android.app.Activity
import android.graphics.*
import android.os.Bundle
import android.text.TextPaint
import android.widget.ImageView
import kotlin.math.min


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(drawTextOnPath())
    }
}



// function to draw text on path on canvas
fun drawTextOnPath():Bitmap?{
    val bitmap = Bitmap.createBitmap(
        1400,
        900,
        Bitmap.Config.ARGB_8888
    )


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


    // paint to draw path
    val paint = Paint().apply {
        isAntiAlias = true
        color = Color.parseColor("#333399")
        strokeWidth = 125F
        style = Paint.Style.STROKE
    }


    // add circle to path
    val path = Path()
    path.addCircle(
        canvas.width/2F,
        canvas.height/2F,
        min(canvas.width,canvas.height)/2 - 100F,
        Path.Direction.CCW
    )


    // draw path on canvas
    canvas.drawPath(path, paint)


    // text paint to draw text on path
    val textPaint = TextPaint().apply {
        isAntiAlias = true
        color = Color.parseColor("#F0FFFF")
        textSize = 80F
    }


    // finally, draw text on path
    canvas.drawTextOnPath(
        "Android Development", // text to draw
        path, // path the text should follow for its baseline
        //  distance along the path to add
        //  to the text's starting position
        1250F,
        // distance above(-) or below(+) the
        // path to position the text
        30F,
        textPaint // 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