material-components / material-components/material-components-android
[Motion] Unloaded ImageView when returning from MaterialContainerTransform
Nobody has claimed this yet.
- 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.

**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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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