Pantallas de presentación

A partir de Android 12, la La API de SplashScreen permite que se inicien las apps con animación, incluido un movimiento de entrada a la app en el inicio, una pantalla de presentación que muestra el ícono de tu app y una transición a tu propia app. Un SplashScreen es un Window y por lo tanto, abarca un Activity

La experiencia de la pantalla de presentación aporta elementos de diseño estándar a todas las apps pero también se puede personalizar para que tu app mantenga su marca única.

Además de usar la API de la plataforma SplashScreen, también puedes usar la SplashScreen biblioteca de compatibilidad, que une la API de SplashScreen.

Cómo funciona la pantalla de presentación

Cuando un usuario inicia una app mientras su proceso no está en ejecución (una start) o Activity no es creado (un inicio semicaliente), el los siguientes eventos:

1. El sistema muestra la pantalla de presentación con temas y animaciones que definir.

2. Cuando la app está lista, se descarta la pantalla de presentación y se muestra la app.

La pantalla de presentación nunca se muestra durante una inicio en caliente

Elementos y mecánica de la pantalla de presentación

Los elementos de la pantalla de presentación se definen con archivos de recursos XML en el Archivo de manifiesto de Android. Hay versiones en modo claro y oscuro para cada elemento.

Los elementos personalizables de una pantalla de presentación incluyen el ícono de la app, el fondo del ícono y el fondo de la ventana:

Ten en cuenta los siguientes elementos que se muestran en la figura 2:

1 El ícono de la app debe ser un elemento de diseño vectorial. Integra pueden ser estáticas o animadas. Si bien las animaciones pueden tener una duración ilimitada, te recomendamos que no excedan los 1,000 milisegundos. El ícono de selector es el predeterminado.

2 El fondo del ícono es opcional y útil si necesitas más contraste entre el ícono y el fondo de la ventana. Si utilizas un ícono adaptable, su del fondo se muestra si hay suficiente contraste con el fondo de la ventana.

3 Al igual que con los íconos adaptables, un tercio de los el primer plano está enmascarado.

4 El fondo de la ventana consta de un único color opaco. Si el fondo de la ventana está configurado y tiene un solo color, se usa de forma predeterminada si no se establece el atributo.

Dimensiones de la pantalla de presentación

El ícono de la pantalla de presentación usa las mismas especificaciones que íconos adaptables de la siguiente manera:

• Imagen de marca: Debe tener un tamaño de 200 × 80 dp.
• Ícono de la app con fondo de ícono: debe ser de 240 × 240 dp y caber en un de 160 dp de diámetro.
• Ícono de la app sin fondo de ícono: debe ser de 288 × 288 dp y caber en un círculo de 192 dp de diámetro.

Por ejemplo, si el tamaño completo de una imagen es de 300 × 300 dp, el ícono debe ajustarse a un círculo con un diámetro de 200 dp. Todo lo que está fuera del círculo gira invisible (enmascarado).

Animaciones de la pantalla de presentación y secuencia de inicio

La latencia adicional a menudo se asocia con el inicio en frío de una app. Agregar un ícono animado a la pantalla de presentación tiene un atractivo estético obvio brinda una experiencia más premium. La investigación sobre usuarios muestra que el concepto de startup tiempo es menor cuando se visualiza una animación.

Se incorpora una animación de la pantalla de presentación dentro de los componentes de la secuencia de inicio, como en la figura 4.

1. Animación de entrada: Consiste en la vista del sistema hacia la pantalla de presentación. Integra está controlado por el sistema y no se puede personalizar.

2. Pantalla de presentación (que se muestra durante la parte de "esperar" de la secuencia): la de presentación pantalla se puede personalizar, lo que te permite proporcionar tu propia animación del logotipo y desarrollo de la marca. Debe cumplir con los requisitos. descritos en esta página para que funcionen correctamente.

3. Animación de salida: Consiste en la animación que oculta la pantalla de presentación. Si quieres personalizarla, usa SplashScreenView y su ícono. Puedes ejecutar cualquier animación en ellos, con parámetros de configuración para la transformación, opacidad y color. En este caso, quita manualmente la pantalla de presentación cuando la animación haya finalizado.

Cuando se ejecuta la animación del ícono, el inicio de la app te brinda la opción de omitir la secuencia en los casos en que la app esté lista antes. La app activa onResume(). o que se agote el tiempo de espera de la pantalla de presentación, así que asegúrate de que el movimiento se pueda se omitió cómodamente. La pantalla de presentación solo se debe descartar con onResume() cuando la aplicación es estable desde un punto de vista visual, por lo que no se agregan íconos según tus necesidades. Introducir una interfaz incompleta puede ser molesto para los usuarios y dan una impresión de imprevisibilidad o falta de refinamiento.

Requisitos para la animación de la pantalla de presentación

La pantalla de presentación debe cumplir con las siguientes especificaciones:

• Se debe establecer el color de fondo de una ventana única sin transparencia. Día y noche son compatibles con el Biblioteca de compatibilidad SplashScreen.

• Asegúrate de que el ícono animado cumpla con las siguientes especificaciones:

  • Formato: el ícono debe ser una AnimationdVectorDrawable (AVD) XML.
  • Dimensiones: Un ícono de AVD debe ser cuatro veces el tamaño de un ícono adaptable. de la siguiente manera:
    • El área del ícono debe ser de 432 dp; es decir, cuatro veces la Área de 108 dp de un ícono adaptable sin enmascarar.
    • Los dos tercios internos de la imagen se ven en el ícono de selector. y debe ser de 288 dp, es decir, cuatro veces el valor de constituye el área enmascarada interna de un icono adaptable.
  • Duración: Te recomendamos que no superes los 1,000 ms en los teléfonos. Puedes usar un inicio retrasado, pero no puede superar los 166 ms. Si la aplicación de inicio es superior a 1,000 ms, considera usar una animación que se repita indefinidamente.

• Establece un momento apropiado para descartar la pantalla de presentación, que ocurre cuando tu app dibuja su primer fotograma. Puedes personalizarlo como se describe en la sección sobre de mostrar la pantalla de presentación durante períodos más largos.

Recursos de la pantalla de presentación

Descarga el ejemplo de kit básico, que demuestra cómo crear, formatear y exportar una animación a un AVD. incluye lo siguiente:

• Archivo de proyecto de Adobe After Effects de la animación.
• Archivo en formato XML de AVD exportado final.
• GIF de ejemplo de la animación.

Si descargas estos archivos, aceptas las Condiciones del Servicio de Google.

En la Política de Privacidad de Google, se describe la forma en que se manejan los datos en este servicio.

Cómo personalizar la pantalla de presentación de la app

De forma predeterminada, SplashScreen usa el windowBackground de tu tema si windowBackground es un solo color. Para personalizar la pantalla de presentación, agrega atributos al tema de la app.

Puedes personalizar la pantalla de presentación de la app mediante cualquiera de las siguientes acciones:

• Configura los atributos del tema para cambiar su apariencia.

• Mantenlo en pantalla por un período más largo.

• Personaliza la animación para descartar la pantalla de presentación.

Comenzar

La biblioteca principal de SplashScreen lleva la pantalla de presentación de Android 12 a todos del nivel de API 23. Para agregarla a tu proyecto, agrega el siguiente fragmento a Tu archivo build.gradle:

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

Cómo establecer un tema para la pantalla de presentación a fin de cambiar su apariencia

Puedes especificar los siguientes atributos en tu tema Activity para personalizarlos la pantalla de presentación de la app. Si ya tienes una pantalla de presentación heredada que usa atributos como android:windowBackground, considera lo siguiente: Proporcionar un archivo de recursos alternativo para Android 12 y versiones posteriores

1. Usa windowSplashScreenBackground para llenar el fondo con un solo color específico:

   <item name="android:windowSplashScreenBackground">@color/...</item>
   

2. Usa windowSplashScreenAnimatedIcon para reemplazar el ícono en el centro de la ventana de inicio.

   En el caso de las apps que se orientan solo a Android 12 (nivel de API 32), haz lo siguiente:

   Si el objeto se puede animar y dibujar mediante AnimationDrawable y AnimatedVectorDrawable, establece windowSplashScreenAnimationDuration en reproduce la animación mientras se muestra la ventana de inicio. No es obligatorio para Android 13, ya que la duración se infiere directamente de la AnimatedVectorDrawable

   <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
   

3. Usa windowSplashScreenAnimationDuration para indicar el tiempo que durará la animación del ícono de la pantalla de presentación. Configuración de esto no influye en el tiempo real durante el cual se desactiva la pantalla de presentación pero puedes recuperarlo cuando personalices la salida de la pantalla de presentación animación con SplashScreenView.getIconAnimationDuration Consulta la siguiente sección sobre mantener la pantalla de presentación en la pantalla durante períodos más largos para obtener más información.

   <item name="android:windowSplashScreenAnimationDuration">1000</item>
   

4. Usa windowSplashScreenIconBackgroundColor. para establecer un fondo detrás del ícono de la pantalla de presentación. Esto es útil si hay no hay suficiente contraste entre el fondo de la ventana y el ícono.

   <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
   

5. Puedes usar windowSplashScreenBrandingImage Para configurar una imagen que se mostrará en la parte inferior de la pantalla de presentación. Sin embargo, el las pautas de diseño recomiendan no usar una imagen de marca.

   <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
   

6. Puedes usar windowSplashScreenBehavior para especificar si tu app siempre muestra el ícono en la pantalla de presentación Android 13 y versiones posteriores El valor predeterminado es 0, que muestra el ícono en la pantalla de presentación si la actividad de inicio establece splashScreenStyle en SPLASH_SCREEN_STYLE_ICON, o sigue el comportamiento del sistema si la actividad de inicio no especifica un estilo. Si prefieres no mostrar nunca una pantalla de presentación vacía y siempre el ícono animado que se mostrará, configúralo en el valor icon_preferred.

   <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   

Cómo mostrar la pantalla de presentación durante períodos más largos

La pantalla de presentación se descarta en cuanto la app dibuja su primer fotograma. Si no necesitan cargar una pequeña cantidad de datos, como cargar la configuración de la app desde un disco local de forma asíncrona, puedes usar ViewTreeObserver.OnPreDrawListener para suspender la app y dibujar su primer fotograma.

Si tu actividad inicial termina antes de dibujar (por ejemplo, si no configurar la vista de contenido y finalizar antes de onResume, el dibujo previo un objeto de escucha no sea necesario.

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

Cómo personalizar la animación para descartar la pantalla de presentación

Puedes personalizar aún más la animación de la pantalla de presentación si usas Activity.getSplashScreen().

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

Al inicio de esta devolución de llamada, el elemento de diseño vectorial animado en la pantalla de presentación. Según la duración del inicio de la app, es posible que la interfaz dibujable esté en medio de su animación. Usa SplashScreenView.getIconAnimationStart para saber cuándo comenzó la animación. Puedes calcular la duración restante de la animación del ícono de la siguiente manera:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Recursos adicionales

• Cómo migrar la implementación existente de la pantalla de presentación a Android 12 y más alto
• Ahora en la app para Android, que muestra una implementación real de una pantalla de presentación