Crear Circulos en el Canvas de Android

El canvas de Android nos permite crear imágenes apartir de formas, circulos, rectas, líneas, óvalos etc, en este articulo veremos como crear circulos en la vista de android.

Lo primero que vamos a hacer es abrir el Android Studio y crear un proyecto nuevo, despues nos vamos a dirigir a la carpeta de codigo java y vamos a crear una nueva clase.

Crear la Clase de Dibujo

La clase se le va a poner un nombre en mi caso, ViewRedDot esta clase va a extender la clase view y tendrá un formato de la siguiente manera.

public class ViewRedDot extends View {

    public ViewRedDot (Context context){
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas){
    // Codigo aqui
    }
}

En la seccion donde dice “Codigo aqui” vamos a insertar todo el codigo que queramos, este codigo se va a dibujar en el layout principal de nuestra aplicacion o en el layout que elijamos.

Ahora para crear un circulo vamos a usar el siguiente codigo facil.

        Paint circle = new Paint();
        circle.setColor(Color.RED); // color del circulo
        canvas.drawCircle(canvas.getWidth()/2, canvas.getHeight()/2, canvas.getWidth()/3, circle);
 // Dibujar el circulo

Los parametros para dibujar el circulo son: Posicion X, Posicion Y , Radio y Color/Paint.

canvas.getWidth()/2 obtiene la medida del canvas y lo divide entre 2 para posicionarse en medio del canvas posicion X.

canvas.getHeight()/2 obtiene la medida del canvas y lo divide entre 2 para posicionarse en medio del canvas posicion Y.

canvas.getWidth()/3 equivale a poner el radio del circulo en un tercio del ancho del canvas,

Paint/Color.RED es el color de dibujo del circulo, pueden ser diferentes algunos ejemplo: BLUE, RED, CYAN, WHITE, YELLOW, MAGENTA… tambien se pueden usar la funcion rgb, etc.

Asignar el Dibujo al Layout

Para asignar el dibijo que creamos y se muestre en la vista principal de la aplicacion vamos a hacer lo siguiente.

En nuestra MainActivity vamos a localizar la siguiente linea, que dirige la vista a un layout.xml

setContentView(R.layout.activity_main)

Y lo vamos a cambiar para que se muestre nuestra nueva vista.

En Kotlin

        setContentView( ViewRedDot(this));

En Java

        setContentView(new ViewRedDot(this));

Y Listo ahora ejecutamos y podemos ver el resultado.

Ahora ya puedes basarte en este código y crear dibujos, por ejemplo, posicionando diferentes circulos de colores para crear una imagen o hacer lo que mas te guste.