Skip to content

Commit 17a8f05

Browse files
dsn5ftdsn5ft
authored
[Reply] Add elevation scale transition to exiting and reentering screens during Container Transform (material-components#39)
* [Reply] Add elevation scale transition to exiting and reentering screens during container transform * Formatting * Private const * Wrapper layout comment * Use 0.85 for scale value * Todo comment
1 parent 5ebef46 commit 17a8f05

File tree

6 files changed

+75
-18
lines changed

6 files changed

+75
-18
lines changed

‎Reply/app/src/main/java/com/materialstudies/reply/ui/MainActivity.kt‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,12 @@ import androidx.appcompat.widget.Toolbar
2929
import androidx.navigation.NavController
3030
import androidx.navigation.NavDestination
3131
import androidx.navigation.findNavController
32-
import com.google.android.material.transition.Hold
3332
import com.google.android.material.transition.MaterialFadeThrough
3433
import com.google.android.material.transition.MaterialSharedAxis
3534
import com.materialstudies.reply.R
3635
import com.materialstudies.reply.databinding.ActivityMainBinding
3736
import com.materialstudies.reply.ui.compose.ComposeFragmentDirections
3837
import com.materialstudies.reply.ui.email.EmailFragmentArgs
39-
import com.materialstudies.reply.ui.home.HomeFragmentArgs
4038
import com.materialstudies.reply.ui.home.HomeFragmentDirections
4139
import com.materialstudies.reply.ui.home.Mailbox
4240
import com.materialstudies.reply.ui.nav.AlphaSlideAction
@@ -49,6 +47,7 @@ import com.materialstudies.reply.ui.nav.NavigationModelItem
4947
import com.materialstudies.reply.ui.nav.ShowHideFabStateAction
5048
import com.materialstudies.reply.ui.search.SearchFragmentDirections
5149
import com.materialstudies.reply.util.contentView
50+
import com.materialstudies.reply.util.createMaterialElevationScale
5251
import com.materialstudies.reply.util.currentNavigationFragment
5352
import com.materialstudies.reply.util.setOutgoingTransitions
5453
import kotlin.LazyThreadSafetyMode.NONE
@@ -264,7 +263,10 @@ class MainActivity : AppCompatActivity(),
264263

265264
private fun navigateToCompose() {
266265
supportFragmentManager.currentNavigationFragment?.setOutgoingTransitions(
267-
exitTransition = Hold().apply {
266+
reenterTransition = createMaterialElevationScale(true).apply {
267+
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
268+
},
269+
exitTransition = createMaterialElevationScale(false).apply {
268270
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
269271
}
270272
)

‎Reply/app/src/main/java/com/materialstudies/reply/ui/compose/ComposeFragment.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
package com.materialstudies.reply.ui.compose
1818

19+
import android.graphics.Color
1920
import android.os.Bundle
2021
import android.view.LayoutInflater
2122
import android.view.View
@@ -115,6 +116,7 @@ class ComposeFragment : Fragment() {
115116
endView = binding.emailCardView
116117
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
117118
interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
119+
scrimColor = Color.TRANSPARENT
118120
}
119121
returnTransition = Slide().apply {
120122
duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()

‎Reply/app/src/main/java/com/materialstudies/reply/ui/email/EmailFragment.kt‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
package com.materialstudies.reply.ui.email
1818

19+
import android.graphics.Color
1920
import android.os.Bundle
2021
import android.view.LayoutInflater
2122
import android.view.View
@@ -24,7 +25,6 @@ import androidx.fragment.app.Fragment
2425
import androidx.navigation.fragment.findNavController
2526
import androidx.navigation.fragment.navArgs
2627
import androidx.recyclerview.widget.GridLayoutManager
27-
import com.google.android.material.transition.Hold
2828
import com.google.android.material.transition.MaterialContainerTransform
2929
import com.materialstudies.reply.R
3030
import com.materialstudies.reply.data.EmailStore
@@ -98,12 +98,14 @@ class EmailFragment : Fragment() {
9898
drawingViewId = R.id.nav_host_fragment
9999
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
100100
interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
101+
scrimColor = Color.TRANSPARENT
101102
}
102103
sharedElementReturnTransition = MaterialContainerTransform().apply {
103104
// Again, scope the return transition so it is added below the bottom app bar.
104-
drawingViewId = R.id.recycler_view
105+
drawingViewId = R.id.home_root
105106
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
106107
interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
108+
scrimColor = Color.TRANSPARENT
107109
}
108110
}
109111

‎Reply/app/src/main/java/com/materialstudies/reply/ui/home/HomeFragment.kt‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ import androidx.navigation.fragment.FragmentNavigatorExtras
2828
import androidx.navigation.fragment.findNavController
2929
import androidx.navigation.fragment.navArgs
3030
import androidx.recyclerview.widget.ItemTouchHelper
31-
import com.google.android.material.transition.Hold
3231
import com.google.android.material.transition.MaterialFadeThrough
3332
import com.materialstudies.reply.R
3433
import com.materialstudies.reply.data.Email
3534
import com.materialstudies.reply.data.EmailStore
3635
import com.materialstudies.reply.databinding.FragmentHomeBinding
3736
import com.materialstudies.reply.ui.MainActivity
3837
import com.materialstudies.reply.ui.MenuBottomSheetDialogFragment
38+
import com.materialstudies.reply.util.createMaterialElevationScale
3939
import com.materialstudies.reply.util.setOutgoingTransitions
4040

4141
/**
@@ -103,7 +103,10 @@ class HomeFragment : Fragment(), EmailAdapter.EmailAdapterListener {
103103

104104
override fun onEmailClicked(cardView: View, email: Email) {
105105
setOutgoingTransitions(
106-
exitTransition = Hold().apply {
106+
reenterTransition = createMaterialElevationScale(true).apply {
107+
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
108+
},
109+
exitTransition = createMaterialElevationScale(false).apply {
107110
duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
108111
}
109112
)

‎Reply/app/src/main/java/com/materialstudies/reply/util/TransitionUtils.kt‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
* Copyright 2020 Google LLC
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.materialstudies.reply.util
18+
19+
import androidx.transition.Transition
20+
import com.google.android.material.transition.FadeProvider
21+
import com.google.android.material.transition.MaterialSharedAxis
22+
import com.google.android.material.transition.ScaleProvider
23+
24+
private const val ELEVATION_SCALE = 0.85F
25+
26+
/**
27+
* Create an elevation scale transition that, e.g., can be used in conjunction with a container
28+
* transform to give the effect that the outgoing screen is receding or advancing along the z-axis.
29+
*
30+
* TODO: remove once a MaterialElevationScale is available in the library.
31+
*/
32+
fun createMaterialElevationScale(forward: Boolean): Transition {
33+
return MaterialSharedAxis(MaterialSharedAxis.Z, forward).apply {
34+
val scaleProvider = primaryAnimatorProvider as ScaleProvider
35+
scaleProvider.incomingStartScale = ELEVATION_SCALE
36+
scaleProvider.outgoingEndScale = ELEVATION_SCALE
37+
secondaryAnimatorProvider = FadeProvider()
38+
}
39+
}

‎Reply/app/src/main/res/layout/fragment_home.xml‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,26 @@
1515
xmlns:android="http://schemas.android.com/apk/res/android"
1616
xmlns:app="http://schemas.android.com/apk/res-auto">
1717

18-
<androidx.recyclerview.widget.RecyclerView
19-
android:id="@+id/recycler_view"
18+
<!-- Add a wrapper layout so we can run return transitions independent of any reenter
19+
transitions that may be running on the RecyclerView. -->
20+
<FrameLayout
21+
android:id="@+id/home_root"
2022
android:layout_width="match_parent"
21-
android:layout_height="wrap_content"
22-
android:clipToPadding="false"
23-
android:paddingTop="@dimen/grid_0_25"
24-
android:paddingBottom="@dimen/bottom_app_bar_height"
25-
android:transitionGroup="true"
26-
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
27-
app:layout_behavior="@string/appbar_scrolling_view_behavior"
28-
app:paddingTopSystemWindowInsets="@{true}"
29-
app:paddingBottomSystemWindowInsets="@{true}"/>
23+
android:layout_height="match_parent">
24+
25+
<androidx.recyclerview.widget.RecyclerView
26+
android:id="@+id/recycler_view"
27+
android:layout_width="match_parent"
28+
android:layout_height="wrap_content"
29+
android:clipToPadding="false"
30+
android:paddingTop="@dimen/grid_0_25"
31+
android:paddingBottom="@dimen/bottom_app_bar_height"
32+
android:transitionGroup="true"
33+
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
34+
app:layout_behavior="@string/appbar_scrolling_view_behavior"
35+
app:paddingTopSystemWindowInsets="@{true}"
36+
app:paddingBottomSystemWindowInsets="@{true}"/>
37+
38+
</FrameLayout>
3039

3140
</layout>

0 commit comments

Comments
 (0)