Uso de varias pantallas y 

pantalla Splash 

 

  2 Uso de varias pantallas y pantalla Splash

Índice 

1.  USO DE VARIAS PANTALLAS.............................................................................................................................. 3 

2.  CREACIÓN DE PANTALLA DE INICIO O DE SPLASH ............................................................................................ 10 

 

 

  3 Uso de varias pantallas y pantalla Splash

1. Uso de varias pantallas  

Vamos a explicar  como  se  crean aplicaciones  con múltiples pantallas en Android.  La mayor parte de  las 

aplicaciones en Android se componen de varias pantallas, por esa razón vamos a ver cual es el proceso a 

seguir en AppInventor. 

Para ello, vamos a crear un proyecto nuevo, al que llamaremos por ejemplo, “pantallas”. 

Como vimos en el reto anterior, en el menú principal de AppInventor, justo encima de viewer tenemos un 

botón  llamado  “AddScreen”  y  junto  a  éste,  otro  llamado  “RemoveScreen”.  Estos  dos  botones  son  los 

necesarios para crear y eliminar pantallas en AppInventor. 

Vamos a crear una pantalla nueva, para ello, pulsamos el botón “AddScreen”, introducimos el nombre que 

queramos y pulsamos el botón ok. Como podemos ver, en viewer, tenemos una nueva pestaña con el 

nombre que introdujimos previamente. 

 

 

  4 Uso de varias pantallas y pantalla Splash

Cada pantalla es totalmente independiente de la anterior, desde la Web para crear la interfaz hasta el 

Editor de Bloques. Para comprobarlo, vamos a poner un botón en la primera pantalla... para ello, pulsamos 

la pestaña Screen1 y arrastramos un botón de la paleta a la primera pantalla. 

 

 

Si pulsamos la pestaña Screen2, podemos comprobar tanto el viewer como la sección “components” está 

vacía, ya que el botón lo hemos añadido a la pantalla Screen1 y no a la pantalla Screen2. 

 

 

 

 

 

  5 Uso de varias pantallas y pantalla Splash

 

Con la pestaña Screen1 seleccionada abrimos el Editor de Bloques, y vemos, que al pulsar la pestaña “My 

Blocks” el Editor de Bloques muestra el componente del botón que hemos añadido. 

 

 

  6 Uso de varias pantallas y pantalla Splash

Ahora volvemos a la web de AppInventor y pulsamos la pestaña Screen2, regresamos al Editor de Bloques y 

al pulsar la pestaña “My Blocks”, vemos que el Editor de Bloques está vacío. 

 

 

Con esto, puedes comprobar que tanto la interfaz, como los bloques del Editor de Bloques, son totalmente 

independientes, dependen de cada pantalla. 

Ahora vas a abrir el emulador y a conectarlo con AppInventor como hemos hecho en el reto anterior... Una 

vez arrancado, tienes la aplicación lanzada en el emulador, y puedes ver la pantalla Screen1 en él. 

 

 

  7 Uso de varias pantallas y pantalla Splash

Si en la web de AppInventor seleccionas la pestaña Screen2, comprobarás que el emulador se comporta de 

la misma forma que el Editor de Bloques, cambiando la pantalla que se muestra en él a Screen2. 

 

 

La navegación entre ventanas se hace igual que en el reto anterior. 

Previamente has añadido un botón a la pantalla Screen1. Ahora harás que al pulsar ese botón, la pantalla 

del emulador cambie de Screen1 a Screen2. Para conseguirlo selecciona en el Editor de Bloque el botón y 

arrastra el bloque when Button1.Click do. 

 

 

  8 Uso de varias pantallas y pantalla Splash

A continuación rellena el hueco con el bloque adecuado. En este caso, es alguno que permita abrir nuevas 

ventanas. Dirígete a la pestaña Built‐In y pulsa Control. Podrás localizar el siguiente bloque open 

anotherscreen(abrir otra pantalla), éste es el que debes arrastrar. 

Como puedes apreciar, a este bloque, hay que añadirle otro bloque más que contenga el nombre de la 

pantalla que queremos abrir. Para conseguirlo, pulsa Text, y arrastra el bloque llamado “text”.  

 

Por último, cambia el nombre “text” por el nombre de la pantalla que quieres abrir, en este caso “Screen2”. 

Con esto ya está terminada toda la lógica necesaria para hacer que la aplicación pase de la primera pantalla 

a la segunda. 

Para probar que su funcionamiento, dirígete a la Web de AppInventor, (asegurate de tener seleccionada la 

pantalla Screen1) y pulsa el botón del emulador. 

Como ves en el emulador, aparece un mensaje informando de que el cambio entre pantallas no está 

permitido actualmente en AppInventor. Para poder probar que funciona, debes instalar la aplicación en un 

teléfono real y probarlo mediante el método que elijas de los explicados en el Reto2. De todas formas te lo 

mostramos en el vídeo. 

 

 

  9 Uso de varias pantallas y pantalla Splash

 

 

  10 Uso de varias pantallas y pantalla Splash

2. Creación de pantalla de inicio o de Splash

La mayoría de las aplicaciones que utilizamos en móviles, cuando las abrimos, nos muestran una pantalla 

de bienvenida, de carga, o simplemente con el logotipo de la empresa, la utilización de esas imágenes es 

visualmente atractiva, y le aporta un plus de calidad a nuestra aplicación... esta pantalla se llama 

SplashScreen. AppInventor sin embargo, no ofrece esta posibilidad como tal. 

Para  crear  una  pantalla  Splash  en  AppInventor,  lo  que  debemos  hacer  en  AppInventor,  es  crear  una 

pantalla normal, que pasado un tiempo que nosotros definamos, cambie a otra pantalla, la de la aplicación. 

Es decir, necesitamos tener dos pantallas  igual que en ejercicios anteriores, sólo que en  lugar de hacer  la 

transición de una a otra a través de la pulsación de un botón se hará cuando pase determinado tiempo. 

Para entender el funcionamiento, nos vamos a crear un proyecto nuevo en AppInventor, y lo llamamos por 

ejemplo “Splash”. 

Lo que vamos a hacer ahora es poner en  la pantalla, algo que diferencie a nuestro Splash de  la pantalla 

principal  de  la  aplicación. Arrastramos  un  Label  de  la  paleta  de  componentes,  y  ponemos  el  texto  que 

queramos... en este caso, “HOLA!” 

 

 

 

  11 Uso de varias pantallas y pantalla Splash

Ahora nos creamos una pantalla nueva igual que en el reto anterior, pulsando en el botón “addscreen” del 

menú principal de la web de AppInventor. 

Para hacer que la pantalla Splash, en este caso “Screen1” sea una Splash, lo que debemos hacer es arrastrar 

un componente que nos va a servir de temporizador para cambiar a la ventana de la aplicación.... pulsamos 

en la pestaña Screen1 y en la paleta de componentes, podemos ver un componente llamado “clock”, ese es 

el que  vamos  a necesitar,  ya que  además de oferecernos  la posibilidad de  saber  la  fecha, nos hace de 

temporizador. 

Arrastramos  ese  componente  a  nuestro  viewer,  y  vemos  que  se  nos  coloca  debajo  de  la  pantalla  del 

Viewer, porque como otros componentes que ya hemos visto, es no‐visible. 

Seleccionamos el componente, y en la sección properties, vemos un apartado llamado “Time Interval”... en 

ese apartado es donde deberemos decir, cuanto  tiempo vamos a querer estar viendo  la pantalla  splash, 

introducimos 3000, las unidades son milisegundos, por tanto, esa cantidad se corresponde con 3 segundos. 

Por último, debemos cambiar una cosa más del componente “Clock”, en properties, vemos que  la opción 

“TimerAlwaysFires” está seleccionada, debemos de‐seleccionarla, ya que eso  lo que va a hacer es que el 

temporizador esté continuamente ejecutándose, y lo que nos interesa es que el temporizador funcione sólo 

una vez. 

 

 

  12 Uso de varias pantallas y pantalla Splash

 

Ahora debemos abrir el editor de bloques para configurar el cambio de una pantalla a otra. 

Pulsamos el botón “open blocks editor”. En el editor de bloques, lo que debemos hacer es configurar lo que 

pasa cuando el reloj llega a 3 segundos, en este caso pasar a otra ventana. 

Para  ello, pulsamos  en  la pestaña  “My Blocks”  y  seleccionamos  “Clock1” nuestro  reloj...  si miramos  los 

bloques que tenemos disponibles, vemos uno que pone “Clock1.Timer”, es decir temporizador, ese bloque 

es el que nos interesa, ya que es el que se ejecutará cuando el temporizador llegue a los 3000 milisegundos 

que hemos definido. 

Arrastramos ese bloque a nuestro lienzo. 

 

Lo  que  debemos  hacer  ahora  es  rellenar  ese  bloque  con  un  bloque  que  nos  permita  abrir  una  nueva 

ventana, para ello, igual que hicimos en retos anteriores, lo que debemos hacer es, en la pestaña “Built‐In” 

pulsamos en “Control” y buscamos el bloque “Open anotherScreen”... arrastramos ese bloque al hueco del 

bloque del reloj... a este bloque le debemos meter un bloque de texto con el nombre de la pantalla a la que 

queremos  ir,  exactamente  igual  que  en  el  reto  2,  pulsamos  nuevamente  en  la  pestaña  “Built‐In”, 

seleccionamos “Text” y arrastramos el bloque “Text” a nuestro puzzle. 

Cuando ya lo tenemos, debemos cambiar el texto “Text” por el nombre de la pantalla a la que queremos ir, 

en este caso “Screen2”. 

 

 

 

  13 Uso de varias pantallas y pantalla Splash

De esta forma, cuando el reloj llegue a 3 segundos, automáticamente, cambiará la pantalla de presentación 

o Splash por la siguiente pantalla. 

Sin embargo, esta aplicación tiene un problema, y es que cuando estemos en la ventana de la aplicación, si 

pulsamos el botón atrás del teléfono, nos volverá a la pantalla de Splash, para evitar esto, lo que debemos 

hacer, es que además de abrir la ventana nueva, cierre la ventana de Splash. Si observamos el bloque “open 

anotherscreen”, vemos que no tiene ninguna pestaña o hueco a  la que añadir otro bloque para cerrar  la 

ventana.  

De todas formas, vamos a buscar el bloque que nos hace falta para cerrar  la ventana de Splash. Igual que 

hemos hecho para abrir una ventana nueva, pulsamos en  la pestaña “Buit‐In”, seleccionamos “Control” y 

buscamos un bloque llamado “closescreen”.... si nos fijamos en ese bloque, vemos que tenemos el mismo 

problema que con el bloque “open anotherscreen”, no tiene ningún hueco para anidar bloques. 

Lo que debemos hacer en ese caso es crear un “procedimiento” que nos ejecute ese bloque. 

Para ello, seleccionamos la pestaña “Built‐In” y pulsamos sobre “Definition”, el bloque que necesitamos es 

el que pone “procedure”. 

Lo arrastramos a nuestro lienzo. 

 

Y dentro de  ese bloque,  vamos  a poner  el bloque  “closescreen”. Por  comodidad,  vamos  a  cambiarle  el 

nombre  al  procedimiento,  pulsando  en  el  texto  procedure  del  bloque,  introducimos  un  nombre  mas 

familiar, como “cierraventana”. 

 

Ahora lo que debemos hacer es pulsar en la pestaña “My Blocks”, seleccionar “MyDefinitions” y arrastrar el 

bloque “cierraventana” en el bloque del reloj, de tal forma, que el bloque que abre una nueva ventana, se 

anide a éste. 

 

  14 Uso de varias pantallas y pantalla Splash

 

De esta forma, cuando pasen 3 segundos,  la ventana de splash se cerrará y se abrirá  la nueva ventana (la 

aplicación). 

Con este método conseguimos que al pulsar el botón “atras” del telefono desde la pantalla de la aplicación, 

la aplicación salga, y no se vuelva a ver la pantalla de splash. 

Si lo preferimos, podemos sacar también el bloque “open anotherscreen” a otro procedimiento y hacer que 

éste  bloque  se  ejecute  antes  que  el  otro  para  facilitar  la  comprensión,  es  decir...  primero  paso  a  otra 

ventana y luego cierro la ventana splash... el resultado es el mismo.