Configurare Indietro predittivo

Il gesto Indietro predittivo e le animazioni di sistema sono attivati per impostazione predefinita. Se la tua app intercetta l'evento Indietro e non hai eseguito la migrazione all'Indietro predittivo,aggiorna l'app per utilizzare le API di navigazione a ritroso supportate.

L'animazione predittiva per tornare alla home page.
L'animazione predittiva cross-activity.
L'animazione predittiva tra le attività.

Attivare le animazioni di sistema predefinite

Le animazioni di sistema per il ritorno alla schermata Home, il passaggio da un'attività all'altra e da un'app all'altra sono disponibili sui dispositivi Android 15 e versioni successive per le app di cui è stata eseguita la migrazione alle API di gestione del ritorno indietro supportate.

  • Torna alla schermata Home: riporta l'utente alla schermata Home.
  • Cross-activity: transizioni tra le attività all'interno dell'app.
  • Tra attività: transizioni tra attività.

Queste animazioni sono attivate per impostazione predefinita su Android 15 e versioni successive. Sui dispositivi con Android 13 o 14, gli utenti possono attivarle tramite le Opzioni sviluppatore.

Per ottenere le animazioni di sistema, aggiorna la dipendenza AndroidX Activity alla versione 1.6.0 o successive.

Attivare Indietro predittivo con Navigation Compose

Per utilizzare l'Indietro predittivo in Navigation Compose, assicurati di utilizzare la libreria navigation-compose 2.8.0 o versioni successive.

La composizione della navigazione esegue automaticamente la dissolvenza incrociata tra le schermate quando l'utente scorri indietro:

Figura 2. L'animazione di dissolvenza incrociata predefinita in-app in SociaLite.

Durante la navigazione, puoi creare transizioni personalizzate con popEnterTransition e popExitTransition. Se applicati al tuo NavHost, questi modificatori ti consentono di definire l'animazione delle schermate di entrata e di uscita. Puoi utilizzarli per creare una serie di effetti, come scalatura, dissolvenza o scorrimento.

In questo esempio, scaleOut viene utilizzato all'interno di popExitTransition per ridurre la schermata di uscita mentre l'utente torna indietro. Inoltre, il parametro transformOrigin determina il punto intorno al quale si verifica l'animazione di ridimensionamento. Per impostazione predefinita, è il centro dello schermo (0.5f, 0.5f). Puoi modificare questo valore per fare in modo che il ridimensionamento abbia origine da un punto diverso.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)

Questo codice produce il seguente risultato:

Figura 3. Un'animazione in-app personalizzata in SociaLite.

popEnterTransition e popExitTransition controllano in modo specifico le animazioni quando si esce dal back stack, ad esempio con un gesto Indietro. Puoi anche utilizzare enterTransition e exitTransition per definire le animazioni per l'inserimento e l'uscita dei componenti componibili in generale, non solo per l'Indietro predittivo. Se imposti solo enterTransition e exitTransition, questi vengono utilizzati sia per la navigazione normale sia per il pop del back stack. Tuttavia, l'utilizzo di popEnterTransition e popExitTransition ti consente di creare animazioni distinte per la navigazione a ritroso.

Eseguire l'integrazione con le transizioni degli elementi condivisi

Le transizioni degli elementi condivisi forniscono una connessione visiva fluida tra i composable con contenuti condivisi, spesso utilizzati per la navigazione.

Figura 4. Transizione degli elementi condivisi con Indietro predittivo in Navigation Compose.

Per utilizzare gli elementi condivisi con Navigation Compose, consulta Indietro predittivo con elementi condivisi.

Supportare Indietro predittivo con i componenti Material Compose

Molti componenti della libreria Material Compose sono progettati per funzionare perfettamente con i gesti di indietro predittivi. Per attivare le animazioni di indietro predittivo in questi componenti, includi la dipendenza Material3 più recente (androidx.compose.material3:material3-*:1.3.0 o versioni successive) nel tuo progetto.

I componenti Material che supportano le animazioni per la funzionalità Indietro predittivo includono:

SearchBar e ModalBottomSheet vengono animate automaticamente con le gesture Indietro predittive. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer richiedono di superare drawerState per i rispettivi composable dei contenuti del foglio.

Testare l'animazione del gesto Indietro predittivo

Se utilizzi ancora Android 13 o Android 14, puoi testare l'animazione di ritorno alla home page.

Per testare questa animazione:

  1. Sul dispositivo, vai a Impostazioni > Sistema > Opzioni sviluppatore.
  2. Seleziona Animazioni Indietro predittivo.
  3. Avvia l'app aggiornata e usa il gesto Indietro per vederla in azione.

Su Android 15 e versioni successive, questa funzionalità è attiva per impostazione predefinita.

Risorse aggiuntive