Added transitions between Fragment i.e. content fade with Fragment's Toolbars not being animated.

Piotr Zawadzki · Piotr Zawadzki · commit 75163900f974 · 2019-03-29T18:55:14.000+01:00
diff --git a/README.md b/README.md
@@ -9,13 +9,14 @@ This is a sample project where I experimented with different aspects of the [And
 - custom handling of implicit deep links (more on that later)
 - passing arguments between Fragments via [Safe Args](https://developer.android.com/guide/navigation/navigation-pass-data#Safe-args)
 - starting Fragments for result and waiting for that result (similar to Activity's `startActivityForResult` and `onActivityResult`)
+- transitions between fragments with shared Toolbar
 
 There's no MVP/MVVM/MVI here, no dependency injection - just the Navigation Component to make it simple.
 
 ## How does it look like?
 
 ### App
-<img src ="./art/playground_app.gif" width="360" />
+<img src ="./art/navigation_playground_app.gif" width="360" />
 
 ### Graph
 <img src ="./art/nav_graph.png" width="640" />
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/ApplyFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/ApplyFragment.kt
@@ -11,7 +11,7 @@ class ApplyFragment : BaseFragment() {
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        // Inflate the layout for this fragment
+        initEnterTransitions()
         return inflater.inflate(R.layout.fragment_apply, container, false)
     }
 }
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/BaseFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/BaseFragment.kt
@@ -1,16 +1,20 @@
 package com.github.zawadz88.navigationcomponentplayground
 
 import android.os.Bundle
+import android.transition.ChangeBounds
+import android.transition.Fade
 import androidx.annotation.CallSuper
 import androidx.annotation.IdRes
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
 import androidx.navigation.NavDirections
 import androidx.navigation.NavOptions
 import androidx.navigation.Navigator
+import androidx.navigation.fragment.FragmentNavigatorExtras
 import androidx.navigation.fragment.findNavController
 import com.github.zawadz88.navigationcomponentplayground.navigation.BackNavigationListener
 import com.github.zawadz88.navigationcomponentplayground.navigation.BackNavigationResult
+import kotlinx.android.synthetic.main.appbar.appBarLayout
 import kotlinx.android.synthetic.main.appbar.toolbar
 import timber.log.Timber
 import kotlin.properties.Delegates
@@ -30,6 +34,8 @@ abstract class BaseFragment : Fragment() {
     private val requestCode: Int
         get() = arguments?.getInt(ARGUMENT_NAVIGATION_REQUEST_CODE, REQUEST_CODE_NOT_SET) ?: REQUEST_CODE_NOT_SET
 
+    private val appBarTransition: String by lazy { requireActivity().getString(R.string.transition_name_appbar) }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         Timber.d("onCreate: ${this::class.java.simpleName}")
@@ -63,7 +69,21 @@ abstract class BaseFragment : Fragment() {
         }
     }
 
-    fun navigateForResult(
+    protected fun navigateForResultWithAnimation(
+        requestCode: Int, navDirections: NavDirections, navOptions: NavOptions? = null
+    ) {
+        val extras = FragmentNavigatorExtras(appBarLayout to appBarTransition)
+        this.exitTransition = Fade()
+        navigateForResult(
+            resId = navDirections.actionId,
+            requestCode = requestCode,
+            args = navDirections.arguments,
+            navOptions = navOptions,
+            navigatorExtras = extras
+        )
+    }
+
+    protected fun navigateForResult(
         requestCode: Int, navDirections: NavDirections, navOptions: NavOptions? = null,
         navigatorExtras: Navigator.Extras? = null
     ) =
@@ -75,7 +95,7 @@ abstract class BaseFragment : Fragment() {
             navigatorExtras = navigatorExtras
         )
 
-    fun navigateForResult(
+    protected fun navigateForResult(
         @IdRes resId: Int, requestCode: Int, args: Bundle? = null, navOptions: NavOptions? = null,
         navigatorExtras: Navigator.Extras? = null
     ) {
@@ -85,6 +105,12 @@ abstract class BaseFragment : Fragment() {
         findNavController().navigate(resId, argsWithRequestCode, navOptions, navigatorExtras)
     }
 
+    protected fun navigateForwardWithAnimation(navDirections: NavDirections) {
+        val extras = FragmentNavigatorExtras(appBarLayout to appBarTransition)
+        this.exitTransition = Fade()
+        findNavController().navigate(navDirections, extras)
+    }
+
     protected fun navigateBackWithResult(resultCode: Int, data: Bundle? = null): Boolean =
         navigateBackWithResult(DESTINATION_NOT_SET, BackNavigationResult(requestCode, resultCode, data))
 
@@ -93,6 +119,11 @@ abstract class BaseFragment : Fragment() {
 
     protected fun navigateUp(): Boolean = findNavController().navigateUp()
 
+    protected fun initEnterTransitions() {
+        sharedElementEnterTransition = ChangeBounds()
+        enterTransition = Fade()
+    }
+
     private fun navigateBackWithResult(@IdRes destination: Int, result: BackNavigationResult): Boolean {
         val childFragmentManager = requireActivity().supportFragmentManager.findFragmentById(R.id.nav_host_fragment)?.childFragmentManager
         var backStackListener: FragmentManager.OnBackStackChangedListener by Delegates.notNull()
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/HomeFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/HomeFragment.kt
@@ -11,7 +11,9 @@ import android.view.ViewGroup
 import androidx.core.app.NotificationCompat
 import androidx.core.content.ContextCompat
 import androidx.navigation.NavDeepLinkBuilder
-import androidx.navigation.fragment.findNavController
+import com.github.zawadz88.navigationcomponentplayground.HomeFragmentDirections.Companion.actionHomeFragmentToLoginNoPasswordFragment
+import com.github.zawadz88.navigationcomponentplayground.HomeFragmentDirections.Companion.actionHomeFragmentToLoginWithPasswordFragment
+import com.github.zawadz88.navigationcomponentplayground.HomeFragmentDirections.Companion.actionHomeFragmentToOfferFragment
 import kotlinx.android.synthetic.main.fragment_home.fragmentLoginButton
 import kotlinx.android.synthetic.main.fragment_home.fragmentLoginWithPasswordButton
 import kotlinx.android.synthetic.main.fragment_home.fragmentOfferButton
@@ -36,13 +38,13 @@ class HomeFragment : BaseFragment() {
     override fun onActivityCreated(savedInstanceState: Bundle?) {
         super.onActivityCreated(savedInstanceState)
         fragmentLoginButton.setOnClickListener {
-            findNavController().navigate(HomeFragmentDirections.actionHomeFragmentToLoginNoPasswordFragment())
+            navigateForwardWithAnimation(actionHomeFragmentToLoginNoPasswordFragment())
         }
         fragmentLoginWithPasswordButton.setOnClickListener {
-            findNavController().navigate(HomeFragmentDirections.actionHomeFragmentToLoginWithPasswordFragment())
+            navigateForwardWithAnimation(actionHomeFragmentToLoginWithPasswordFragment())
         }
         fragmentOfferButton.setOnClickListener {
-            findNavController().navigate(HomeFragmentDirections.actionHomeFragmentToOfferFragment(1234))
+            navigateForwardWithAnimation(actionHomeFragmentToOfferFragment(1234))
         }
         sendNotificationButton.setOnClickListener { prepareAndSendNotification() }
     }
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/OfferFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/OfferFragment.kt
@@ -5,7 +5,6 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.Toast
-import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
 import com.github.zawadz88.navigationcomponentplayground.login.NAVIGATION_RESULT_LOGGED_IN
 import com.github.zawadz88.navigationcomponentplayground.navigation.BackNavigationListener
@@ -27,7 +26,7 @@ class OfferFragment : BackNavigationListener, BaseFragment() {
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        // Inflate the layout for this fragment
+        initEnterTransitions()
         return inflater.inflate(R.layout.fragment_offer, container, false)
     }
 
@@ -36,10 +35,10 @@ class OfferFragment : BackNavigationListener, BaseFragment() {
         Toast.makeText(requireContext(), "myId: $myId", Toast.LENGTH_SHORT).show()
         fragmentApplyButton.setOnClickListener { goToApply() }
         fragmentLoginWithPasswordButton.setOnClickListener {
-            navigateForResult(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginWithPasswordFragment())
+            navigateForResultWithAnimation(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginWithPasswordFragment())
         }
         fragmentLoginButton.setOnClickListener {
-            navigateForResult(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginNoPaswordFragment())
+            navigateForResultWithAnimation(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginNoPaswordFragment())
         }
     }
 
@@ -53,6 +52,6 @@ class OfferFragment : BackNavigationListener, BaseFragment() {
     }
 
     private fun goToApply() {
-        findNavController().navigate(OfferFragmentDirections.actionOfferFragmentToApplyFragment())
+        navigateForwardWithAnimation(OfferFragmentDirections.actionOfferFragmentToApplyFragment())
     }
 }
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/DeepLinkLoginFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/DeepLinkLoginFragment.kt
@@ -17,10 +17,7 @@ class DeepLinkLoginFragment : BaseFragment() {
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
-    ): View? {
-        // Inflate the layout for this fragment
-        return inflater.inflate(R.layout.fragment_deep_link_login, container, false)
-    }
+    ): View? = inflater.inflate(R.layout.fragment_deep_link_login, container, false)
 
     override fun onActivityCreated(savedInstanceState: Bundle?) {
         super.onActivityCreated(savedInstanceState)
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/LoginNoPasswordFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/LoginNoPasswordFragment.kt
@@ -21,7 +21,7 @@ class LoginNoPasswordFragment : BaseFragment(), BackNavigationListener {
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        // Inflate the layout for this fragment
+        initEnterTransitions()
         return inflater.inflate(R.layout.fragment_login_no_password, container, false)
     }
 
@@ -31,7 +31,7 @@ class LoginNoPasswordFragment : BaseFragment(), BackNavigationListener {
             navigateBackWithResult(NAVIGATION_RESULT_OK)
         }
         fragmentLoginWithPasswordButton.setOnClickListener {
-            navigateForResult(REQUEST_CODE_COLLECTIVE_LOGIN, LoginNoPasswordFragmentDirections.actionLoginNoPasswordFragmentToLoginWithPasswordFragment())
+            navigateForResultWithAnimation(REQUEST_CODE_COLLECTIVE_LOGIN, LoginNoPasswordFragmentDirections.actionLoginNoPasswordFragmentToLoginWithPasswordFragment())
         }
     }
 
diff --git a/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/LoginWithPasswordFragment.kt b/app/src/main/java/com/github/zawadz88/navigationcomponentplayground/login/LoginWithPasswordFragment.kt
@@ -15,7 +15,7 @@ class LoginWithPasswordFragment : BaseFragment() {
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        // Inflate the layout for this fragment
+        initEnterTransitions()
         return inflater.inflate(R.layout.fragment_login_with_password, container, false)
     }
 
diff --git a/app/src/main/res/layout/appbar.xml b/app/src/main/res/layout/appbar.xml
@@ -3,6 +3,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/appBarLayout"
+        android:transitionName="@string/transition_name_appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:theme="@style/AppTheme.AppBarOverlay">
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
@@ -18,8 +18,7 @@
             app:destination="@id/loginNoPasswordFragment" />
         <action
             android:id="@+id/action_homeFragment_to_loginWithPasswordFragment"
-            app:destination="@id/loginWithPasswordFragment"
-            app:launchSingleTop="false" />
+            app:destination="@id/loginWithPasswordFragment" />
     </fragment>
     <fragment
         android:id="@+id/loginWithPasswordFragment"
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -8,4 +8,5 @@
     <string name="fragment_label_login_no_password">Login without password screen</string>
     <string name="fragment_label_apply">Apply screen</string>
     <string name="fragment_label_deep_link">Deep link screen</string>
+    <string name="transition_name_appbar">appbar</string>
 </resources>
diff --git a/art/navigation_playground_app.gif b/art/navigation_playground_app.gif
diff --git a/art/playground_app.gif b/art/playground_app.gif

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ class ApplyFragment : BaseFragment() {`
`11`	`11`	`inflater: LayoutInflater, container: ViewGroup?,`
`12`	`12`	`savedInstanceState: Bundle?`
`13`	`13`	`): View? {`
`14`		`- // Inflate the layout for this fragment`
	`14`	`+ initEnterTransitions()`
`15`	`15`	`return inflater.inflate(R.layout.fragment_apply, container, false)`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@ import android.view.LayoutInflater`
`5`	`5`	`import android.view.View`
`6`	`6`	`import android.view.ViewGroup`
`7`	`7`	`import android.widget.Toast`
`8`		`-import androidx.navigation.fragment.findNavController`
`9`	`8`	`import androidx.navigation.fragment.navArgs`
`10`	`9`	`import com.github.zawadz88.navigationcomponentplayground.login.NAVIGATION_RESULT_LOGGED_IN`
`11`	`10`	`import com.github.zawadz88.navigationcomponentplayground.navigation.BackNavigationListener`
`@@ -27,7 +26,7 @@ class OfferFragment : BackNavigationListener, BaseFragment() {`
`27`	`26`	`inflater: LayoutInflater, container: ViewGroup?,`
`28`	`27`	`savedInstanceState: Bundle?`
`29`	`28`	`): View? {`
`30`		`- // Inflate the layout for this fragment`
	`29`	`+ initEnterTransitions()`
`31`	`30`	`return inflater.inflate(R.layout.fragment_offer, container, false)`
`32`	`31`	`}`
`33`	`32`
`@@ -36,10 +35,10 @@ class OfferFragment : BackNavigationListener, BaseFragment() {`
`36`	`35`	`Toast.makeText(requireContext(), "myId: $myId", Toast.LENGTH_SHORT).show()`
`37`	`36`	`fragmentApplyButton.setOnClickListener { goToApply() }`
`38`	`37`	`fragmentLoginWithPasswordButton.setOnClickListener {`
`39`		`- navigateForResult(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginWithPasswordFragment())`
	`38`	`+ navigateForResultWithAnimation(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginWithPasswordFragment())`
`40`	`39`	`}`
`41`	`40`	`fragmentLoginButton.setOnClickListener {`
`42`		`- navigateForResult(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginNoPaswordFragment())`
	`41`	`+ navigateForResultWithAnimation(REQUEST_CODE_LOGIN, OfferFragmentDirections.actionOfferFragmentToLoginNoPaswordFragment())`
`43`	`42`	`}`
`44`	`43`	`}`
`45`	`44`
`@@ -53,6 +52,6 @@ class OfferFragment : BackNavigationListener, BaseFragment() {`
`53`	`52`	`}`
`54`	`53`
`55`	`54`	`private fun goToApply() {`
`56`		`- findNavController().navigate(OfferFragmentDirections.actionOfferFragmentToApplyFragment())`
	`55`	`+ navigateForwardWithAnimation(OfferFragmentDirections.actionOfferFragmentToApplyFragment())`
`57`	`56`	`}`
`58`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ class LoginNoPasswordFragment : BaseFragment(), BackNavigationListener {`
`21`	`21`	`inflater: LayoutInflater, container: ViewGroup?,`
`22`	`22`	`savedInstanceState: Bundle?`
`23`	`23`	`): View? {`
`24`		`- // Inflate the layout for this fragment`
	`24`	`+ initEnterTransitions()`
`25`	`25`	`return inflater.inflate(R.layout.fragment_login_no_password, container, false)`
`26`	`26`	`}`
`27`	`27`
`@@ -31,7 +31,7 @@ class LoginNoPasswordFragment : BaseFragment(), BackNavigationListener {`
`31`	`31`	`navigateBackWithResult(NAVIGATION_RESULT_OK)`
`32`	`32`	`}`
`33`	`33`	`fragmentLoginWithPasswordButton.setOnClickListener {`
`34`		`- navigateForResult(REQUEST_CODE_COLLECTIVE_LOGIN, LoginNoPasswordFragmentDirections.actionLoginNoPasswordFragmentToLoginWithPasswordFragment())`
	`34`	`+ navigateForResultWithAnimation(REQUEST_CODE_COLLECTIVE_LOGIN, LoginNoPasswordFragmentDirections.actionLoginNoPasswordFragmentToLoginWithPasswordFragment())`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ class LoginWithPasswordFragment : BaseFragment() {`
`15`	`15`	`inflater: LayoutInflater, container: ViewGroup?,`
`16`	`16`	`savedInstanceState: Bundle?`
`17`	`17`	`): View? {`
`18`		`- // Inflate the layout for this fragment`
	`18`	`+ initEnterTransitions()`
`19`	`19`	`return inflater.inflate(R.layout.fragment_login_with_password, container, false)`
`20`	`20`	`}`
`21`	`21`