Como crear un Canvas en #Android Studio

Como Crear un Canvas en Android Studio, CableNaranja

¡Comparte nuestro contenido!

Para poder dibujar dentro de nuestras aplicaciones, necesitamos 4 componentes básicos: Un Bitmap que contenga los píxeles, un Canvas que será nuestro lienzo para dibujar, primitivas de dibujo con un conjunto mínimo de objetos básicos (círculos, rectángulos, texto, etc) y un objeto Paint que servirá para definir los colores y estilos a utilizar. Para quienes quieran crear videojuegos en Android sin usar Engines como Unity o UnReal, esto es importante.

En está ocasión, vamos a crear un Canvas básico, dibujar algunas primitivas y definir algunos estilos mínimos ¡Manos a la obra!

Creando nuestro proyecto con Canvas

  1. Comencemos creando un proyecto que llamaremos MiCanvasComo Crear Canvas Android Studio, Cablenaranja
  2. Seleccionamos nuestro SDK mínimo (Si nos equivocamos en este paso, se puede corregir más adelante)Como Crear Canvas Android Studio, CableNaranja
  3. Seleccionamos una Empty ActivityComo Crear Canvas Android Studio, CableNaranja
  4. Le llamaremos CanvasActivityComo Crear Canvas Android Studio, CableNaranja
  5. Gestionaremos el Canvas desde una clase separada. Necesitamos añadir un nuevo Java classComo Crear Canvas Android Studio, CableNaranja
  6. Le llamaremos elCanvas (El nombre puede ser al gusto) el superclass será android.view.View Como Crear Canvas Android Studio, CableNaranja
  7. Al crearse el archivo, obtendremos un posible error. sobre el nombre de la nuestra clase presionamos el botón secundario del ratón y elegimos Generate.Como Crear Canvas Android Studio, CableNaranja
  8. Lo que nos hace falta, es el constructor de clase, para nuestro propósito, la primera propuesta es la más adecuada, ya que únicamente necesitamos que el Canvas sea el ContentView de nuestra aplicación.Como Crear Canvas Android Studio, CableNaranja
  9. El método más importante para nuestro Canvas es onDraw, presionemos el botón secundario y elegimos Generate nuevamente.Como Crear Canvas Android Studio, CableNaranja
  10. Por supuesto, elegimos onDrawComo Crear Canvas Android Studio, CableNaranja

Usar el Canvas como ContentView

En el método onDraw que acabamos de crear, vamos a pintar nuestro Canvas de un color amarillo claro, lo haremos a través del método drawRGB, el cuál necesita los 3 colores en valores de 0 a 255, según la intensidad del color. Este lo colocaremos debajo de la llamada a super().

canvas.drawRGB(251,254,213);

Nuestra clase debe quedar así hasta el momento:

Como Crear Canvas Android Studio, CableNaranja

Como Crear Canvas Android Studio, CableNaranja

Nos pasamos a la clase CanvasActivity, es hora de reemplazar el ContentView, primero agregamos la instancia al objeto elCanvas

elCanvas miCanvas;

Luego dentro del médoto onCreate, lo instanciamos

miCanvas = new elCanvas(this);

Finalmente reemplazamos el ContentView con nuestro Canvas

setContentView(miCanvas);

Así nos debe quedar hasta el momento:

Como Crear Canvas Android Studio, CableNaranja

Como Crear Canvas Android Studio, CableNaranja

Probemos ahora la aplicación con el emulador, este debe ser el resultado obtenido:

Como Crear Canvas Android Studio, CableNaranja

Probando la aplicación en el emulador

Añadir primitivas y estilos

Por supuesto, no podíamos dejar un Canvas sin hacer al menos algunos dibujos. Vamos a insertar 2 objetos primitivos, un rectángulo con el objeto Rect y un círculo con el método drawCircle. Regresemos a la clase elCanvas, es hora de añadir:

Paint pintar = new Paint();

La clase Paint como mencionamos al principio, se encargará de los colores y los estilos.

Rect cuadrado = new Rect(100,100,300,300);

Dibujamos un rectángulo, los 4 valores significan: izquierda, arriba, derecha, abajo. Es importante notar que no instanciaremos los objetos en el método onDraw por ser de tipo protected. Es hora de pintar.

Elegimos el color blanco

pintar.setColor(Color.WHITE);

Dibujamos el rectángulo y le aplicamos el estilo que acabamos de elegir

canvas.drawRect(cuadrado, pintar);

Ahora, elegimos el borde del rectángulo (Paint.Style.STROKE)

pintar.setStyle(Paint.Style.STROKE);

Lo hacemos 5 veces más grueso

pintar.setStrokeWidth(5);

Lo pintamos de rojo

pintar.setColor(Color.RED);

Y lo aplicamos al rectángulo

canvas.drawRect(cuadrado, pintar);

Inmediatamente, elegimos el color de relleno (Paint.Style.FILL)

pintar.setStyle(Paint.Style.FILL);

Lo hacemos azul

pintar.setColor(Color.BLUE);

Y dibujamos un círculo con coordenadas en X: 500, Y: 300 y un radio de 100 y le asignamos el último estilo que creamos.

canvas.drawCircle(500,300,100,pintar);

Todo nuestro código debe quedar así:

Como Crear Canvas Android Studio, CableNaranja

Primitivas y estilos

Este es el resultado final:

Como Crear Canvas Android Studio, CableNaranja

Resultado final de nuestra aplicación

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

1 Respuesta

  1. noviembre 26, 2018

    […] como base lo que vimos en los artículos “Como crear un canvas en Android Studio” y “Como hacer fullscreen en Android Studio“, vamos a crear un proyecto donde […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares