Crear un Splash-Screen - AURELIUX · El “splashscreen” es una pantalla que carga justo cuando...

5
Aurelio López Ovando - http://aureliux.wordpress.com 1 Crear un Splash-Screen El “splashscreen” es una pantalla que carga justo cuando se abre la aplicación y que generalmente tiene algún aviso que indica al usuario que algo está sucediendo mientras se carga el sistema o simplemente un mensaje de bienvenida, acompañanada por lo general de alguna imagen comúnmente el logotipo. En este ejemplo realmente veremos dos cosas: 1. Como utilizar insertar una imagen en una pantalla. 2. Como crear un splashScreen. Primeramente crearemos un proyecto de android, en este caso le pondremos como nombre “SplashScreenDemo”, seguimos las pantallas iniciales, hasta llegar al “activity” principal . Hasta este punto tenemos un activity al que pusimos como nombre “Principal”. El splashScreen es otro activity, por lo tanto hay que crearlo y configurarlo de la manera en que queramos o necesitemos, pero antes de crearlo debemos considerar que necesitamos una imagen para mostrarla en esa pantalla, así que primeramente ocupémonos de ver como agregar una imagen al proyecto. Lo hacemos como se describe a continuación: Buscamos la carpeta “res” esta carpeta, como ya sabemos (o deberíamos), contiene los recursos externos a utilizar en el proyecto, al decir recursos externos, me refiero a: imágenes, audios, videos, íconos, etc…, pues bien, en esa carpeta debemos colocar los archivos de los recursos a utilizar. En este caso específico, debemos tener la imagen que queremos mostrar, si desplegamos la estructura de carpetas veremos que tiene: drawable-hdpi, darwable-ldpi, layout, etc… cada una con una función específica, para no generar confusiones lo más adecuado será crear nuestra propia carpeta y de ahí colocar nuestras imágenes, a esta nueva carpeta le llamaremos “drawable”.

Transcript of Crear un Splash-Screen - AURELIUX · El “splashscreen” es una pantalla que carga justo cuando...

Aurelio López Ovando - http://aureliux.wordpress.com 1

Crear un Splash-Screen

El “splashscreen” es una pantalla que carga justo cuando se abre la aplicación y que generalmente tiene algún aviso que indica

al usuario que algo está sucediendo mientras se carga el sistema o simplemente un mensaje de bienvenida, acompañanada por

lo general de alguna imagen comúnmente el logotipo.

En este ejemplo realmente veremos dos cosas:

1. Como utilizar insertar una imagen en una pantalla.

2. Como crear un splashScreen.

Primeramente crearemos un proyecto de android, en este caso le pondremos como nombre “SplashScreenDemo”, seguimos

las pantallas iniciales, hasta llegar al “activity” principal .

Hasta este punto tenemos un activity al que pusimos

como nombre “Principal”.

El splashScreen es otro activity, por lo tanto hay que crearlo y configurarlo de la manera

en que queramos o necesitemos, pero antes de crearlo debemos considerar que

necesitamos una imagen para mostrarla en esa pantalla, así que primeramente

ocupémonos de ver como agregar una imagen al proyecto.

Lo hacemos como se describe a continuación:

Buscamos la carpeta “res” esta carpeta, como ya sabemos (o deberíamos), contiene los recursos externos

a utilizar en el proyecto, al decir recursos externos, me refiero a: imágenes, audios, videos, íconos, etc…,

pues bien, en esa carpeta debemos colocar los archivos de los recursos a utilizar.

En este caso específico, debemos tener la imagen que queremos mostrar, si desplegamos la estructura

de carpetas veremos que tiene: drawable-hdpi, darwable-ldpi, layout, etc… cada una con una función

específica, para no generar confusiones lo más adecuado será crear nuestra propia carpeta y de ahí

colocar nuestras imágenes, a esta nueva carpeta le llamaremos “drawable”.

Aurelio López Ovando - http://aureliux.wordpress.com 2

Para ellos damos clic derecho sobre la carpeta “res” y “New -> folder”.

En la ventana que aparece escribimos el nombre de la carpeta, que para

este caso(como ya mencionamos anteriormente) la llamaremos

“drawable” y pulsamos en el botón finish, como se muestra en la figura.

Ahora debemos tener una nueva subcarpeta

dentro de la carpeta res, lo que ocupa ahora

es agregar los archivos que necesitamos a

dicha subcarpeta.

Una manera sencilla de hacerlo es arrastrando la imagen deseada desde una carpeta de explorador de Windows hasta esta

carpeta “drawable” en eclipse, cuestión de acomodar las ambas ventanas para poder hacerlo sin complicaciones.

Si lo hacemos de manera correcta nos aparece un cuadro de diálogo preguntándonos si queremos copiar el archivo a lo cual

diremos que “sí” marcando la opción “Copy files”, podríamos arrastrar más de un archivo a la vez si así lo quisiéramos.

Y con esto ya tenemos nuestro archivo de imagen dentro de la carpeta

de recursos.

Aurelio López Ovando - http://aureliux.wordpress.com 3

Ahora si ya podemos crear nuestra pantalla de presentación o bienvenida a la que conocemos como “splash screen”.

Para crear un nueco activity debemos dar clic derecho sobre la carpeta “layout” y escogemos la opción: “New -> Other” y de la

ventana que aparece escogemos la opción “Android activity” pulsamos botón “Next” creamos una activity en blanco(Blank

Activity) y le pondremos como nombre: “SplashScreen” y pulsamos el botón “Finish”.

Lo que podremos observar de manera inmediata es que la carpeta

layout contiene ahora un nuevo archivo aparte de principal.xml,

ahora contiene el que acabamos de crear.

Si lo abrimos tendremos una nueva pantalla a la cual le

insertaremos la imagen que agregamos hace un instante, así que

damos clic sobre este archivo.

De manera predeterminada traerá un texto inicial (TextView)

podemos eliminarlo sin ningún problema o podemos modificarlo por uno que diga bienvenido al sistema a través de los strings.

Ahora coloquemos sobre esta pantalla un “ImageView” que se encuentra dentro de la sección

“Image& media” al colocarlo sobre la pantalla inmediantemente nos pedirá que elijamos la

imagen que queremos colocar y nos mostrará la imagen que subimos hace un momento, la cual

debemos seleccionar.

Aurelio López Ovando - http://aureliux.wordpress.com 4

Y listo, hemos colocado una imagen sobre la pantalla

Ahora lo que queda es la parte del código, hacer que aparezca primero la pantalla de bienvenida, se detenga un instante y

luego desaparezca dando paso a la pantalla principal de la aplicación.

Abrimos “SplashScreen.java” y modificamos el código como se muestra:

package alo.aur3liux.splashscreendemos; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; public class SplashScreen extends Activity { //Tiempo en milisegundos que durará la pantalla de bienvenida private long retardoPantalla = 4000; //4000 milisegundos equivale a 4 segundos. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.splash_screen); //Lanzamos la pantalla de bienvenida TimerTask task = new TimerTask() { @Override public void run() { Intent pantallaInicial = new Intent().setClass(SplashScreen.this, Principal.class); startActivity(pantallaInicial); finish(); //Lo destruimos para evitar regresar presionando el boton atras } }; Timer t = new Timer(); t.schedule(task, retardoPantalla); //Aqui se detiene 4 segundos } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.splash_screen, menu); return true; } }

Aurelio López Ovando - http://aureliux.wordpress.com 5

Ahora buscamos al archivo “AndroidManifiest.xml” y damos click donde dice “XML Source” y nos muestra el código

correspondiente, ahí debemos modificar como se muestra:

Se guardan todos los cambios y al correr la aplicación podremos ver la pantalla de bienvenida.

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="alo.aur3liux.splashscreendemos" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="alo.aur3liux.splashscreendemos.SplashScreen" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="alo.aur3liux.splashscreendemos.Principal" android:label="@string/title_activity_splash_screen" > </activity> </application> </manifest>