In Android, Canvas is a class that performs drawings in two-dimension space (X and Y on the screen) on a Bitmap. This Bitmap can then be displayed using an ImageView. In this article, we will show you how you could draw lines using canvas, store them on Bitmap and display it in an ImageView in Android. Follow the below steps once the IDE is ready.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add an ImageView as shown below.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< ImageView
android:id = "@+id/image_view_1"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:ignore = "ContentDescription"
android:background = "@color/black" />
</ RelativeLayout >
|
Step 3: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
package org.geeksforgeeks.drawlines
import android.annotation.SuppressLint
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MotionEvent
import android.view.View
import android.widget.ImageView
import androidx.annotation.RequiresApi
class MainActivity : AppCompatActivity(), View.OnTouchListener {
// Declaring ImageView, Bitmap, Canvas, Paint,
// Down Coordinates and Up Coordinates
private lateinit var mImageView: ImageView
private lateinit var bitmap: Bitmap
private lateinit var canvas: Canvas
private lateinit var paint: Paint
private var downX = 0f
private var downY = 0f
private var upX = 0f
private var upY = 0f
@RequiresApi (Build.VERSION_CODES.R)
@SuppressLint ( "ClickableViewAccessibility" )
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initializing the ImageView
mImageView = findViewById(R.id.image_view_1)
// Getting the current window dimensions
val currentDisplay = windowManager.currentWindowMetrics
val dw = currentDisplay.bounds.width()
val dh = currentDisplay.bounds.height()
// Creating a bitmap with fetched dimensions
bitmap = Bitmap.createBitmap(dw, dh, Bitmap.Config.ARGB_8888)
// Storing the canvas on the bitmap
canvas = Canvas(bitmap)
// Initializing Paint to determine
// stoke attributes like color and size
paint = Paint()
paint.color = Color.RED
paint.strokeWidth = 10F
// Setting the bitmap on ImageView
mImageView.setImageBitmap(bitmap)
// Setting onTouchListener on the ImageView
mImageView.setOnTouchListener( this )
}
// When Touch is detected on the ImageView,
// Initial and final coordinates are recorded
// and a line is drawn between them.
// ImagView is updated
@SuppressLint ( "ClickableViewAccessibility" )
override fun onTouch(v: View?, event: MotionEvent?): Boolean {
when (event!!.action) {
MotionEvent.ACTION_DOWN -> {
downX = event.x
downY = event.y
}
MotionEvent.ACTION_UP -> {
upX = event.x
upY = event.y
canvas.drawLine(downX, downY, upX, upY, paint)
mImageView.invalidate()
}
}
return true
}
} |
Output:
You can see that we are able to draw lines on the screen.