Lesson 39 – Touch event: draw a circle 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

A fundamental activity is to be able to detect when the user selects or touches the touch screen.

Issue:

Develop a program that draws a circle in the 100,100 coordinate. When another part of the touch screen is pressed, move the circle to that coordinate.

1 – We created a project called: Proyecto043

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

 

Lesson 39 - Touch event: draw a circle in kotlin - Lesson 39 - Touch event: draw a circle in kotlin - Lesson 39 - Touch event: draw a circle in kotlin -

Now we encode the class where all the logic is to capture the onTouch event:

package com.coding180.project043


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

class MainActivity : AppCompatActivity() {
    var corx = 0f
    var cory = 0f

    private lateinit var background: Canvass
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val layout1 = findViewById(R.id.layout1) as android.support.constraint.ConstraintLayout
        val background = Canvass(this)
        layout1.addView(background)
        background.setOnTouchListener { view, motionEvent ->
            corx = motionEvent.x
            cory = motionEvent.y
            background.invalidate()
            true
        }
    }
// coding180.com
    inner class Canvass(context: Context) : View(context) {

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(255, 255, 0)
            val paint = Paint()
            paint.setARGB(255, 255, 0, 0)
            paint.setStrokeWidth(4f)
            paint.setStyle(Paint.Style.STROKE)
            canvas.drawCircle(corx, cory, 20f, paint)
        }
    }
}

 

 

 

When we create the bottom object of the class Canvas we call the method setOnTouchListener and pass a lambda function that is executed each time the operator presses inside the component:

 background.setOnTouchListener { view, motionEvent ->
            corx = motionEvent.x
            cory = motionEvent.y
            background.invalidate()
            true
        }

We stored in the properties corx and cory the coordinate where the operator pressed with the finger, we asked that it repaint the component by calling invalidate and we returned true so that it continues listening to events if it moves the finger the operator.

The onDraw method of the Canvas class paints the background of yellow, creates an object of the class Paint and proceeds to draw a circle in the coordinates indicated by the attributes corx and cory:

 override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(255, 255, 0)
            val paint = Paint()
            paint.setARGB(255, 255, 0, 0)
            paint.setStrokeWidth(4f)
            paint.setStyle(Paint.Style.STROKE)
            canvas.drawCircle(corx, cory, 20f, paint)
        }

The Canvas class must be inner class to be able to access the corx and cory properties defined in the main class.

The preview of the application is:

Lesson 39 - Touch event: draw a circle in kotlin - Lesson 39 - Touch event: draw a circle in kotlin - Lesson 39 - Touch event: draw a circle in kotlin -

About The Author

Related posts

1 Comment

Leave a Reply