Header Ads Widget

Ticker

6/recent/ticker-posts

Android Studio Como crear un Splash Screen con Progress Bar

Android Studio Como crear un Splash Screen con Progress Bar

Hola, si estás leyendo esto es por que te va ser de utilidad, no hay mucha información de estos temas en español, es una desventaja para los que no dominan bien el idioma inglés.

Son pequeños tips, que los voy a llamar así, que nos van a ser de utilidad para maquillar un poco mejor nuestros proyectos o simplemente para descubrir algo nuevo.


Sin más entramos de lleno, lo primero que vamos a realizar, si en el mejor de los casos no hayas empezado un nuevo proyecto y si en el caso que si, como es el caso de muchos de seguro, agregaremos una nueva actividad vacía:


Lo llamaremos SplashActivity o cualquier otro nombre que lo puedan identificar y se les sea más cómodo de usar, y le daremos al botón Finalizar.

Ahora bien, una vez creado nuestra actividad, vamos a ingresar en activity_splash.xml donde cambiaremos primero el tipo de layout a usar, en este caso RelativeLayout, asu vez insertamos un ImageView que será el contenedor de nuestra imagen, aquí podemos cambiar el color del layout y solo insertar un logo, o podemos insertar una imagen prediseñada, el ImageView lo ponemos en android:layout_width y android:layout_height en match_parent para que se adapte y ocupe todo nuestro contenedor, también cambiamos el tipo de escalado android:scaleType en fitXY.

Tips: Para los que no saben todavía como poner o incluir imágenes en nuestro proyecto, tan sencillo como copiar y pegar (Control + C, Control + V), de la ruta de donde esté la imagen a nuestra carpeta drawable y nos saltará un mensaje de confirmación, damos ok y estará listo para usar.


Luego pasamos al ProgressBar, insertamos un ProgressBar de estilo Horizontal, para este ejemplo.

Nota: Si vas a realizar con el estilo Circle o Circular, hay algunos pasos que no debes realizar y los indicaré para evitarlos.

Lo único a modificar en el ProgressBar es android:marginLeft y android:marginRight para que tenga márgenes a la izquierda y derecha de unos 20dp para este ejemplo y gustos de cada uno, luego si deseamos como va quedar al 100% nuestro ProgressBar podemos hacer esto, modificar o agregar android:progress y como valor 100 o 1, luego establecemos el valor máximo a tener en el ProgressBar agregamos android:max y como valor 100 esto si o si tiene que ser valor final, luego android:indeterminate dejamos en false, con esto estaría listo nuestra barra de progreso, al final les mostraré como queda con estilo nuestro ProgressBar.


Luego pasamos al SplashActivity.java, donde para este ejemplo cambiaremos ciertos parámetros, como las librerías.


Cambiaremos el AppCompatActivity por Activity ya que en nuestra actividad no trabajaremos con AppComat el cual lleva Title y ActionBar.


Una ves realizado nuestro proyecto automáticamente se refrescará, ahora vamos a definir y declarar ciertas variables, después de public class SplashActivity extends...:


Ahora dentro del onCreate después de setContentView(R.layout.activity_splash) vamos a insertar el siguiente código:


Declaramos e inicializamos nuestro progressBar agregado en el XML, luego con progressBar.setProgress(0) indicamos que va a comenzar desde 0, y con final long intervalo vamos a serealizar y con timer vamos a realizar nuestro bucle, luego realizando una comparación con if sobre 100 que es nuestro tope para el progressBar, incrementamos de uno en uno, y devolvemos con progressBar.setProgress(i) para que vaya avanzando, luego en caso de que llegue a 100, finalizará el timer, y recién mostrara nuestro siguiente Activity en este caso le nombre como HomeActivity.java, aclaro que es el archivo java al que debemos de dirigirnos y no al activity_home.xml, luego con finish() cerramos y finalizamos nuestra Activity actual.

Eso sería todo, con lo básico que les mostré ya quedaría, pero si deseamos podemos 'tunear' un poco el progressBar de la siguiente manera:


Ingresamos a values, luego colors.xml allí agregaremos colores para modificar el que por defecto nos da android.


En caso de este ejemplo agregué tres, para tener un efecto de degradado, pero ustedes si desean solo  uno para ver como queda.


Ahora creamos un archivo de personalización propio en la carpeta drawable, dando click derecho, luego nuevo y luego Drawable resource file, agregamos un nombre para el archivo en minúsculas y damos a Ok, allí borramos todo lo que contenga excepto <?xml version...

Para luego colocar lo siguiente en caso de degradado:


En caso de que sea un solo color:


La parte de corners android:radius es para que tenga un borde y no tenga puntas, en otras palabras un rectángulo con bordes redondeados y no en punta.

Ahora tan sencillo como compartir esta publicación en facebook, twitter agregamos el estilo a nuestro progressBar en el archivo XML de activity_splash.xml con el atributo android:progressDrawable.


Antes de terminar y muy importante no se olviden de cambiar el orden de ejecución en el archivo AndroidManifest.xml, ya que si no va a funcionar correctamente.





El código no está para descargar pero les dejo algo parecido para que puedan copiar y pegar.
Eso es todo, más tarde realizaré un video tutorial en mi canal de Youtube, comenten que tal les parece y suscribanse a mi canal de youtube.


activity_splash.xml




SplashActivity.java

Publicar un comentario

0 Comentarios