Реалізація Shared Element Transition в Android-застосунку

Впровадження Shared Element Transition в Android-додатки

Shared Element Transition в Android — механізм, при якому View з одного екрана візуально «переїжджає» на інший. Список новин, карточка з зображенням—користувач натискає, і зображення плавно розширюється в повноекранний детальний вигляд. Не зникає й не з'являється, а переміщується з анімацією форми, розміру та позиції.

Доступно через Fragment Transitions API (традиційний підхід) та Compose SharedTransitionLayout (сучасний).

Fragment Transitions: Activity та Fragment

Між Activity:

// З ListActivity при кліку на елемент:
val intent = Intent(this, DetailActivity::class.java)
intent.putExtra("productId", product.id)

val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
    this,
    imageView,                    // view на поточному екрані
    "product_image_transition"    // transitionName — збігається на обох екранах
)
startActivity(intent, options.toBundle())

// У DetailActivity:
ViewCompat.setTransitionName(detailImageView, "product_image_transition")
// postponeEnterTransition() + startPostponedEnterTransition() якщо зображення завантажується асинхронно

Якщо зображення завантажується через Glide або Coil—використовуйте postponeEnterTransition() до початку завантаження та startPostponedEnterTransition() у callback завантаження. Інакше анімація стартує до появлення зображення, і transition працює з placeholder.

// У DetailActivity.onCreate():
postponeEnterTransition()

Glide.with(this)
    .load(imageUrl)
    .listener(object : RequestListener<Drawable> {
        override fun onResourceReady(...): Boolean {
            startPostponedEnterTransition()
            return false
        }
        override fun onLoadFailed(...): Boolean {
            startPostponedEnterTransition() // також при помилці
            return false
        }
    })
    .into(detailImageView)

Між Fragment через Navigation Component:

// У ListFragment:
val extras = FragmentNavigatorExtras(
    imageView to "product_image_transition"
)
findNavController().navigate(
    R.id.action_list_to_detail,
    bundleOf("productId" to product.id),
    null,
    extras
)

// У DetailFragment.onCreate():
sharedElementEnterTransition = TransitionInflater.from(requireContext())
    .inflateTransition(android.R.transition.move)
postponeEnterTransition()

android.R.transition.move — стандартний transition, включає зміну bounds, translation та clip bounds. Для кастомної поведінки використовуйте TransitionSet з ChangeBounds, ChangeImageTransform, ChangeClipBounds.

Повернення назад: Shared Element автоматично анімує return transition при popBackStack() або кнопці назад. sharedElementReturnTransition можна налаштувати окремо—наприклад, інший easing для зворотного шляху.

Jetpack Compose: SharedTransitionLayout

Compose 1.7+ (stable) принес SharedTransitionLayout та SharedTransitionScope:

SharedTransitionLayout {
    NavHost(navController, startDestination = "list") {
        composable("list") {
            AnimatedVisibility(visible = true) {
                ProductList(
                    onProductClick = { product ->
                        navController.navigate("detail/${product.id}")
                    },
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this@AnimatedVisibility
                )
            }
        }
        composable("detail/{id}") { backStackEntry ->
            AnimatedVisibility(visible = true) {
                ProductDetail(
                    productId = backStackEntry.arguments?.getString("id"),
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this@AnimatedVisibility
                )
            }
        }
    }
}

// У ProductList:
@Composable
fun ProductCard(
    product: Product,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope,
) {
    with(sharedTransitionScope) {
        AsyncImage(
            model = product.imageUrl,
            modifier = Modifier.sharedElement(
                rememberSharedContentState(key = "product-image-${product.id}"),
                animatedVisibilityScope
            )
        )
    }
}

Ключ повинен збігатися на обох екранах. sharedElement обробляє геометричний перехід, sharedBounds коли контейнер також плавно змінює розмір.

Поширені помилки

transitionName встановлено лише на одному екрані—transition мовчки не працює. Завжди перевіряйте обидва напрямки.

RecyclerView з багатьма елементами: викличте setTransitionName у onBindViewHolder з унікальною назвою для кожного item (наприклад, "product_image_${product.id}"). Використання однакової назви означає, що Android не знає, який view анімувати.

Shared Element поверх системної навігації (edge-to-edge): якщо view знаходиться близько до краю й вміст за navigation bar, WindowInsetsCompat може зміщувати layout, і кінцева позиція transition відрізняється від реальної. Виправляється через правильне застосування insets через ViewCompat.setOnApplyWindowInsetsListener.

Час розробки

Shared Element Transition між двома екранами (зображення + заголовок) займає 1 день. З підтримкою асинхронного завантаження зображень, кастомним transition set та зворотною анімацією, виділіть 1–2 дні. Вартість розраховується індивідуально.