[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Predictive back MaterialSharedAxis sample #156

Merged
merged 7 commits into from
Mar 26, 2024
Merged

Predictive back MaterialSharedAxis sample #156

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d5dbf94
add setup code to create a new cross-fragment transition using Materi…
trambui09 Mar 22, 2024
9e79dd1
add in enter and return transitions for MaterialSharedAxis
trambui09 Mar 25, 2024
6825654
Merge branch 'main' into material-shared-axis
trambui09 Mar 25, 2024
d0a2727
delete onViewCreated code
trambui09 Mar 26, 2024
d52171d
delete the .idea files
trambui09 Mar 26, 2024
bda373e
Add an explanation of this sample in README.md
trambui09 Mar 26, 2024
76a1c2e
edit README.md to reference Fragment instead of View
trambui09 Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gradle/libs.versions.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
31 changes: 31 additions & 0 deletions samples/user-interface/predictiveback/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say fragments instead of views, since this is a cross-fragment transition.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! TY!

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)
}
```


7 changes: 6 additions & 1 deletion ...erface/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBAnimation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -60,5 +61,9 @@ val animations = mapOf<PBAnimation, PBAnimationText>(
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."
)
)
10 changes: 10 additions & 0 deletions ...ace/predictiveback/src/main/java/com/example/platform/ui/predictiveback/PBListFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

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

setAnimationText()

exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)


Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ashnohe, was wondering if it should be enter and return OR exit and reenter Transitions? the docs has exit and reenter as the transitions for FragmentA and enter and return transitions for fragmentB?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PBListFragment is Fragment A so exit and reenter are correct.

return binding.root
}

Expand All @@ -63,6 +68,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() {
Expand All @@ -87,5 +95,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 ?: ""
}
}
47 changes: 47 additions & 0 deletions ...ck/src/main/java/com/example/platform/ui/predictiveback/PBMaterialSharedAxisAnimations.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* 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
import com.google.android.material.transition.MaterialSharedAxis

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)

enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ true)
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, /* forward= */ false)

return binding.root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
36 changes: 36 additions & 0 deletions samples/user-interface/predictiveback/src/main/res/layout/fragment_animation_list.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,42 @@

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

<com.google.android.material.card.MaterialCardView
android:id="@+id/material_shared_axis_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
style="?attr/materialCardViewFilledStyle">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:id="@+id/material_shared_axis_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:textAppearance="?attr/textAppearanceTitleMedium"
android:textSize="16sp"/>

<TextView
android:id="@+id/material_shared_axis_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp"
android:textAppearance="?attr/textAppearanceBodyMedium"
android:textColor="?android:attr/textColorSecondary"
android:textSize="12sp" />

</LinearLayout>

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


</LinearLayout>

</ScrollView>
60 changes: 60 additions & 0 deletions samples/user-interface/predictiveback/src/main/res/layout/fragment_material_shared_axis.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ 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.
-->

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
tools:context=".PBMaterialSharedAxisAnimations">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fragment_header"
android:textAppearance="?attr/textAppearanceTitleMedium"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<View
android:id="@+id/box"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@drawable/box"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="300dp"
android:fontFamily="sans-serif"
android:text="@string/fragment_material_shared_axis_body"
android:textAppearance="?attr/textAppearanceBodyMedium"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/box"
app:layout_constraintStart_toStartOf="@+id/box"
app:layout_constraintTop_toBottomOf="@+id/box" />

</androidx.constraintlayout.widget.ConstraintLayout>
8 changes: 8 additions & 0 deletions samples/user-interface/predictiveback/src/main/res/navigation/nav_graph.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
<action
android:id="@+id/show_PBSharedElementTransitionFragment"
app:destination="@id/PBSharedElementTransitionFragment" />
<action
android:id="@+id/show_PBMaterialSharedAxisAnimations"
app:destination="@id/PBMaterialSharedAxisAnimations" />
</fragment>
<fragment
android:id="@+id/PBNavigationComponentDefaultAnimations"
Expand All @@ -69,4 +72,9 @@
android:name="com.example.platform.ui.predictiveback.PBSharedElementTransitionFragment"
android:label="fragment_shared_element_transition"
tools:layout="@layout/fragment_shared_element_transition" />
<fragment
android:id="@+id/PBMaterialSharedAxisAnimations"
android:name="com.example.platform.ui.predictiveback.PBMaterialSharedAxisAnimations"
android:label="fragment_material_shared_axis"
tools:layout="@layout/fragment_material_shared_axis" />
</navigation>
1 change: 1 addition & 0 deletions samples/user-interface/predictiveback/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
</string>
<string name="sharedElementTransitionText">Swipe back to see a shared element Predictive Back transition.</string>
<string name="fragment_material_shared_axis_body">Swipe back to see a Material Shared Axis transition.</string>
</resources>
Loading