{"id":2009,"date":"2020-04-18T15:52:50","date_gmt":"2020-04-18T20:52:50","guid":{"rendered":"https:\/\/naps.com.mx\/blog\/?p=2009"},"modified":"2021-06-07T13:41:41","modified_gmt":"2021-06-07T18:41:41","slug":"implementar-un-splash-screen-en-android","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/implementar-un-splash-screen-en-android\/","title":{"rendered":"Implementar un Splash Screen en Android"},"content":{"rendered":"<p>En \u00e9sta ocasi\u00f3n veremos c\u00f3mo implementar un Splash Screen en Android. Un Splash Screen (o pantalla de Bienvenida) consiste en una pantalla que muestra algunos elementos gr\u00e1ficos, como puede ser el logotipo de la aplicaci\u00f3n y cualquier otra informaci\u00f3n que el desarrollador considere pertinente. Por lo general aparece mientras la aplicaci\u00f3n realiza la carga de datos o conexi\u00f3n a bases de datos remotas. Sin embargo, muchas empresas lo utilizan con prop\u00f3sitos de marca (<a href=\"https:\/\/books.google.com.mx\/books?id=AdPTDgAAQBAJ&amp;lpg=PA113&amp;dq=splash%20screen%20android&amp;pg=PA113#v=onepage&amp;q=splash%20screen%20android&amp;f=false\">Darwin, 2017<\/a>).<\/p>\n<p><!--more--><\/p>\n<h2>Pasos para implementar un Splash Screen en Android<\/h2>\n<ol>\n<li>\n<h2>Creaci\u00f3n de el Splash Screen en Android<\/h2>\n<\/li>\n<\/ol>\n<p>Ir a drawable-&gt;New-&gt;Drawable resource file. En el cuadro de di\u00e1logo que se abre, le asignamos un nombre al archivo, en mi caso \u00absplash\u00bb. Aqu\u00ed dise\u00f1aremos nuestro Splash Screen, que contendr\u00e1 en mi caso el logotipo de la aplicaci\u00f3n.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2010\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file.png\" alt=\"implementar un splash screen en android - drawable resource file\" width=\"1648\" height=\"956\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file.png 1648w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file-300x174.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file-768x446.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-drawable-resource-file-1024x594.png 1024w\" sizes=\"auto, (max-width: 1648px) 100vw, 1648px\" \/><\/a><\/p>\n<p>El c\u00f3digo de \u00e9ste archivo ser\u00eda como el siguiente:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\r\n    &lt;item android:drawable=\"@color\/colorPrimary\"\/&gt;\r\n    &lt;item&gt;\r\n        &lt;bitmap\r\n            android:gravity=\"center\"\r\n            android:src=\"@drawable\/slimbody\"\/&gt;\r\n    &lt;\/item&gt;\r\n&lt;\/layer-list&gt;<\/pre>\n<p>En el c\u00f3digo anterior, se utiliza un color de fondo, y en forma centrada, se mostrar\u00e1 una imagen, que en mi caso se llama \u00abslimbody\u00bb y est\u00e1 en la carpeta \u00abdrawable\u00bb. En tu caso, puedes usar la imagen de tu elecci\u00f3n.<\/p>\n<h2>2. Creaci\u00f3n de un estilo que utilice nuestro gr\u00e1fico<\/h2>\n<p>Vamos a agregar un nuevo estilo. <del>Abrimos res-&gt;values-&gt;styles.xml<\/del><\/p>\n<p>Abrimos res-&gt;values-&gt;themes-&gt;themes.xml<\/p>\n<p>Crearemos un nuevo estilo para la pantalla splash screen, para lo cual agregaremos las siguientes lineas:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;style name=\"SplashScreen\" parent=\"Theme.AppCompat.NoActionBar\"&gt;\r\n        &lt;item name=\"android:windowBackground\"&gt;\r\n            @drawable\/splash\r\n        &lt;\/item&gt;\r\n&lt;\/style&gt;<\/pre>\n<h2>3. Creaci\u00f3n de un Activity para funcionalidad<\/h2>\n<p>Generamos un nuevo Activity sin layout: Da clic derecho en el package donde desees crear el Activity, luego \u00a0en New-&gt;Activity-&gt;Empty Activity, y asigna un nombre al activity, en mi caso se llama SplashActivity. Desactiva la casilla Generate Layout File.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2013\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity.png\" alt=\"implementar un splash screen en android - splashactivity\" width=\"1598\" height=\"1328\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity.png 1598w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity-300x249.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity-768x638.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-splashactivity-1024x851.png 1024w\" sizes=\"auto, (max-width: 1598px) 100vw, 1598px\" \/><\/a><\/p>\n<p>\u00c9ste archivo contendr\u00e1 c\u00f3digo para llamar al MainActivity.<\/p>\n<pre class=\"lang:java decode:true\">public class SplashActivity extends AppCompatActivity {\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        Intent intent = new Intent(this, MainActivity.class);\r\n        startActivity(intent);\r\n        finish(); \/\/ evitar regresar a \u00e9ste activity\r\n    }\r\n}<\/pre>\n<h2>4. Configuraci\u00f3n de AndroidManifest<\/h2>\n<p>A continuaci\u00f3n, vamos al AndroidManifest.xml para indicarle que el primer Activity que debe cargar el el SplashScreen.<\/p>\n<p>Abre AndroidManifest.xml. Ver\u00e1s que uno de los &lt;activity&gt; tiene las siguientes l\u00edneas:<\/p>\n<pre class=\"lang:xhtml decode:true\">            &lt;intent-filter&gt;\r\n                &lt;action android:name=\"android.intent.action.MAIN\" \/&gt;\r\n                &lt;category android:name=\"android.intent.category.LAUNCHER\" \/&gt;\r\n            &lt;\/intent-filter&gt;<\/pre>\n<p>Se las quitamos y se las ponemos al &lt;activity&gt; con name=\u00bb.Activities.SplashActivity\u00bb<\/p>\n<p>Vamos a agregar el estilo que creamos. Agrega tambien la siguiente l\u00ednea a ese mismo &lt;activity&gt;<\/p>\n<pre class=\"lang:xhtml decode:true\">android:theme=\"@style\/SplashScreen\"&gt;<\/pre>\n<p>En mi caso qued\u00f3 as\u00ed:<\/p>\n<pre class=\"lang:xhtml decode:true\">       &lt;activity\r\n            android:name=\".Activities.SplashActivity\"\r\n            android:theme=\"@style\/SplashScreen\"&gt;\r\n            &lt;intent-filter&gt;\r\n                &lt;action android:name=\"android.intent.action.MAIN\" \/&gt;\r\n                &lt;category android:name=\"android.intent.category.LAUNCHER\" \/&gt;\r\n            &lt;\/intent-filter&gt;\r\n        &lt;\/activity&gt;<\/pre>\n<p>Si en \u00e9ste momento corremos la aplicaci\u00f3n, veremos que el Splash Screen es el primero que se ejecuta.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-ejecucion.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2014\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-ejecucion.png\" alt=\"implementar un splash screen en android - ejecucion\" width=\"332\" height=\"581\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-ejecucion.png 494w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-ejecucion-172x300.png 172w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/a><\/p>\n<p>Y enseguida abre el MainActivity.<\/p>\n<h2>5. Realizar un retardo obligado de 4 segundos<\/h2>\n<p>Si nuestra aplicaci\u00f3n al iniciar tuviera que realizar un acceso a base de datos o peticiones a internet, el Splash Screen se mostrar\u00eda durante la cantidad de tiempo que la app estuviese cargando. \u00c9stas operaciones estar\u00edan en una clase que sobreescribe a Application. \u00a0Si dese\u00e1ramos que el Splash Screen est\u00e9 una cantidad t de tiempo, podr\u00edamos tambi\u00e9n indic\u00e1rselo en esa clase que sobreescribe a Application.<\/p>\n<p>Da clic derecho en el package donde desees crear la clase, luego en New-&gt;Java Class. As\u00edgnale un nombre a la clase, por ejemplo, MyApp.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2015\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp.png\" alt=\"implementar un splash screen en android - MyApp\" width=\"653\" height=\"518\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp.png 1050w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp-300x238.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp-768x610.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/04\/implementar-un-splash-screen-en-android-MyApp-1024x813.png 1024w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/a><\/p>\n<p>En el caso de que dese\u00e1ramos hacer un retardo de unos 4 segundos, el c\u00f3digo de \u00e9sta clase se ver\u00eda as\u00ed:<\/p>\n<pre class=\"lang:java decode:true\">public class MyApp extends Application {\r\n    @Override\r\n    public void onCreate() {\r\n        super.onCreate();\r\n        SystemClock.sleep(4000);\r\n    }\r\n}<\/pre>\n<p>En el AndroidManifest debemos indicarle que use esa clase que acabamos de crear.<\/p>\n<p>Bajo la l\u00ednea &lt;application escribe:<\/p>\n<pre class=\"\">android:name=\".Activities.MyApp\"<\/pre>\n<p>Es decir, parte del AndroidManifest se ver\u00eda as\u00ed:<\/p>\n<pre class=\"lang:xhtml decode:true \"> &lt;application\r\n        android:name=\".Activities.MyApp\"\r\n        android:allowBackup=\"true\"\r\n        android:icon=\"@mipmap\/ic_launcher\"<\/pre>\n<p>\u00a1Listo! Espero que hayas conseguido Implementar un Splash Screen en Android. En caso de que te resulte m\u00e1s f\u00e1cil aprender en video, puedes consultar el siguiente.<\/p>\n<p><iframe loading=\"lazy\" width=\"726\" height=\"408\" src=\"https:\/\/www.youtube.com\/embed\/__tA1S9JW2Q\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En \u00e9sta ocasi\u00f3n veremos c\u00f3mo implementar un Splash Screen en Android. Un Splash Screen (o pantalla de Bienvenida) consiste en una pantalla que muestra algunos elementos gr\u00e1ficos, como puede ser el logotipo de la aplicaci\u00f3n y cualquier otra informaci\u00f3n que el desarrollador considere pertinente. Por lo general aparece mientras la aplicaci\u00f3n realiza la carga de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[234],"tags":[277,235,276],"class_list":["post-2009","post","type-post","status-publish","format-standard","hentry","category-aplicaciones-moviles","tag-delay-in-android","tag-desarrollo-de-aplicaciones-moviles","tag-splash-screen"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/2009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=2009"}],"version-history":[{"count":8,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"predecessor-version":[{"id":2408,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions\/2408"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}