Skip to content

Commit f136384

Browse files
SmartToolFactorySmartToolFactory
committed
fix:Tutorial 2-5 alternative issue with SharedElementCallback
1 parent 796da30 commit f136384

File tree

6 files changed

+109
-19
lines changed

6 files changed

+109
-19
lines changed

‎README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,41 @@ of ***Transition*** start and end point to same value.
318318

319319
#### Note:
320320
🔥🔥🔥 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
321+
So when using **Transitions** that extend ```Visiblity``` class such as Slide, or Fade be careful about background color
322+
Either set callback and set start and end properties for scene with
323+
324+
```
325+
setEnterSharedElementCallback(object : SharedElementCallback() {
326+
327+
override fun onSharedElementStart(
328+
sharedElementNames: MutableList<String>?,
329+
sharedElements: MutableList<View>?,
330+
sharedElementSnapshots: MutableList<View>?
331+
) {
332+
super.onSharedElementStart(
333+
sharedElementNames,
334+
sharedElements,
335+
sharedElementSnapshots
336+
)
337+
viewImageBackground.visibility = View.INVISIBLE
338+
recyclerView.visibility = View.INVISIBLE
339+
}
340+
341+
override fun onSharedElementEnd(
342+
sharedElementNames: MutableList<String>?,
343+
sharedElements: MutableList<View>?,
344+
sharedElementSnapshots: MutableList<View>?
345+
) {
346+
super.onSharedElementEnd(sharedElementNames, sharedElements, sharedElementSnapshots)
347+
viewImageBackground.visibility = View.VISIBLE
348+
recyclerView.visibility = View.VISIBLE
349+
}
350+
351+
})
352+
}
353+
```
354+
355+
or use **custom transitions** that extend either ```Transition``` or ```Visibility```
321356

322357
### Resources and References
323358
Wonderful and very helpful resources, check them out 🤩😍

‎Tutorial3-1Transitions/src/main/java/com/smarttoolfactory/tutorial3_1transitions/chapter2_fragment_transitions/Fragment2_5MagazineDetailAlt.kt

Lines changed: 58 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import android.view.animation.AccelerateDecelerateInterpolator
99
import android.view.animation.AnimationUtils
1010
import android.widget.ImageView
1111
import android.widget.TextView
12+
import androidx.core.app.SharedElementCallback
1213
import androidx.core.view.doOnNextLayout
1314
import androidx.core.view.doOnPreDraw
1415
import androidx.fragment.app.Fragment
@@ -63,15 +64,13 @@ class Fragment2_5MagazineDetailAlt : Fragment() {
6364
// Return(When fragment is popped up) transition for non-shared Views
6465
returnTransition = createReturnTransition(view)
6566

66-
// // 🔥 Set up Transition Overlapping
67-
// allowEnterTransitionOverlap = false
68-
// allowReturnTransitionOverlap = false
6967
}
7068

7169
private fun setUpSharedElementTransition(view: View) {
7270

73-
val viewImageBackground: View = view.findViewById(R.id.viewImageBackground)
74-
// viewImageBackground.visibility = View.INVISIBLE
71+
// allowEnterTransitionOverlap = false
72+
73+
setSharedElementCallback(view)
7574

7675
/*
7776
🔥 Set sharedElementReturnTransition, because both
@@ -92,6 +91,49 @@ class Fragment2_5MagazineDetailAlt : Fragment() {
9291
sharedElementEnterTransition = moveTransition
9392
}
9493

94+
95+
/**
96+
* Overriding onSharedElementStart, and onSharedElementEnd
97+
* creates start and end values for transitions that extend ```Visibility```.
98+
* Without this start and end values are same for view background.
99+
*/
100+
private fun setSharedElementCallback(view: View) {
101+
102+
val viewImageBackground = view.findViewById<View>(R.id.viewImageBackground)
103+
val recyclerView = view.findViewById<RecyclerView>(R.id.recyclerView)
104+
105+
viewImageBackground.visibility = View.INVISIBLE
106+
recyclerView.visibility = View.INVISIBLE
107+
108+
setEnterSharedElementCallback(object : SharedElementCallback() {
109+
110+
override fun onSharedElementStart(
111+
sharedElementNames: MutableList<String>?,
112+
sharedElements: MutableList<View>?,
113+
sharedElementSnapshots: MutableList<View>?
114+
) {
115+
super.onSharedElementStart(
116+
sharedElementNames,
117+
sharedElements,
118+
sharedElementSnapshots
119+
)
120+
viewImageBackground.visibility = View.INVISIBLE
121+
recyclerView.visibility = View.INVISIBLE
122+
}
123+
124+
override fun onSharedElementEnd(
125+
sharedElementNames: MutableList<String>?,
126+
sharedElements: MutableList<View>?,
127+
sharedElementSnapshots: MutableList<View>?
128+
) {
129+
super.onSharedElementEnd(sharedElementNames, sharedElements, sharedElementSnapshots)
130+
viewImageBackground.visibility = View.VISIBLE
131+
recyclerView.visibility = View.VISIBLE
132+
}
133+
134+
})
135+
}
136+
95137
private fun createEnterTransition(view: View): Transition {
96138

97139
val tvBody = view.findViewById<View>(R.id.recyclerView)
@@ -100,16 +142,17 @@ class Fragment2_5MagazineDetailAlt : Fragment() {
100142

101143
val transitionSetEnter = TransitionSet()
102144

103-
val slideFromBottom = Slide(Gravity.BOTTOM).apply {
104-
interpolator = AnimationUtils.loadInterpolator(
105-
requireContext(),
106-
android.R.interpolator.linear_out_slow_in
107-
)
108-
startDelay = 400
109-
duration = 600
110-
excludeTarget(viewImageBackground, true)
111-
addTarget(tvBody)
112-
}
145+
val slideFromBottom = Slide(Gravity.BOTTOM)
146+
.apply {
147+
interpolator = AnimationUtils.loadInterpolator(
148+
requireContext(),
149+
android.R.interpolator.linear_out_slow_in
150+
)
151+
startDelay = 400
152+
duration = 600
153+
excludeTarget(viewImageBackground, true)
154+
addTarget(tvBody)
155+
}
113156

114157

115158
val endRadius = hypot(

‎Tutorial3-1Transitions/src/main/java/com/smarttoolfactory/tutorial3_1transitions/chapter2_fragment_transitions/Fragment2_5ToolbarList.kt

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,23 @@ class Fragment2_5ToolbarList : Fragment() {
107107
exitTransition =
108108
Fade(Fade.MODE_OUT)
109109
.apply {
110-
addTarget(view)
111110
duration = 500
111+
addTarget(view)
112112
}
113113

114114
(exitTransition as? Transition)?.addListener(object : TransitionXAdapter() {
115115

116+
override fun onTransitionStart(transition: Transition) {
117+
super.onTransitionStart(transition)
118+
Toast.makeText(
119+
requireContext(),
120+
"EXIT onTransitionStart time: $animationDuration",
121+
Toast.LENGTH_SHORT
122+
).show()
123+
}
124+
116125
override fun onTransitionEnd(transition: Transition) {
126+
117127
super.onTransitionEnd(transition)
118128
Toast.makeText(
119129
requireContext(),
@@ -123,6 +133,7 @@ class Fragment2_5ToolbarList : Fragment() {
123133
}
124134
})
125135

136+
126137
reenterTransition =
127138
Fade(Fade.MODE_IN)
128139
.apply {

‎Tutorial3-1Transitions/src/main/res/layout/fragment2_5toolbar_detail.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
xmlns:tools="http://schemas.android.com/tools"
55
android:layout_width="match_parent"
66
android:layout_height="match_parent"
7-
android:background="#dce6f1">
7+
android:background="#f6f8fb">
88

99
<com.google.android.material.appbar.AppBarLayout
1010
android:id="@+id/appBar"

‎Tutorial3-1Transitions/src/main/res/layout/fragment2_5toolbar_detail_alt.xml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
xmlns:app="http://schemas.android.com/apk/res-auto"
66
xmlns:tools="http://schemas.android.com/tools"
77
android:layout_width="match_parent"
8-
android:layout_height="match_parent">
8+
android:layout_height="match_parent"
9+
android:background="#f6f8fb">
910

1011
<View
1112
android:id="@+id/viewImageBackground"

‎Tutorial3-1Transitions/src/main/res/layout/fragment2_5toolbar_list.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
xmlns:tools="http://schemas.android.com/tools"
55
android:layout_width="match_parent"
66
android:layout_height="match_parent"
7-
android:background="#dce6f1"
7+
android:background="#f6f8fb"
88
tools:context=".chapter2_fragment_transitions.Activity2_5FragmentTransitionsWithToolbar">
99

1010
<com.google.android.material.appbar.AppBarLayout

0 commit comments

Comments
 (0)