If we want to have text that is not horizontal, we must create a path indicating the points where the text will pass.

1 – We created a project called: Proyecto041

We delete the TextView that automatically adds the Android Studio and define the ConstraintLayout id with the value: layout1:

 

Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin -

Now we encode the class where the whole logic is:

package com.coding180.project041


import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.Path
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View


class MainActivity: AppCompatActivity () {

    override fun onCreate (savedInstanceState: Bundle?) {
        super.onCreate (savedInstanceState)
        setContentView (R.layout.activity_main)
// coding180.com
        val layout1 = findViewById (R.id.layout1) as android.support.constraint.ConstraintLayout
        val background = Canvass (this)
        layout1.addView (background)
    }

    class Canvass (context: Context): View (context) {

        override fun onDraw (canvas: Canvas) {
            canvas.drawRGB (0, 0, 255)
            val hieght = getHeight ()
            val path = Path ()
            path.moveTo (0f, (hieght / 2) .toFloat ())
            path.lineTo (40f, (hieght / 2 - 30) .toFloat ())
            path.lineTo (80f, (hieght / 2 - 60) .toFloat ())
            path.lineTo (120f, (hieght / 2 - 90) .toFloat ())
            path.lineTo (160f, (hieght / 2 - 120) .toFloat ())
            path.lineTo (220f, (hieght / 2 - 150) .toFloat ())
            path.lineTo (280f, (hieght / 2 - 180) .toFloat ())
            path.lineTo (340f, (hieght / 2 - 210) .toFloat ())
            val brush1 = Paint ()
            brush1.setARGB (255, 255, 0, 0)
            brush1.setTextSize (80f)
            canvas.drawTextOnPath ("Hello World", path, 0f, 0f, brush1)
        }
    }
}

We create an object of class Path and we indicate the first point of the way calling the method moveTo:

            Val path = Path ()
            Path.moveTo (0f, (high / 2) .toFloat ())

Then we indicate all the other points in a consecutive way by calling the lineTo method:

            Path.lineTo (40f, (high / 2 - 30) .toFloat ())
            Path.lineTo (80f, (high / 2 - 60) .toFloat ())
            Path.lineTo (120f, (high / 2 - 90) .toFloat ())
            Path.lineTo (160f, (high / 2 - 120) .toFloat ())
            Path.lineTo (220f, (high / 2 - 150) .toFloat ())
            Path.lineTo (280f, (high / 2 - 180) .toFloat ())
            Path.lineTo (340f, (high / 2 - 210) .toFloat ())

Then to graph the text we call the method drawTextOnPath and we pass in the second parameter the reference of the object of type Path:

            Canvas.drawTextOnPath ("Hello World", path, 0f, 0f, brush1)

The output of the program is:

 

Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin -

,,,,,,,,,,,,,,,,,,,,,,,

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!