Shared element transition for BannerFragment.kt and ArticleDetailFragment

Author: RajashekarRaju

app/src/main/java/com/developerbreach/developerbreach/view/banner/BannerFragment.kt

@@ -1,5 +1,6 @@
 package com.developerbreach.developerbreach.view.banner
 
+import android.graphics.Color
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
@@ -8,6 +9,7 @@ import androidx.fragment.app.Fragment
 import androidx.lifecycle.ViewModelProvider
 import androidx.navigation.fragment.findNavController
 import com.developerbreach.developerbreach.databinding.FragmentBannerBinding
+import com.google.android.material.transition.MaterialContainerTransform
 
 
 class BannerFragment : Fragment() {
@@ -19,6 +21,11 @@ class BannerFragment : Fragment() {
         val bannerUrlLink = BannerFragmentArgs.fromBundle(requireArguments()).bannerUrlLink
         val factory = BannerViewModelFactory(requireActivity().application, bannerUrlLink)
         viewModel = ViewModelProvider(this, factory)[BannerViewModel::class.java]
+
+        sharedElementEnterTransition = MaterialContainerTransform().apply {
+            this.duration = 300L
+            this.containerColor = Color.BLACK
+        }
     }
 
     override fun onCreateView(

app/src/main/java/com/developerbreach/developerbreach/view/detail/ArticleDetailBindingAdapter.kt

@@ -1,10 +1,13 @@
 package com.developerbreach.developerbreach.view.detail
 
+import android.view.ViewGroup
 import android.widget.Button
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.databinding.BindingAdapter
 import androidx.navigation.findNavController
+import androidx.transition.Fade
+import androidx.transition.TransitionManager
 import com.bumptech.glide.Glide
 import com.developerbreach.developerbreach.R
 import com.developerbreach.developerbreach.controller.AppNavDirections
@@ -16,10 +19,12 @@ import com.google.android.material.snackbar.Snackbar
 fun ImageView.setImageResource(
     urlString: String?
 ) {
+    val imageView = this
     Glide.with(this.context).load(urlString).into(this)
 
     this.setOnClickListener {
-        AppNavDirections(findNavController()).detailToBanner(urlString)
+        TransitionManager.beginDelayedTransition(imageView.rootView as ViewGroup, Fade())
+        AppNavDirections(findNavController()).detailToBanner(urlString, this)
     }
 }
 

app/src/main/res/layout/fragment_article_detail.xml

@@ -47,12 +47,11 @@
                     android:contentDescription="@string/article_image_content_description"
                     android:fitsSystemWindows="true"
                     android:scaleType="centerCrop"
+                    android:transitionName="@{viewModel.articleDetailData.banner.toString()}"
                     app:bindCollapsingBannerImage="@{viewModel.articleDetailData.banner}"
                     app:layout_collapseMode="parallax"
                     tools:layout_gravity="center"
-                    tools:layout_height="@dimen/image_size_tools"
-                    tools:layout_width="@dimen/image_size_tools"
-                    tools:src="@drawable/ic_placeholder" />
+                    tools:src="@drawable/hourglass" />
 
                 <androidx.appcompat.widget.Toolbar
                     android:id="@+id/detail_fragment_toolbar"

app/src/main/res/layout/fragment_banner.xml

@@ -23,10 +23,13 @@
         <com.github.chrisbanes.photoview.PhotoView
             android:id="@+id/banner_full_screen_photo_view"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
+            android:layout_height="300dp"
             android:contentDescription="@string/article_banner_image_content_description"
+            android:transitionName="@{viewModel.bannerUrl.toString()}"
             app:bindBannerWithZoom="@{viewModel.bannerUrl}"
-            tools:src="@drawable/ic_placeholder" />
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:src="@drawable/hourglass" />
 
         <ImageView
             android:id="@+id/close_banner_fragment_image_view"