Is it possible to pre-load certain Fragments with the Navigation Architecture Component from Android Jetpack in order to get smooth transitions?
Without pre-loading I'll never get smooth transitions for the first navigate() calls (even on high-end devices). I'm currently using the app:enterAnim, app:exitAnim etc. tags in my nav_graph.xml.
I'm trying to accomplish smooth transitions like in the Telegram app (I think they're pre-loading everything and just animating in the Fragments like Views).
Is there maybe some hidden XML attribute app:preload="true"?
I'm not only asking for full-on answers to my problem - little optimizations are welcome, too!
How far I've come:
anim_nav_enter.xml
<set
android:duration="200"
android:shareInterpolator="true">
<!-- Fade in from the right on enter -->
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<translate
android:fromXDelta="10%"
android:toXDelta="0%" />
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
anim_nav_exit.xml
<set
android:duration="300"
android:shareInterpolator="true">
<!-- Fade out on exit -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
anim_nav_pop_enter.xml
<set
android:duration="200"
android:shareInterpolator="true">
<!-- Fade in on pop enter -->
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
anim_nav_pop_exit.xml
<set
android:duration="200"
android:shareInterpolator="true">
<!-- Fade out to the right on pop exit -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<translate
android:fromXDelta="0%"
android:toXDelta="10%" />
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
BaseFragment.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
allowEnterTransitionOverlap = true
allowReturnTransitionOverlap = true
}
override fun onCreateAnimation(transit: Int, enter: Boolean, nextAnim: Int): Animation? {
var animation = super.onCreateAnimation(transit, enter, nextAnim)
if (animation == null && nextAnim != 0) {
animation = AnimationUtils.loadAnimation(activity, nextAnim)
}
if (animation != null) {
view?.setLayerType(View.LAYER_TYPE_HARDWARE, null)
animation.setAnimationListener(object : AnimationListener {
override fun onAnimationRepeat(animation: Animation?) {
}
override fun onAnimationStart(animation: Animation?) {
}
override fun onAnimationEnd(animation: Animation?) {
view?.setLayerType(View.LAYER_TYPE_NONE, null)
}
})
}
return animation
}