Lesson 37 – Draw: text on a path in kotlin

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

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 -

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

About The Author

Related posts

Leave a Reply