material-components / material-components/material-components-android

[Motion] Unloaded ImageView when returning from MaterialContainerTransform

Open
#1,707 13 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Feature: Transition
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:**
I'm using `MaterialContainerTransform` to transition from _Fragment A_, to a _Fragment B_ that contains a `RecyclerView` whose items have `ShapeableImageView`s. Note: _Fragment A_ is part of a `ViewPager2`, hosted by _Fragment Z_.

Transitionning from A to B works fine: transition is postponed until B's `RecyclerView` display is ready.
But when returning from B, we notice that images (that are loaded with Glide) are reset and blank.

![material_container_bug](https://user-images.githubusercontent.com/18646439/92931461-c6971e00-f443-11ea-8495-b0498723c382.gif)

**Expected behavior:**
Images loaded into `ImageView`s should not be reset ; those should be preserved in the return transition.
Also, why is `SheapeableImageView` showing black rounded corners ? This strange behavior of `ShapeableImageView` is also noticeable on Android Studio's layout preview (corners are then light grey).

**Source code:**

In Fragment Z:
```kotlin
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
postponeEnterTransition(1000, TimeUnit.MILLISECONDS)
// Configure ViewPager adapter...
}
```

In Fragment A:
```kotlin
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// Some view initialization code [...]
viewModel.liveData.observe(viewLifecycleOwner) {
adapter.submitList(it)
val fragmentZ = requireParentFragment()
fragmentZ.requireView().parent?.doOnPreDraw {
fragmentZ.startPostponedEnterTransition()
}
}
}

private fun displayFragmentB() {
// Root item view from the clicked element in RecyclerView. Has transitionName set in onBindViewHolder
val itemView = ...
val sharedElementExtras = FragmentNavigatortExtras(itemView to "some_item_id")
requireParentFragment().apply {
exitTransition = Hold().apply {
duration = 300
addTarget(R.id.fragment_z)
}
// Reset transition set by other navigation events
reenterTransition = null
}

findNavController().navigate(R.id.to_fragment_b, sharedElementExtras)
}
```

In Fragment B:
```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

sharedElementEnterTransition = MaterialContainerTransform().apply {
drawingViewId = R.id.nav_host_fragment
duration = 300
scrimColor = Color.TRANSPARENT
setAllContainerColors(themeColorSurface)
}
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)

postponeEnterTransition(500, TimeUnit.MILLISECONDS)
view.transitionName = "some_item_id"

viewModel.liveData.observe(viewLifecycleOwner) {
adapter.submitList(it)
view.parent?.doOnPreDraw {
startPostponedEnterTransition()
}
}
}
```

**Android API version:** 29 (Q)

**Material Library version:** 1.2.1

**Device:** Nokia 7.1, but also encountered on emulator.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Fragment A, B, and Z transition snippets and reproduce the return navigation on Android API 29 using MaterialContainerTransform, RecyclerView, Glide-loaded ImageViews, and ShapeableImageView. Compare the return transition with the reported blank images and black rounded corners; done means the images remain visible and the corner rendering is explained or corrected.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.