fix: explode transition issue by setting transitionGroup to false

Author: SmartToolFactory

External-Tutorial-GridToPager/src/main/res/transition/grid_exit_transition.xml

@@ -21,7 +21,7 @@
     <fade>
         <targets android:targetId="@id/card_view" />
     </fade>
-<!--    <explode>-->
-<!--        <targets android:targetId="@id/recycler_view"/>-->
-<!--    </explode>-->
+    <explode>
+        <targets android:targetId="@id/recycler_view" />
+    </explode>
 </transitionSet>

README.md

@@ -324,7 +324,11 @@ of ***Transition*** start and end point to same value.
 #### Note: 
 🔥🔥🔥 In tutorial 2-4 and 2-5, having same background color for both fragments causing second fragment's **ENTER TRANSITION(CircularReveal and Slide.BOTTOM)** to not work.
 So when using **Transitions** that extend ```Visiblity``` class such as Slide, or Fade be careful about background color.
-Either set callback and set start and end properties for starging and ending scenes with
+
+To prevent this use one of the solutions below:
+
+* Set ```android:transitionGroup="false"``` on layout with fragments
+* Set callback and set start and end properties for starting and ending scenes with
 
 ```
         setEnterSharedElementCallback(object : SharedElementCallback() {
@@ -357,7 +361,7 @@ Either set callback and set start and end properties for starging and ending sce
     }
 ```
 
-or use **custom transitions** that extend either ```Transition``` or ```Visibility``` and force value changes.
+* Use **custom transitions** that extend either ```Transition``` or ```Visibility``` and force value changes.
 
 * ⚠️ Transitions that extend ```Visibility``` such as ```Slide```, ```Fade```,  or ```Explode``` depends on ***visibility*** of the view. If 
 visibility is changed from ```View.INVISIBLE``` to ```View.VISIBLE``` ```onAppear``` method of ```Visibility``` class is called, if visibility changes
@@ -367,6 +371,13 @@ from backwards.
 * ⚠️ When current transition is **EXIT** or **RETURN** transition  ```captureEndValues``` is not called, because of this use a transition that extends ```Visibility``` for ```exitTransition``` and ```returnTransition``` to start,
 and be aware that Animator from ```onDisAppear``` is called while current transition is exit or return.
 
+#### Note: Breaker of chains — Transition Groups
+
+By default all views under a parent/ancestor with a background set (even transparent ones) will be automatically deemed a group. If you need to break them up like we here with a RecyclerView as the shared-root-white-backgrounded layout with transparent child Item views. You’ll need to set the **layout with the background** to **transitionGroup=false.**
+But on the other hand, since the Items are “background-less” themselves, to prevent an out-of-body experience you’ll need to do the opposite and set transitionGroup=true on the Item layouts for all the child views in that Item to move together.
+
+
+
 ### Resources and References
 
 [CodeLab Property Animation](https://codelabs.developers.google.com/codelabs/advanced-android-kotlin-training-property-animation/#0)
@@ -391,6 +402,8 @@ and be aware that Animator from ```onDisAppear``` is called while current transi
 <br>
 [Reveal Transition](https://halfthought.wordpress.com/2014/11/07/reveal-transition/)
 <br>
+[Android — Inbox Material Transitions for RecyclerView](https://medium.com/workday-engineering/android-inbox-material-transitions-for-recyclerview-7ae3cb241aed)
+<br>
 [Plaid App](https://github.com/android/plaid)
 
 ### TODOs:

Tutorial3-1Transitions/src/main/AndroidManifest.xml

@@ -23,13 +23,17 @@
         <activity android:name=".chapter1_activity_transitions.Activity1_2Details" />
         <activity android:name=".chapter1_activity_transitions.Activity1_3RecyclerViewToViewPager2Transition" />
         <activity android:name=".chapter1_activity_transitions.Activity1_3Details" />
+        <activity android:name=".chapter1_activity_transitions.Activity1_5Details" />
 
+        <!-- Fragment Tutorials -->
         <activity
             android:name=".chapter1_activity_transitions.Activity1_4RVtoVP2Transition"
             android:theme="@style/Theme.App.Home" />
         <activity
             android:name=".chapter1_activity_transitions.Activity1_4Details"
             android:theme="@style/Theme.App.Details" />
+        <activity android:name=".chapter1_activity_transitions.Activity1_5RecyclerViewTransition2" />
+
         <activity android:name=".chapter2_fragment_transitions.Activity2_1FragmentTransitionsBasics" />
         <activity android:name=".chapter2_fragment_transitions.Activity2_2FragmentTransitionLifeCycles" />
         <activity

Tutorial3-1Transitions/src/main/java/com/smarttoolfactory/tutorial3_1transitions/MainActivity.kt

@@ -94,6 +94,13 @@ class MainActivity : AppCompatActivity(), BaseAdapter.OnRecyclerViewItemClickLis
             )
         )
 
+        activityClassModels.add(
+            ActivityClassModel(
+                Activity1_5RecyclerViewTransition2::class.java,
+                getString(R.string.activity1_5)
+            )
+        )
+
         activityClassModels.add(
             ActivityClassModel(
                 Activity2_1FragmentTransitionsBasics::class.java,

Tutorial3-1Transitions/src/main/java/com/smarttoolfactory/tutorial3_1transitions/adapter/itemdecoration/GridSpacingItemDecoration.kt

@@ -0,0 +1,33 @@
+package com.smarttoolfactory.tutorial3_1transitions.adapter.itemdecoration
+
+import android.graphics.Rect
+import android.view.View
+import androidx.recyclerview.widget.RecyclerView
+
+class GridSpacingItemDecoration(
+    private val spanCount: Int,
+    private val spacing: Int,
+) : RecyclerView.ItemDecoration() {
+
+    override fun getItemOffsets(
+        outRect: Rect,
+        view: View,
+        parent: RecyclerView,
+        state: RecyclerView.State
+    ) {
+        val position = parent.getChildAdapterPosition(view)
+
+        val column = (position) % spanCount
+
+        if (column == 0) {
+            outRect.left = spacing
+        } else {
+            outRect.left = 0
+        }
+        outRect.right = spacing
+        outRect.bottom = 0
+        outRect.top = spacing
+
+    }
+
+}