Draw Straight Line Between Two Points in Android

Last Updated : 06 Feb, 2022

In Android, ImageView is used to display images of different types of formats. However, ImageView can also be used to draw desired patterns using a canvas and paint. So in this article, we will show you how you could draw a line programmatically and display it in an ImageView in Android. Follow the below steps once the IDE is ready. So basically, we would be creating a line depending on the coordinate points. This process is mentioned in Step 3 where we work with MainActivity.kt.

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 and a Button as shown below.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="draw"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50sp"/>

</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.

Kotlin

package org.geeksforgeeks.drawlineiniv

import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and initializing 
        // the elements from the layout file
        val mImageView = findViewById<ImageView>(R.id.image_view_1)
        val mButton = findViewById<Button>(R.id.button_1)

        // Create a Bitmap of 500 x 700 size
        val mBitmap = Bitmap.createBitmap(500, 700, Bitmap.Config.ARGB_8888)
        
        // Create a canvas with gray background 
        // and set it in ImageView
        val mCanvas = Canvas(mBitmap)
        mCanvas.drawColor(Color.GRAY)
        mImageView.setImageBitmap(mBitmap)

        // On Button click
        mButton.setOnClickListener {
          
            // Paint is called, assume it as a paint bristle 
            // with green paint and 10 as thickness
            val mPaint = Paint()
            mPaint.color = Color.GREEN
            mPaint.style = Paint.Style.STROKE
            mPaint.strokeWidth = 10F
            mPaint.isAntiAlias = true

            // Declaring start and end 
            // coordinates on the canvas
            val mStartX = 0F
            val mStartY = 0F
            val mStopX = mCanvas.width.toFloat()
            val mStopY = mCanvas.height.toFloat()

            // Draw the line
            mCanvas.drawLine(mStartX, mStartY, mStopX, mStopY, mPaint)

            // Set this bitmap in the ImageView
            mImageView.setImageBitmap(mBitmap)
        }
    }
}