TUTORIAL API Y DIBUJO

ANDROID STUDIO

FREDY ALEXANDER NARVEZ LOSADA

UNIVERSIDAD SURCOLOMBIANA
TECNOLOGIA EN DESARROLLO DE SOFTWARE
FACULTAD DE INGENIERIAS
NEIVA-HUILA
2016

TUTORIAL API Y DIBUJO

ANDROID STUDIO

FREDY ALEXANDER NARVEZ LOSADA

CDIGO: 20141127480

PRESENTADO A: JUAN ANTONIO CASTRO SILVA

UNIVERSIDAD SURCOLOMBIANA
TECNOLOGIA EN DESARROLLO DE SOFTWARE
FACULTAD DE INGENIERIAS
NEIVA-HUILA
2016
CLASE API DE CANVAS

En la interfaz de Android studio podemos encontrar muchas clases, las cuales

estn destinadas a un propsito especfico la que utilizaremos en este proyecto
se llama Canvas.
Un Canvas no es ms que una superficie o lienzo en la cual se puede dibujar;
con ayuda de las primitivas que ofrece la API de Canvas en Android es posible
dibujar grficos como lneas, crculos, valos, cuadrados, rectngulos e incluso
textos, as como variar el color, trazado y tamao; en esta entrada daremos los
primeros pasos con la clase Canvas en Android.

1. ESTRUCTURA DEL PROYECTO

Para crear un nuevo proyecto ejecutaremos Android Studio accederemos
al men File / New project para crear el nuevo proyecto.
En la primera pantalla indicaremos, por este orden, el nombre de la
aplicacin, en este caso Dibujo.

En la siguiente pantalla del asistente configuraremos las plataformas y

APIs que va a utilizar nuestra aplicacin. Nosotros nos centraremos en
aplicaciones para telfonos y tablets, en cuyo caso tan slo tendremos
que seleccionar la API mnima (es decir, la versin mnima de Android)
que soportar la aplicacin.

En la siguiente pantalla del asistente elegiremos el tipo de actividad

principal de la aplicacin. Entenderemos por ahora que una actividad es
una ventana o pantalla de la aplicacin. Para empezar
seleccionaremos blank Activity, que es el tipo por defecto.

Por ltimo, en el siguiente paso del asistente indicaremos los datos

asociados a esta actividad principal que acabamos de elegir, indicando
el nombre de su clase java asociada (Activity Name) y el nombre de su
layout xml. No nos preocuparemos mucho por ahora de todos estos
datos por lo que podemos dejar todos los valores por defecto.

Una vez configurado todo pulsamos el botn Finish y Android Studio

crear por nosotros toda la estructura del proyecto y los elementos

indispensables que debe contener. Si todo va bien aparecer la pantalla

principal de Android Studio con el nuevo proyecto creado.

2. INICIAMOS EL DESARROLLO DE LA APLICACIN

Primero que todo nos ubicamos en el content_main.xml, y arrastramos
de la paleta un Large Text y dos Buttons.
El large text solo cambiaremos el text por (DIBUJO Y FIGURAS) el
id se deja por defecto solo es un aviso.
En el Primer Button cambiaremos el text por (DIBUJANDO) y en el
id lo llamaremos botonDibujar.
En segundo Button cambiaremos el text por (FIGURAS) y en el id
lo llamaremos botonFiguras.

Cada botn nos va a enlazar a una actividad para ello tenemos que crear
dos
Actividades
ms.
Siguiendo
estos
pasos.
res/layout/Clickderecho/New/Activity/Empty Activity.

Creamos la actividad con el nombre de Dibujo y nos crea un Dibujo.java,

la cual ser la actividad que se enlaza con el botn DIBUJA.

Y realizamos el mismo trabajo para crear el Figuras.java, y esta ser la

actividad que se enlaza con el botn FIGURAS.
Luego tendramos algo as en nuestras etiquetas.

Llegando a este paso ahora nos dirigimos al MainActivity.java para

proceder a enlazar los botones a cada una de las actividades que
actualmente creamos.
En el MainActivity.java vamos a darle valor a cada uno de los botones
haciendo referencia al nombre que le hemos puesto de esta manera:

Ahora vamos a enlazar los botones a cada Actividad para esto nos
vamos a ubicar abajo del setContentView(R.layout.activity_main);
y pondremos las siguientes lneas de cdigo:

El cual le da funcin al botonDibujo que creamos en los primeros pasos.

Ahora si le damos accin al botn con las siguientes lneas de cdigo:

Donde se enlazan el botn con la actividad que creamos que es

Dibujo.java, luego hacemos lo mismo con el otro botn y llegaramos a
algo asi:

Con esto terminamos el MainActivity.java, si nos conectamos con nuestro

telfono o emulador, algo as es lo que nos debera mostrar en la pgina
de inicio y presionando en cada botn.

El siguiente paso es crear la aplicacin que nos permita interactuar con

un lienzo que la clase de la API de Canvas nos proporciona, la cual nos
permite dibujar con nuestro dedo en la pantalla.
Nos dirigimos a la actividad Dibujo.java en donde vamos a crear el
aplicativo.
Primero que todo eliminamos toda esta lnea de cdigo que no
necesitamos.

Luego definimos una variable para crear una clase la cual se llamara
PintarView y le daremos un valor que deseen, luego creamos el public
class para la variable que acabamos de mencionar.

Ahora debajo del public class vamos definir algunas variables dos de
tipo float, una tipo String y definimos la clase path, el cual permite
definir un trazado a partir de segmentos de lnea y curvas.

Luego creamos un public con el siguiente cdigo:

Ahora creamos un protected void el cual le dara la accin al API del

Canvas.

Ahora vamos a dar color al lienzo o fondo del Canvas, dependiendo el

gusto cambiamos el color del fondo:

Ahora vamos a realizar las propiedades del objeto Paint, primero que
todo hay que crearlo y crearle un anti alias, apenas logremos esto vamos
a crear los estilos.

Ahora creamos el estilo del trazo que va hacer nuestro lpiz en el lienzo
del canvas.

Paint.Style.STROKE = Solo Bordes / Paint.Style.FILL = Bordes

con Relleno
Paint.setStrokeWidth(10)= Anchor del borde o en este caso
lnea del trazo
Paint.setColor= Color de la lnea.

Desarrollaremos la accin la cual da vida a la aplicacin dibujando con

nuestro dedo, esta accin se desarrolla con un condicional que se aferra
a los ejes del plano cartesiano X , Y. que son las variables float que
creamos al inicio.

Path.moveTo(x,y)= Inicia un punto en ciertas coordenadas.

Path.LineTo(x,y)= traza una lnea desde el ltimo punto del
move.
Canvas.drawPath= Dibuja nuestro objeto Path.

Ahora vamos con nuestro TouchEvent, donde vamos a definir algunas

variables y una de tipo entero.

Y comparamos nuestras acciones

Por ultimo copiamos las lneas de cdigo para el men, que a veces la
interfaz la da por defecto.

Con esto hemos terminado la aplicacin de dibujar, conectamos nuestro

telfono o emulador y al dar clic en el botn DIBUJAR de la pgina de
inicio de la aplicacin algo as es lo que vamos a observar:

Ya que esto funciono ahora vamos a aprender a hacer algunas figuras

geomtricas con la misma clase de Canvas, para ello vamos a abrir la
actividad que creamos de Figuras.java.

Como podemos ver utilizamos las mismas lneas de cdigo hasta donde
se puede apreciar en la captura, solo se cambi la variable que
definimos como FigurasView figuras, luego de esto viene lo nuevo.
Definimos dos variables enteras las cuales demuestran el ancho y el alto
del lienzo del Canvas.

Luego como en la anterior actividad vamos a realizar las propiedades del

objeto Paint. Donde cambiaremos el color del fondo por un amarillo.

Recordemos que FILL quiere decir que lo que vamos a dibujar va a tener
un relleno de color slido, as que todas las figuras que pintemos
quedaran slidas.
Ahora vamos a crear figuras y vamos a iniciar con dos crculos:

Paint.Style.FILL= Color relleno.

Paint.setColor= Color de relleno
Canvas.drawCircle(X,Y,Radius,Paint)= Dibuja un crculo
segn: La posicin (X=135 y Y=135) radio=(125) y Paint
especificados.

Ahora vamos a dibujar algunos cuadrados:

Canvas.drawRect(left, top, right, bottom, paint))= Dibuja un

rectngulo segn la posicin (posicin donde inicia en el eje X= 25
por la izquierda, posicin donde inicia en el eje Y=800 desde
arriba, posicin donde termina en el eje X=280 por la derecha,
posicin donde termina en el eje Y=1050 por abajo) y Paint
especificados.

Por ultimo dibujaremos un ovalo:

CanvasdrawOval = (Donde inicia en el eje X=25 desde la

derecha, donde inicia en el eje Y=400 desde arriba, donde termina
en el eje X=695 por la derecha, donde termina en el eje Y=650
por abajo, Paint paint).

Por ultimo terminamos con la opcin men como la anterior actividad.

Ahora solo corremos el cdigo y nos debe mostrar algo as cuando

demos clic en el botn FIGURAS del inicio de la aplicacin.

Luego de chequear
modificar los
Canvas agregando
deseemos, espero

que funcione, podemos

colores de cada opcin
botones o lo que
sea de gran ayuda.