Lesson 31 – Draw: draw background and draw lines 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

Paint the yellow background and draw a series of lines with different styles.

1 – We created a project called: Project034

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

 

Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin -

Now we encode the class where you find all the logic to paint the background and draw the lines:

package com.coding180.project034


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() {
// coding180.com
    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 canvass = Canvass(this)
        layout1.addView(canvass)
    }

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

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(255, 255, 0)
            val width = getWidth()
            val paint = Paint()
            paint.setARGB(255, 255, 0, 0)
            canvas.drawLine(0f, 30f, width.toFloat(), 30f, paint)
            paint.setStrokeWidth(4f)
            canvas.drawLine(0f, 60f, width.toFloat(), 60f, paint)
        }
    }
}

Let’s see the onDraw method where we paint the background of the component by calling the drawRGB method where we indicate the amount of red, green to blue:

        Override fun onDraw (canvas: Canvas) {
            Canvas.drawRGB (255, 255, 0)

We create an object of the class Paint and we define the color red (remember that the first parameter indicates the value of the transparency, if it is worth 255 it is totally opaque, with a smaller value the stroke of the line will have transparency)
The method to graph a line Is called drawLine and has as parameters the starting point column and row and the third and fourth parameter indicates the column and row end point of the line (in this example a horizontal line will be drawn in row 30 and will have a matching width With the width of the component), the last parameter is the object of the class Paint that indicates the color of the line:

            Val pincel1 = Paint ()
            Pincel1.setARGB (255, 255, 0, 0)
            Canvas.drawLine (0f, 30f, width.toFloat (), 30f, brush1)

The next line we draw in row 60 but before we change the thickness of the brush by calling the setTrokeWidth method indicating that 4 pixels will be the thickness:

            Pincel1.setStrokeWidth (4f)
            Canvas.drawLine (0f, 60f, width.toFloat (), 60f, brush1)

The preview on the device will be:

 

Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin -

…..

Proposed problem

  1. Make an application that shows a sheet on the screen similar to this:
    Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin - Lesson 31 - Draw: draw background and draw lines in Kotlin -

………..35

About The Author

Related posts

Leave a Reply