From d5dbf94a83cd8a65f5016b708af8403eddf48606 Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Fri, 22 Mar 2024 16:14:03 -0700 Subject: [PATCH 1/6] add setup code to create a new cross-fragment transition using MaterialSharedAxis --- .../predictiveback/.idea/migrations.xml | 10 ++++ .../predictiveback/.idea/misc.xml | 10 ++++ .../predictiveback/.idea/vcs.xml | 6 ++ .../predictiveback/.idea/workspace.xml | 47 +++++++++++++++ .../platform/ui/predictiveback/PBAnimation.kt | 7 ++- .../ui/predictiveback/PBListFragment.kt | 5 ++ .../PBMaterialSharedAxisAnimations.kt | 43 +++++++++++++ .../res/layout/fragment_animation_list.xml | 36 +++++++++++ .../layout/fragment_material_shared_axis.xml | 60 +++++++++++++++++++ .../src/main/res/navigation/nav_graph.xml | 8 +++ .../src/main/res/values/strings.xml | 1 + 11 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 samples/user-interface/predictiveback/.idea/migrations.xml create mode 100644 samples/user-interface/predictiveback/.idea/misc.xml create mode 100644 samples/user-interface/predictiveback/.idea/vcs.xml create mode 100644 samples/user-interface/predictiveback/.idea/workspace.xml create mode 100644 samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt create mode 100644 samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml diff --git a/samples/user-interface/predictiveback/.idea/migrations.xml b/samples/user-interface/predictiveback/.idea/migrations.xml new file mode 100644 index 00000000..f8051a6f --- /dev/null +++ b/samples/user-interface/predictiveback/.idea/migrations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/misc.xml b/samples/user-interface/predictiveback/.idea/misc.xml new file mode 100644 index 00000000..3040d03e --- /dev/null +++ b/samples/user-interface/predictiveback/.idea/misc.xml @@ -0,0 +1,10 @@ + + + + + + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/vcs.xml b/samples/user-interface/predictiveback/.idea/vcs.xml new file mode 100644 index 00000000..c2365ab1 --- /dev/null +++ b/samples/user-interface/predictiveback/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/workspace.xml b/samples/user-interface/predictiveback/.idea/workspace.xml new file mode 100644 index 00000000..22e17965 --- /dev/null +++ b/samples/user-interface/predictiveback/.idea/workspace.xml @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + 1711144508758 + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt index a9b49007..60df0dd9 100644 --- a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt @@ -24,7 +24,8 @@ enum class PBAnimation { CROSS_FRAGMENT, SHARED_ELEMENT_CROSS_FRAGMENT, PROGRESS_API, - TRANSITION + TRANSITION, + MATERIAL_SHARED_AXIS } data class PBAnimationText(val title: String, val description: String) @@ -60,5 +61,9 @@ val animations = mapOf( PBAnimation.TRANSITION to PBAnimationText( "Transition", "Click to see an animation created with AndroidX Transitions and the Predictive Back Progress API." + ), + PBAnimation.MATERIAL_SHARED_AXIS to PBAnimationText( + "Material Shared Axis", + "Click to see an animation created with Material Shared Axis." ) ) \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt index b2fcffa5..0b982951 100644 --- a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt @@ -63,6 +63,9 @@ class PBListFragment : Fragment() { binding.transitionsCard.setOnClickListener { findNavController().navigate(R.id.show_PBTransition) } + binding.materialSharedAxisCard.setOnClickListener { + findNavController().navigate(R.id.show_PBMaterialSharedAxisAnimations) + } } override fun onDestroyView() { @@ -87,5 +90,7 @@ class PBListFragment : Fragment() { binding.progressApiDescription.text = animations[PBAnimation.PROGRESS_API]?.description ?: "" binding.transitionsTitle.text = animations[PBAnimation.TRANSITION]?.title ?: "" binding.transitionsDescription.text = animations[PBAnimation.TRANSITION]?.description ?: "" + binding.materialSharedAxisTitle.text = animations[PBAnimation.MATERIAL_SHARED_AXIS]?.title ?: "" + binding.materialSharedAxisDescription.text = animations[PBAnimation.MATERIAL_SHARED_AXIS]?.description ?: "" } } \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt new file mode 100644 index 00000000..6fbcae9b --- /dev/null +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt @@ -0,0 +1,43 @@ +/* + * Copyright 2023 The Android Open Source Project + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package com.example.platform.ui.predictiveback + +import android.os.Bundle +import android.view.LayoutInflater +import android.view.View +import android.view.ViewGroup +import androidx.fragment.app.Fragment +import com.example.platform.ui.predictiveback.databinding.FragmentMaterialSharedAxisBinding + +class PBMaterialSharedAxisAnimations : Fragment() { + + private var _binding: FragmentMaterialSharedAxisBinding? = null + private val binding get() = _binding!! + override fun onCreateView( + inflater: LayoutInflater, container: ViewGroup?, + savedInstanceState: Bundle?, + ): View { + _binding = FragmentMaterialSharedAxisBinding + .inflate(inflater, container, false) + return binding.root + } + + override fun onDestroyView() { + super.onDestroyView() + _binding = null + } +} \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml b/samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml index 5a0290b6..41792f12 100644 --- a/samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml +++ b/samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml @@ -310,6 +310,42 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml b/samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml new file mode 100644 index 00000000..366daa50 --- /dev/null +++ b/samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml @@ -0,0 +1,60 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml b/samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml index 289d886c..631858ef 100644 --- a/samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml +++ b/samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml @@ -43,6 +43,9 @@ + + \ No newline at end of file diff --git a/samples/user-interface/predictiveback/src/main/res/values/strings.xml b/samples/user-interface/predictiveback/src/main/res/values/strings.xml index 7fa29164..1116cc46 100644 --- a/samples/user-interface/predictiveback/src/main/res/values/strings.xml +++ b/samples/user-interface/predictiveback/src/main/res/values/strings.xml @@ -27,4 +27,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus est at sollicitudin gravida. Donec nec augue consectetur, vulputate massa nec, aliquam tortor. Aliquam vestibulum enim gravida massa pretium, tristique blandit nisi sagittis. Nulla facilisi. Cras erat mi, ultrices ut vulputate eu, sagittis suscipit augue. Pellentesque varius elit sit amet nisl suscipit sollicitudin. Sed non tortor fermentum, iaculis erat vel, vestibulum elit. Integer hendrerit tortor eget urna vulputate hendrerit. Integer consequat cursus sem sed fringilla. Fusce ac sodales dolor. Phasellus eleifend lacus sed libero luctus, fringilla pharetra odio lobortis. Fusce quis sapien ac nulla venenatis congue mollis aliquet nulla. Nunc commodo ipsum in leo rutrum ultrices. Nunc tincidunt neque quam, a dictum nisl sagittis vel. Swipe back to see a shared element Predictive Back transition. + Swipe back to see a Material Shared Axis transition. \ No newline at end of file From 9e79dd1eba8d99a3ac8aead3866ee50c52c2080f Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Mon, 25 Mar 2024 14:44:08 -0700 Subject: [PATCH 2/6] add in enter and return transitions for MaterialSharedAxis --- .../PBMaterialSharedAxisAnimations.kt | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt index 6fbcae9b..1cdd8917 100644 --- a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt @@ -17,11 +17,16 @@ package com.example.platform.ui.predictiveback import android.os.Bundle +import android.util.Log import android.view.LayoutInflater import android.view.View import android.view.ViewGroup +import androidx.activity.OnBackPressedCallback import androidx.fragment.app.Fragment +import androidx.navigation.fragment.FragmentNavigatorExtras +import androidx.navigation.fragment.findNavController import com.example.platform.ui.predictiveback.databinding.FragmentMaterialSharedAxisBinding +import com.google.android.material.transition.MaterialSharedAxis class PBMaterialSharedAxisAnimations : Fragment() { @@ -35,6 +40,25 @@ class PBMaterialSharedAxisAnimations : Fragment() { .inflate(inflater, container, false) return binding.root } + override fun onViewCreated(view: View, savedInstanceState: Bundle?) { + super.onViewCreated(view, savedInstanceState) + + Log.d("material", "Inside material shared axis fragment") + + enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true) + returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false) + + val predictiveBackCallback = object : OnBackPressedCallback(true) { + override fun handleOnBackPressed() { + findNavController().popBackStack() + } + } + + requireActivity().onBackPressedDispatcher.addCallback( + this.viewLifecycleOwner, + predictiveBackCallback + ) + } override fun onDestroyView() { super.onDestroyView() From d0a2727893a738e3c1381b070437d75b8d2b784f Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Tue, 26 Mar 2024 10:17:27 -0700 Subject: [PATCH 3/6] delete onViewCreated code --- gradle/libs.versions.toml | 2 +- .../ui/predictiveback/PBListFragment.kt | 5 +++++ .../PBMaterialSharedAxisAnimations.kt | 22 +------------------ 3 files changed, 7 insertions(+), 22 deletions(-) diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 7206b4b2..f385dfb1 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -40,7 +40,7 @@ androidxTestRunner = "1.5.2" androidxUiAutomator = "2.2.0" media3 = "1.2.1" appcompat = "1.6.1" -material = "1.11.0" +material = "1.12.0-beta01" constraintlayout = "2.1.4" [libraries] diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt index 0b982951..dbc8991e 100644 --- a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt @@ -24,6 +24,7 @@ import androidx.fragment.app.Fragment import androidx.navigation.fragment.FragmentNavigatorExtras import androidx.navigation.fragment.findNavController import com.example.platform.ui.predictiveback.databinding.FragmentAnimationListBinding +import com.google.android.material.transition.MaterialSharedAxis class PBListFragment : Fragment() { @@ -37,6 +38,10 @@ class PBListFragment : Fragment() { setAnimationText() + exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true) + reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false) + + return binding.root } diff --git a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt index 1cdd8917..94fe80a4 100644 --- a/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt +++ b/samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt @@ -17,14 +17,10 @@ package com.example.platform.ui.predictiveback import android.os.Bundle -import android.util.Log import android.view.LayoutInflater import android.view.View import android.view.ViewGroup -import androidx.activity.OnBackPressedCallback import androidx.fragment.app.Fragment -import androidx.navigation.fragment.FragmentNavigatorExtras -import androidx.navigation.fragment.findNavController import com.example.platform.ui.predictiveback.databinding.FragmentMaterialSharedAxisBinding import com.google.android.material.transition.MaterialSharedAxis @@ -38,28 +34,12 @@ class PBMaterialSharedAxisAnimations : Fragment() { ): View { _binding = FragmentMaterialSharedAxisBinding .inflate(inflater, container, false) - return binding.root - } - override fun onViewCreated(view: View, savedInstanceState: Bundle?) { - super.onViewCreated(view, savedInstanceState) - - Log.d("material", "Inside material shared axis fragment") enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true) returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false) - val predictiveBackCallback = object : OnBackPressedCallback(true) { - override fun handleOnBackPressed() { - findNavController().popBackStack() - } - } - - requireActivity().onBackPressedDispatcher.addCallback( - this.viewLifecycleOwner, - predictiveBackCallback - ) + return binding.root } - override fun onDestroyView() { super.onDestroyView() _binding = null From d52171d0d8e376638d53a67f38726bfb5a3a60fd Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Tue, 26 Mar 2024 10:23:49 -0700 Subject: [PATCH 4/6] delete the .idea files --- .../predictiveback/.idea/migrations.xml | 10 ---- .../predictiveback/.idea/misc.xml | 10 ---- .../predictiveback/.idea/vcs.xml | 6 --- .../predictiveback/.idea/workspace.xml | 47 ------------------- 4 files changed, 73 deletions(-) delete mode 100644 samples/user-interface/predictiveback/.idea/migrations.xml delete mode 100644 samples/user-interface/predictiveback/.idea/misc.xml delete mode 100644 samples/user-interface/predictiveback/.idea/vcs.xml delete mode 100644 samples/user-interface/predictiveback/.idea/workspace.xml diff --git a/samples/user-interface/predictiveback/.idea/migrations.xml b/samples/user-interface/predictiveback/.idea/migrations.xml deleted file mode 100644 index f8051a6f..00000000 --- a/samples/user-interface/predictiveback/.idea/migrations.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/misc.xml b/samples/user-interface/predictiveback/.idea/misc.xml deleted file mode 100644 index 3040d03e..00000000 --- a/samples/user-interface/predictiveback/.idea/misc.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/vcs.xml b/samples/user-interface/predictiveback/.idea/vcs.xml deleted file mode 100644 index c2365ab1..00000000 --- a/samples/user-interface/predictiveback/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/samples/user-interface/predictiveback/.idea/workspace.xml b/samples/user-interface/predictiveback/.idea/workspace.xml deleted file mode 100644 index 22e17965..00000000 --- a/samples/user-interface/predictiveback/.idea/workspace.xml +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - 1711144508758 - - - - \ No newline at end of file From bda373edf38ef26b13c0454d2e43f8397dc376ef Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Tue, 26 Mar 2024 10:32:25 -0700 Subject: [PATCH 5/6] Add an explanation of this sample in README.md --- .../user-interface/predictiveback/README.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/samples/user-interface/predictiveback/README.md b/samples/user-interface/predictiveback/README.md index 3a4041d0..12aa01aa 100644 --- a/samples/user-interface/predictiveback/README.md +++ b/samples/user-interface/predictiveback/README.md @@ -9,6 +9,7 @@ Shows different types of predictive back animations, including: + Shared element cross-fragment animation + Custom Progress API animation + Custom AndroidX Transition ++ Cross-fragment animation with MaterialSharedAxis ## Custom cross-activity @@ -207,3 +208,33 @@ class MyFragment : Fragment() { } ``` +## Cross-fragment animation with MaterialSharedAxis + +MaterialSharedAxis is a Visibility transition. A Visibility transition is triggered when the target +View's visibility is changed or when the View is added or removed. This means MaterialSharedAxis +requires a View to be changing in visibility or to be added or removed to trigger its animation. + +For more details see the +[developer documentation](https://m2.material.io/develop/android/theming/motion#shared-axis). + +```kotlin +// FragmentA.kt + +override fun onCreateView(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + + exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true) + reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false) +} + +// FragmentB.kt + +override fun onCreateView(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + + enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true) + returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false) +} +``` + + From 76a1c2e5e9b770152580d50cdad41b37d872d510 Mon Sep 17 00:00:00 2001 From: Tram Bui Date: Tue, 26 Mar 2024 15:23:56 -0700 Subject: [PATCH 6/6] edit README.md to reference Fragment instead of View --- samples/user-interface/predictiveback/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/user-interface/predictiveback/README.md b/samples/user-interface/predictiveback/README.md index 12aa01aa..0596915d 100644 --- a/samples/user-interface/predictiveback/README.md +++ b/samples/user-interface/predictiveback/README.md @@ -211,7 +211,7 @@ class MyFragment : Fragment() { ## Cross-fragment animation with MaterialSharedAxis MaterialSharedAxis is a Visibility transition. A Visibility transition is triggered when the target -View's visibility is changed or when the View is added or removed. This means MaterialSharedAxis +Fragment's visibility is changed or when the Fragment is added or removed. This means MaterialSharedAxis requires a View to be changing in visibility or to be added or removed to trigger its animation. For more details see the