Lesson 30 – Draw: graphing pixels 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

Issue:

Graph 10000 pixels in a random white color on the device screen with black background.

In order to do this simple task we must follow a series of steps:

1 – We created a project called: Proyecto033

We delete the TextView that automatically adds the Android Studio and proceed to define an id for the ConstraintLayout (we assign as id the value layout1):

Lesson 30 - Draw: graphing pixels in kotlin - Lesson 30 - Draw: graphing pixels in kotlin - Lesson 30 - Draw: graphing pixels in kotlin -

Now we encode the class in Kotlin where you find all the logic to turn on the pixels:

package com.coding180.project033



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 (){


    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,0)
            val ancho = getWidth()
            val alto = getHeight()
            val pincel1 = Paint()
            pincel1.setARGB(255, 255, 255, 255)
            for(x in 1..10000) {
                var alex = (Math.random() * ancho).toFloat()
                var aley = (Math.random() * alto).toFloat()
                canvas.drawPoint(alex, aley , pincel1)
            }
        }
    }
}

We must create a class that inherits from the View class (all visual controls in Android inherit from this class) and override the onDraw method. The onDraw method is executed when it has to be plotted. To access the primitive graphics there is a class called Canvas that encapsulates everything related to painting pixels, lines, rectangles etc .:

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(0,0,0)
            val ancho = getWidth()
            val alto = getHeight()
            val pincel1 = Paint()
            pincel1.setARGB(255, 255, 255, 255)
            for(x in 1..10000) {
                var alex = (Math.random() * ancho).toFloat()
                var aley = (Math.random() * alto).toFloat()
                canvas.drawPoint(alex, aley , pincel1)
            }
        }
    }

The first thing we do in the onDraw method is to paint the black background by calling the drawRGB method, then get the width and height in pixels of the view using the getWidth () and getHeight () methods. Next we create an object of class Paint. We call the setARGB method to define the color of the brush (the first parameter indicates the transparency value with 255 indicating that there is no transparency, then we indicate the amount of red, green and blue.

Finally, we must call the drawPoint method that draws the pixel in the column, row and brush that we passed as parameters.

Finally, in the method onCreate of the MainActivity, we obtain the reference of the ConstraintLayout that has the Activity. We create an object of class Canvas (called background) and add the background object to ConstraintLayout by calling the addView method:

    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 bottom = Canvas (this)
        layout1.addView (background)
    }

When we run the program we will see a series of pixels on the screen:

Lesson 30 - Draw: graphing pixels in kotlin - Lesson 30 - Draw: graphing pixels in kotlin - Lesson 30 - Draw: graphing pixels in kotlin -

………………..

 

About The Author

Related posts

Leave a Reply