אנימציות המערכת של חזרה למסך הבית, מעבר בין פעילויות ומעבר בין משימות זמינות במכשירים עם Android 15 ואילך באפליקציות שעברו ל-APIs הנתמכים לטיפול בתנועת החזרה.
חזרה למסך הבית: מחזיר את המשתמש למסך הבית.
פעילות חוצת-מכשירים: מעברים בין פעילויות באפליקציה.
האנימציות האלה מופעלות כברירת מחדל ב-Android מגרסה 15 ואילך. במכשירים עם Android בגרסה 13 או 14, המשתמשים יכולים להפעיל אותם דרך האפשרויות למפתחים.
כדי לקבל את האנימציות של המערכת, צריך לעדכן את התלות ב-AndroidX Activity לגרסה 1.6.0 ואילך.
הפעלת חיזוי של תנועת החזרה באמצעות Navigation Compose
כדי להשתמש בתכונה 'חזרה חזויה' ב-Navigation Compose, צריך לוודא שאתם משתמשים בספרייה
navigation-compose2.8.0
ואילך.
Navigation Compose מבצע באופן אוטומטי מעבר הדרגתי בין מסכים כשהמשתמש מחליק אחורה:
איור 2. אנימציית ברירת המחדל של מעבר הדרגתי באפליקציית SociaLite.
כשמנווטים, אפשר ליצור מעברים בהתאמה אישית באמצעות popEnterTransition ו-popExitTransition. כשמחילים אותם על NavHost, אפשר להגדיר איך מסכי הכניסה והיציאה יונפשו. אפשר להשתמש בהם כדי ליצור מגוון אפקטים, כמו שינוי גודל, דהייה או החלקה.
בדוגמה הזו, התג scaleOut משמש בתוך התג popExitTransition כדי להקטין את המסך שיוצא בזמן שהמשתמש חוזר אחורה. בנוסף, הפרמטר transformOrigin קובע את הנקודה שסביבה מתרחשת אנימציית ההגדלה. ברירת המחדל היא מרכז המסך (0.5f, 0.5f).
אפשר לשנות את הערך הזה כדי שהשינוי בגודל יתחיל מנקודה אחרת.
איור 3. אנימציה מותאמת אישית באפליקציה ב-SociaLite.
popEnterTransition ו-popExitTransition שולטים ספציפית באנימציות כשמבצעים פעולת חזרה אחורה, למשל באמצעות תנועה לחזרה אחורה. אפשר גם להשתמש ב-enterTransition וב-exitTransition כדי להגדיר אנימציות לכניסה וליציאה של רכיבי composable באופן כללי, ולא רק עבור התכונה 'חזרה עם חיזוי'. אם מגדירים רק את enterTransition ואת exitTransition, הם ישמשו גם לניווט רגיל וגם להחזרת הפעילויות הקודמות. עם זאת, באמצעות popEnterTransition ו-popExitTransition אפשר ליצור אנימציות שונות לניווט אחורה.
שילוב עם מעברים של רכיבים משותפים
מעברים בין רכיבים משותפים מספקים חיבור ויזואלי חלק בין קומפוזיציות עם תוכן משותף, ומשמשים לעיתים קרובות לניווט.
איור 4. מעבר בין רכיבים משותפים עם חזרה ניבויית ב-Navigation
Compose.
כדי להשתמש ברכיבים משותפים עם Navigation Compose, אפשר לעיין במאמר בנושא חזרה עם רכיבים משותפים.
תמיכה בתצוגה מקדימה של חזרה עם רכיבי Material Compose
רכיבים רבים בספריית Material Compose מתוכננים לפעול בצורה חלקה עם תנועות ניווט חזויות. כדי להפעיל אנימציות של חזרה עם חיזוי ברכיבים האלה, צריך לכלול בפרויקט את התלות העדכנית ב-Material3 (גרסה androidx.compose.material3:material3-*:1.3.0 ואילך).
רכיבי Material שתומכים באנימציות של חיזוי תנועת החזרה כוללים:
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-24 (שעון UTC).
[null,null,["עדכון אחרון: 2025-08-24 (שעון UTC)."],[],[],null,["# Set up Predictive back\n\nPredictive back and system animations are enabled by default. If your app\nintercepts the back event and you haven't migrated to predictive back,\n[update your app to use supported back navigation APIs](/guide/navigation/custom-back/predictive-back-gesture#update-custom) \nThe predictive back-to-home animation. \nThe predictive cross-activity animation. \nThe predictive cross-task animation.\n\nEnable default system animations\n--------------------------------\n\nThe back-to-home, cross-activity, and cross-task system animations are available\non Android 15 and later devices for apps that have migrated to the supported\nback handling APIs.\n\n- **Back-to-home**: Returns the user to the home screen.\n- **Cross-activity**: Transitions between activities within the app.\n- **Cross-task** : Transitions between [tasks](/guide/components/activities/tasks-and-back-stack).\n\nThese animations are enabled by default on Android 15 and higher. On devices\nrunning Android 13 or 14, users can enable them through the\n[Developer options](/guide/navigation/custom-back/predictive-back-gesture#dev-option).\n| **Note:** Intercepting back at the root activity (e.g. `MainActivity.kt`) disables the back-to-home animation, and intercepting back at an Activity disables the cross-activity animation.\n\nTo get the system animations, update your AndroidX `Activity` dependency\nto [1.6.0](/jetpack/androidx/releases/activity#version_160_3) or higher.\n\nEnable predictive back with Navigation Compose\n----------------------------------------------\n\nTo use predictive back in Navigation Compose, ensure you're using the\n`navigation-compose` [2.8.0](/jetpack/androidx/releases/navigation#2.8.0)\nlibrary or higher.\n\nNavigation Compose automatically cross-fades between screens when the user\nswipes back:\n**Figure 2.** The default crossfade in-app animation in SociaLite.\n\nWhen navigating, you can create custom transitions with\n[`popEnterTransition`](/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)) and [`popExitTransition`](/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)). When applied to your\n`NavHost`, these modifiers let you define how the enter and exit screens\nanimate. You can use them to create a variety of effects, such as scaling,\nfading, or sliding.\n\nIn this example, `scaleOut` is used within `popExitTransition` to scale down\nthe exiting screen as the user navigates back. Additionally, the\n`transformOrigin` parameter determines the point around which the scaling\nanimation occurs. By default, it's the center of the screen (`0.5f, 0.5f`).\nYou can adjust this value to make the scaling originate from a different point.\n\n\n```kotlin\nNavHost(\n navController = navController,\n startDestination = Home,\n popExitTransition = {\n scaleOut(\n targetScale = 0.9f,\n transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)\n )\n },\n popEnterTransition = {\n EnterTransition.None\n },\n modifier = modifier,\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/predictiveback/PredictiveBackSnippets.kt#L62-L75\n```\n\n\u003cbr /\u003e\n\nThis code produces the following result:\n**Figure 3.** A custom in-app animation in SociaLite.\n\n`popEnterTransition` and `popExitTransition` specifically control animations\nwhen popping the back stack, with a back gesture, for example. You can also use `enterTransition` and `exitTransition` to define animations for entering and\nexiting composables in general, not only for predictive back. If you only set `enterTransition` and `exitTransition`, they are used for both regular\nnavigation and popping the back stack. However, using `popEnterTransition` and `popExitTransition` lets you create distinct animations for back navigation.\n\nIntegrate with shared element transitions\n-----------------------------------------\n\nShared element transitions provide a smooth visual connection between\ncomposables with shared content, often used for navigation.\n**Figure 4.** Shared element transition with predictive back in Navigation Compose.\n\nTo use shared elements with Navigation Compose, see\n[Predictive back with shared elements](/develop/ui/compose/animation/shared-elements/navigation#predictive-back).\n\nSupport predictive back with Material Compose components\n--------------------------------------------------------\n\nMany components in the Material Compose library are designed to work seamlessly\nwith predictive back gestures. To enable predictive back animations in these\ncomponents, include the latest [Material3](/jetpack/androidx/releases/compose-material3) dependency (`androidx.compose.material3:material3-*:1.3.0` or higher) in your project.\n\nThe Material components that support predictive back animations include:\n\n- [`SearchBar`](https://m3.material.io/components/search/guidelines#3f2d4e47-2cf5-4c33-b6e1-5368ceaade55)\n- [`ModalBottomSheet`](https://m3.material.io/components/bottom-sheets/guidelines#c72ba2b1-906d-4cfa-9a6a-91e79555bad0)\n- [`ModalDrawerSheet/DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\n- [`ModalNavigationDrawer/DismissibleNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\n\n[`SearchBar`](/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) and [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) automatically animate with\npredictive back gestures. [`ModalNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)),\n[`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)), [`DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)), and\n[`DismissibleNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,kotlin.Function0)) require you to pass the `drawerState` to\ntheir respective sheet content composables.\n\nTest the predictive back gesture animation\n------------------------------------------\n\nIf you still use Android 13 or Android 14, you can test the back-to-home\nanimation.\n\nTo test this animation, follow these steps:\n\n1. On your device, go to **Settings \\\u003e System \\\u003e Developer options**.\n2. Select **Predictive back animations**.\n3. Launch your updated app, and use the back gesture to see it in action.\n\nOn Android 15 and later, this feature is enabled by default.\n\nAdditional resources\n--------------------\n\n- [Add predictive back animations codelab](/codelabs/predictive-back#0)\n- [Advanced layout animations in Compose video](https://www.youtube.com/watch?v=PR6rz1QUkAM&t=1195s&ab_channel=AndroidDevelopers)"]]
