title: How to materialContainerTransform live-loading in recyclerview to fragment?
body: <p><strong>my situation</strong><br>
  <a href="https://i.stack.imgur.com/OqVNg.gif" rel="nofollow noreferrer">my situaion</a></p>
  <p><strong>my goal</strong><br>
  The first one here is what I want.
  <a href="https://lh3.googleusercontent.com/tI4J5bPX5O1_T8EBo9jEchcWjFgDWvoo1WiivnlHNBAeSlekyZwzQY5oDfUSixVCTQfAVDqTfOTQgMIdmc1l_dAyD-V7sCBXqMUkGSezaf-pcpMSjuuF=w1064-v0" rel="nofollow noreferrer">https://lh3.googleusercontent.com/tI4J5bPX5O1_T8EBo9jEchcWjFgDWvoo1WiivnlHNBAeSlekyZwzQY5oDfUSixVCTQfAVDqTfOTQgMIdmc1l_dAyD-V7sCBXqMUkGSezaf-pcpMSjuuF=w1064-v0</a></p>
  <p>Recyclerview's itemView and ImageView are shared. But when the imageView is shared, it overlaps the toolbar. And it doesn't feel as expansive as I would like it to be.</p>
  <p>The structure of my activity and fragment is as follows.<br>
  activity(fragmentViewPager(RecyclerViewFragment(RecyclerView)))  -&gt;  detailFragment</p>
  <p><strong>RecyclerViewFragment</strong></p>
  <pre><code>override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
      super.onViewCreated(view, savedInstanceState)
      enterTransition = Hold()
  
      parentFragment?.postponeEnterTransition()
      view.doOnPreDraw {
          parentFragment?.startPostponedEnterTransition()
      }
  }
  </code></pre>
  <p><strong>Adapter</strong></p>
  <pre><code>inner class BodyViewHolder(private val binding: ItemBodyPictureBinding) :
      RecyclerView.ViewHolder(binding.root) {
      fun bind(item: AstroPicture) {
          with(binding.root.context) {
              val viewName = getString(R.string.shared_view).plus(layoutPosition)
              ViewCompat.setTransitionName(binding.cardContainer, viewName)
  
              val imageName = getString(R.string.shared_picture).plus(layoutPosition)
              ViewCompat.setTransitionName(binding.ivThumbs, imageName)
  
          }
  
          binding.astroPicture = item
          binding.executePendingBindings()
      }
  }
  
  
  private fun navigateToDetail(item: AstroPicture, view: View) {
      val cardView = view.findViewById&lt;CardView&gt;(R.id.card_container)
      val imageView = view.findViewById&lt;ImageView&gt;(R.id.iv_thumbs)
  
      val extras = FragmentNavigatorExtras(
          cardView to cardView.transitionName,
          imageView to imageView.transitionName
      )
  
      view.findNavController().navigate(
          R.id.navigate_to_detail_from_pager,
          bundleOf(
              &quot;item&quot; to item,
              &quot;view&quot; to cardView.transitionName,
              &quot;image&quot; to imageView.transitionName
          ),
          null,
          extras
      )
  }
  </code></pre>
  <p><strong>DetailFragment</strong></p>
  <pre><code>override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      initTransitionElement()
  }
  
  private fun initTransitionElement() {
      sharedElementEnterTransition = MaterialContainerTransform().apply {
          duration = 3050
          drawingViewId=R.id.nav_host
          isElevationShadowEnabled = true
      }
  }
  
  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
      super.onViewCreated(view, savedInstanceState)
      initTransitionName()
  }
  
  private fun initTransitionName() {
      arguments?.getString(&quot;view&quot;).let {
          ViewCompat.setTransitionName(binding.coordinatorLayout, it)
      }
  
      arguments?.getString(&quot;image&quot;).let {
          ViewCompat.setTransitionName(binding.ivImage, it)
      }
  }
  
  </code></pre>
  <p>I found this video, is there anything I can do about it?<br>
  As shown in the video, I want the image to fit the size of the view and feel expanded.<br>
  <a href="https://youtu.be/iuvmnxTRgRM?t=1127" rel="nofollow noreferrer">https://youtu.be/iuvmnxTRgRM?t=1127</a></p>