Dibuja una línea recta entre dos puntos en Android

En Android, ImageView se usa para mostrar imágenes de diferentes tipos de formatos. Sin embargo, ImageView también se puede usar para dibujar patrones deseados usando un lienzo y pintura. Entonces, en este artículo, le mostraremos cómo puede dibujar una línea mediante programación y mostrarla en un ImageView en Android. Siga los pasos a continuación una vez que el IDE esté listo. Básicamente, estaríamos creando una línea dependiendo de los puntos de coordenadas. Este proceso se menciona en el Paso 3 donde trabajamos con MainActivity.kt.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un ImageView y un botón como se muestra a continuación.

<?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>

Paso 3: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

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)
        }
    }
}

Producción:

Puede ver que la línea se crea entre las coordenadas mencionadas.