Skip to content

Commit f4e1982

Browse files
trambui09trambui09
authored
Merge pull request #156 from trambui09/material-shared-axis
Predictive back MaterialSharedAxis sample
2 parents b3dc121 + 76a1c2e commit f4e1982

File tree

9 files changed

+200
-2
lines changed

9 files changed

+200
-2
lines changed

‎gradle/libs.versions.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ androidxTestRunner = "1.5.2"
4040
androidxUiAutomator = "2.2.0"
4141
media3 = "1.2.1"
4242
appcompat = "1.6.1"
43-
material = "1.11.0"
43+
material = "1.12.0-beta01"
4444
constraintlayout = "2.1.4"
4545

4646
[libraries]

‎samples/user-interface/predictiveback/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Shows different types of predictive back animations, including:
99
+ Shared element cross-fragment animation
1010
+ Custom Progress API animation
1111
+ Custom AndroidX Transition
12+
+ Cross-fragment animation with MaterialSharedAxis
1213

1314
## Custom cross-activity
1415

@@ -207,3 +208,33 @@ class MyFragment : Fragment() {
207208
}
208209
```
209210

211+
## Cross-fragment animation with MaterialSharedAxis
212+
213+
MaterialSharedAxis is a Visibility transition. A Visibility transition is triggered when the target
214+
Fragment's visibility is changed or when the Fragment is added or removed. This means MaterialSharedAxis
215+
requires a View to be changing in visibility or to be added or removed to trigger its animation.
216+
217+
For more details see the
218+
[developer documentation](https://m2.material.io/develop/android/theming/motion#shared-axis).
219+
220+
```kotlin
221+
// FragmentA.kt
222+
223+
override fun onCreateView(savedInstanceState: Bundle?) {
224+
super.onCreate(savedInstanceState)
225+
226+
exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
227+
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)
228+
}
229+
230+
// FragmentB.kt
231+
232+
override fun onCreateView(savedInstanceState: Bundle?) {
233+
super.onCreate(savedInstanceState)
234+
235+
enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
236+
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)
237+
}
238+
```
239+
240+

‎samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ enum class PBAnimation {
2424
CROSS_FRAGMENT,
2525
SHARED_ELEMENT_CROSS_FRAGMENT,
2626
PROGRESS_API,
27-
TRANSITION
27+
TRANSITION,
28+
MATERIAL_SHARED_AXIS
2829
}
2930
data class PBAnimationText(val title: String, val description: String)
3031

@@ -60,5 +61,9 @@ val animations = mapOf<PBAnimation, PBAnimationText>(
6061
PBAnimation.TRANSITION to PBAnimationText(
6162
"Transition",
6263
"Click to see an animation created with AndroidX Transitions and the Predictive Back Progress API."
64+
),
65+
PBAnimation.MATERIAL_SHARED_AXIS to PBAnimationText(
66+
"Material Shared Axis",
67+
"Click to see an animation created with Material Shared Axis."
6368
)
6469
)

‎samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import androidx.fragment.app.Fragment
2424
import androidx.navigation.fragment.FragmentNavigatorExtras
2525
import androidx.navigation.fragment.findNavController
2626
import com.example.platform.ui.predictiveback.databinding.FragmentAnimationListBinding
27+
import com.google.android.material.transition.MaterialSharedAxis
2728

2829
class PBListFragment : Fragment() {
2930

@@ -37,6 +38,10 @@ class PBListFragment : Fragment() {
3738

3839
setAnimationText()
3940

41+
exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
42+
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)
43+
44+
4045
return binding.root
4146
}
4247

@@ -63,6 +68,9 @@ class PBListFragment : Fragment() {
6368
binding.transitionsCard.setOnClickListener {
6469
findNavController().navigate(R.id.show_PBTransition)
6570
}
71+
binding.materialSharedAxisCard.setOnClickListener {
72+
findNavController().navigate(R.id.show_PBMaterialSharedAxisAnimations)
73+
}
6674
}
6775

6876
override fun onDestroyView() {
@@ -87,5 +95,7 @@ class PBListFragment : Fragment() {
8795
binding.progressApiDescription.text = animations[PBAnimation.PROGRESS_API]?.description ?: ""
8896
binding.transitionsTitle.text = animations[PBAnimation.TRANSITION]?.title ?: ""
8997
binding.transitionsDescription.text = animations[PBAnimation.TRANSITION]?.description ?: ""
98+
binding.materialSharedAxisTitle.text = animations[PBAnimation.MATERIAL_SHARED_AXIS]?.title ?: ""
99+
binding.materialSharedAxisDescription.text = animations[PBAnimation.MATERIAL_SHARED_AXIS]?.description ?: ""
90100
}
91101
}

‎samples/user-interface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* Copyright 2023 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package com.example.platform.ui.predictiveback
18+
19+
import android.os.Bundle
20+
import android.view.LayoutInflater
21+
import android.view.View
22+
import android.view.ViewGroup
23+
import androidx.fragment.app.Fragment
24+
import com.example.platform.ui.predictiveback.databinding.FragmentMaterialSharedAxisBinding
25+
import com.google.android.material.transition.MaterialSharedAxis
26+
27+
class PBMaterialSharedAxisAnimations : Fragment() {
28+
29+
private var _binding: FragmentMaterialSharedAxisBinding? = null
30+
private val binding get() = _binding!!
31+
override fun onCreateView(
32+
inflater: LayoutInflater, container: ViewGroup?,
33+
savedInstanceState: Bundle?,
34+
): View {
35+
_binding = FragmentMaterialSharedAxisBinding
36+
.inflate(inflater, container, false)
37+
38+
enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
39+
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)
40+
41+
return binding.root
42+
}
43+
override fun onDestroyView() {
44+
super.onDestroyView()
45+
_binding = null
46+
}
47+
}

‎samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,42 @@
310310

311311
</com.google.android.material.card.MaterialCardView>
312312

313+
<com.google.android.material.card.MaterialCardView
314+
android:id="@+id/material_shared_axis_card"
315+
android:layout_width="match_parent"
316+
android:layout_height="wrap_content"
317+
android:layout_margin="16dp"
318+
style="?attr/materialCardViewFilledStyle">
319+
320+
<LinearLayout
321+
android:layout_width="match_parent"
322+
android:layout_height="wrap_content"
323+
android:orientation="vertical">
324+
325+
<TextView
326+
android:id="@+id/material_shared_axis_title"
327+
android:layout_width="wrap_content"
328+
android:layout_height="wrap_content"
329+
android:padding="16dp"
330+
android:textAppearance="?attr/textAppearanceTitleMedium"
331+
android:textSize="16sp"/>
332+
333+
<TextView
334+
android:id="@+id/material_shared_axis_description"
335+
android:layout_width="wrap_content"
336+
android:layout_height="wrap_content"
337+
android:paddingLeft="16dp"
338+
android:paddingRight="16dp"
339+
android:paddingBottom="16dp"
340+
android:textAppearance="?attr/textAppearanceBodyMedium"
341+
android:textColor="?android:attr/textColorSecondary"
342+
android:textSize="12sp" />
343+
344+
</LinearLayout>
345+
346+
</com.google.android.material.card.MaterialCardView>
347+
348+
313349
</LinearLayout>
314350

315351
</ScrollView>

‎samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
~ Copyright 2023 The Android Open Source Project
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ https://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:app="http://schemas.android.com/apk/res-auto"
19+
xmlns:tools="http://schemas.android.com/tools"
20+
android:layout_width="match_parent"
21+
android:layout_height="match_parent"
22+
android:layout_margin="16dp"
23+
tools:context=".PBMaterialSharedAxisAnimations">
24+
25+
<TextView
26+
android:id="@+id/title"
27+
android:layout_width="wrap_content"
28+
android:layout_height="wrap_content"
29+
android:text="@string/fragment_header"
30+
android:textAppearance="?attr/textAppearanceTitleMedium"
31+
android:textSize="24sp"
32+
app:layout_constraintEnd_toEndOf="parent"
33+
app:layout_constraintStart_toStartOf="parent"
34+
app:layout_constraintTop_toTopOf="parent" />
35+
36+
<View
37+
android:id="@+id/box"
38+
android:layout_width="300dp"
39+
android:layout_height="300dp"
40+
android:background="@drawable/box"
41+
app:layout_constraintBottom_toBottomOf="parent"
42+
app:layout_constraintEnd_toEndOf="parent"
43+
app:layout_constraintStart_toStartOf="parent"
44+
app:layout_constraintTop_toTopOf="parent" />
45+
46+
<TextView
47+
android:id="@+id/body"
48+
android:layout_width="wrap_content"
49+
android:layout_height="wrap_content"
50+
android:maxWidth="300dp"
51+
android:fontFamily="sans-serif"
52+
android:text="@string/fragment_material_shared_axis_body"
53+
android:textAppearance="?attr/textAppearanceBodyMedium"
54+
android:textSize="16sp"
55+
app:layout_constraintBottom_toBottomOf="parent"
56+
app:layout_constraintEnd_toEndOf="@+id/box"
57+
app:layout_constraintStart_toStartOf="@+id/box"
58+
app:layout_constraintTop_toBottomOf="@+id/box" />
59+
60+
</androidx.constraintlayout.widget.ConstraintLayout>

‎samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@
4343
<action
4444
android:id="@+id/show_PBSharedElementTransitionFragment"
4545
app:destination="@id/PBSharedElementTransitionFragment" />
46+
<action
47+
android:id="@+id/show_PBMaterialSharedAxisAnimations"
48+
app:destination="@id/PBMaterialSharedAxisAnimations" />
4649
</fragment>
4750
<fragment
4851
android:id="@+id/PBNavigationComponentDefaultAnimations"
@@ -69,4 +72,9 @@
6972
android:name="com.example.platform.ui.predictiveback.PBSharedElementTransitionFragment"
7073
android:label="fragment_shared_element_transition"
7174
tools:layout="@layout/fragment_shared_element_transition" />
75+
<fragment
76+
android:id="@+id/PBMaterialSharedAxisAnimations"
77+
android:name="com.example.platform.ui.predictiveback.PBMaterialSharedAxisAnimations"
78+
android:label="fragment_material_shared_axis"
79+
tools:layout="@layout/fragment_material_shared_axis" />
7280
</navigation>

‎samples/user-interface/predictiveback/src/main/res/values/strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@
2727
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.
2828
</string>
2929
<string name="sharedElementTransitionText">Swipe back to see a shared element Predictive Back transition.</string>
30+
<string name="fragment_material_shared_axis_body">Swipe back to see a Material Shared Axis transition.</string>
3031
</resources>

0 commit comments

Comments
 (0)