Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Theo mặc định, tính năng xem trước thao tác quay lại và ảnh động hệ thống sẽ được bật. Nếu ứng dụng của bạn chặn sự kiện quay lại và bạn chưa di chuyển sang tính năng xem trước thao tác quay lại, hãy cập nhật ứng dụng để dùng các API điều hướng quay lại được hỗ trợ
Ảnh động xem trước thao tác quay lại màn hình chính.
Ảnh động xem trước trên nhiều hoạt động.
Ảnh động dự đoán cho nhiều nhiệm vụ.
Bật ảnh động mặc định của hệ thống
Ảnh động hệ thống cho thao tác quay lại trang chủ, giữa các hoạt động và tác vụ có trên các thiết bị Android 15 trở lên đối với những ứng dụng đã di chuyển sang các API xử lý thao tác quay lại được hỗ trợ.
Quay lại màn hình chính: Đưa người dùng trở lại màn hình chính.
Giữa các hoạt động: Chuyển đổi giữa các hoạt động trong ứng dụng.
Theo mặc định, các ảnh động này được bật trên Android 15 trở lên. Trên các thiết bị chạy Android 13 hoặc 14, người dùng có thể bật các công cụ này thông qua Tuỳ chọn cho nhà phát triển.
Để nhận được các ảnh động hệ thống, hãy cập nhật phần phụ thuộc AndroidX Activity lên 1.6.0 trở lên.
Bật tính năng xem trước thao tác quay lại bằng Navigation Compose
Để sử dụng tính năng xem trước thao tác quay lại trong Navigation Compose, hãy đảm bảo rằng bạn đang dùng thư viện navigation-compose2.8.0 trở lên.
Navigation Compose tự động chuyển đổi mờ giữa các màn hình khi người dùng vuốt ngược lại:
Hình 2. Ảnh động mặc định trong ứng dụng cho hiệu ứng làm mờ dần trong SociaLite.
Khi điều hướng, bạn có thể tạo hiệu ứng chuyển đổi tuỳ chỉnh bằng popEnterTransition và popExitTransition. Khi áp dụng cho NavHost, các đối tượng sửa đổi này cho phép bạn xác định cách màn hình xuất hiện và biến mất. Bạn có thể dùng các hiệu ứng này để tạo nhiều hiệu ứng, chẳng hạn như hiệu ứng thu phóng, làm mờ hoặc trượt.
Trong ví dụ này, scaleOut được dùng trong popExitTransition để thu nhỏ màn hình thoát khi người dùng quay lại. Ngoài ra, tham số transformOrigin xác định điểm mà quá trình điều chỉnh tỷ lệ ảnh động diễn ra xung quanh đó. Theo mặc định, điểm này là trung tâm của màn hình (0.5f, 0.5f). Bạn có thể điều chỉnh giá trị này để quá trình điều chỉnh theo tỷ lệ bắt đầu từ một điểm khác.
Hình 3. Ảnh động tuỳ chỉnh trong ứng dụng SociaLite.
Cụ thể, popEnterTransition và popExitTransition kiểm soát ảnh động khi bật ngăn xếp lui, chẳng hạn như bằng một cử chỉ quay lại. Bạn cũng có thể sử dụng enterTransition và exitTransition để xác định ảnh động cho các thành phần kết hợp nhập và thoát nói chung, không chỉ cho thao tác xem trước thao tác quay lại. Nếu bạn chỉ đặt enterTransition và exitTransition, thì các hiệu ứng này sẽ được dùng cho cả thao tác điều hướng thông thường và thao tác bật ngăn xếp lui. Tuy nhiên, việc sử dụng popEnterTransition và popExitTransition cho phép bạn tạo ảnh động riêng biệt cho thao tác điều hướng quay lại.
Tích hợp với hiệu ứng chuyển đổi phần tử dùng chung
Ảnh động chuyển đổi thành phần được chia sẻ tạo ra mối liên kết mượt mà về mặt hình ảnh giữa các thành phần kết hợp có nội dung được chia sẻ, thường được dùng cho hoạt động điều hướng.
Hình 4. Hiệu ứng chuyển đổi cho các thành phần dùng chung trong Navigation Compose.
Hỗ trợ tính năng xem trước thao tác quay lại bằng các thành phần Material Compose
Nhiều thành phần trong thư viện Material Compose được thiết kế để hoạt động liền mạch với cử chỉ xem trước thao tác quay lại. Để bật ảnh động xem trước thao tác quay lại trong các thành phần này, hãy thêm phần phụ thuộc Material3 mới nhất (androidx.compose.material3:material3-*:1.3.0 trở lên) vào dự án của bạn.
Các thành phần Material hỗ trợ ảnh động xem trước thao tác quay lại bao gồm:
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-27 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)"]]