App Inventor: pintar

Vamos a hacer una aplicación para dibujar en el móvil. Paso a paso, la haremos así:

1. Lienzo para dibujar

Primeramente añadiremos un lienzo (canvas) en el diseño. Le daremos las dimensiones (la anchura que rellene el contenedor, y la altura, por ejemplo, 300 píxeles). Este lienzo lo programaremos para que dibuje un punto al tocarlo, y una línea al arrastrar el dedo sobre él:

2. Definir el grosor de línea

2.1. Componentes

Seguidamente vamos a hacer posible que el usuario elija el grosor de línea con el que quiere dibujar. Para ello utilizaremos el componente deslizador (slider). Desplazándolo a derecha o izquierda modificaremos el grosor de línea.

En el cuadro de propiedades del deslizador pondremos que el valor mínimo será 1 (un grosor de línea de 1 píxel), y el máximo el que deseemos. Yo he puesto 20. Diré que por defecto el deslizador aparezca en la posición 1 (V. recuadro rojo de la imagen). Asimismo será necesario indicar el ancho del deslizador (por ejemplo, 200 píxeles):

Junto al deslizador insertaré una etiqueta en la que aparezca el grosor de línea (en píxeles). A la etiqueta le cambio el nombre por grosor, y hago que inicialmente aparezca un 1 (V. imagen anterior).

2.2. Programación

Ahora voy a declarar una nueva variable (a la que llamo grosor), y la inicio a 1. Posteriormente programo el deslizador. Digo que cuando cambie su posición, cambie el valor de la variable, y que éste aparezca en la etiqueta. El valor indicado por el deslizador tiene dos decimales. Si queremos que en la etiqueta aparezca sin decimales, lo redondeamos:

Por último, tengo que cambiar los bloques programados en el paso 1, de manera que tanto los puntos como las líneas los dibuje con el grosor indicado por esta variable:

3. Borrar

Voy ahora a añadir un botón para borrar lo dibujado. La programación del botón quedaría así:

4. Elegir un color

4.1. Componentes

Para elegir colores voy a añadir estos componentes:

• Un botón para seleccionar el color, al que he renombrado y he llamado colores.


• Una disposición horizontal, que tendrá un ancho para rellenar el contenedor, y cuyo contenido estará centrado


• Un lienzo dentro de esta disposición, en el que colocaré una imagen de fondo de un selector de color, por ejemplo, la de este enlace.


• Una etiqueta, sin ningún texto, y cuyo color de fondo será el color elegido. Esto me permitirá saber qué color he elegido. A esta etiqueta la cambio el nombre llamándola color elegido.

La disposición horizontal será, por defecto, no visible, por lo que tendré que desactivar la casilla marcada en la imagen anterior (este lienzo se ha puesto en una disposición horizontal para que no toque los bordes de la pantalla, ya que es muy difícil seleccionar los colores ahí).

4.2. Programación

Primero programaremos el botón de elegir colores. Al hacer clic sobre él deberá:

• Si es visible el lienzo donde pinto, deberá hacerlo invisible, hacer visible la disposición horizontal donde está el lienzo para elegir los colores, y cambiar el texto del propio botón a "volver a pintar"


• Si no (es visible el lienzo de elegir color), al apretar el botón tengo que hacer invisible la disposición horizontal, hacer visible de nuevo el lienzo de pintar, y cambiar el texto del botón a "elegir color"

Luego programaré el lienzo de elegir color, de manera que al pasar el dedo sobre él cogerá el color de fondo que esté tocando, y hará que sea el color con el que pinte el lienzo de pintar. Además, este color aparecerá como color de fondo en la etiqueta color elegido:

5. Pintar sobre una fotografía

Vamos a hacer ahora que la aplicación pueda tomar una fotografía para pintar sobre ella, para lo que tendré que añadir dos componentes:

• Un botón para activar la cámara


• Una cámara

La programación es sencilla. Al apretar el botón se llamará a la cámara para que tome una fotografía. Y cuando la cámara haya tomado la fotografía, se pondrá como imagen de fondo del lienzo de pintar: