From 805035f0d872b1acb19564e3ae723f6a0d0ff775 Mon Sep 17 00:00:00 2001 From: OxygenCobalt Date: Thu, 25 Nov 2021 09:04:22 -0700 Subject: [PATCH] playback: improve compact -> full transition Improve the way the compact playback view transforms into the full playback view by splitting their view animations in two. This makes the transition more akin to the Android 12 notification menu, which due to the nature of how I'm fading views really does make it more user friendly. Also re-add the "Now Playing" title and a new subtitle displaying the currently playing artist. --- .../auxio/playback/PlaybackFragment.kt | 8 +++++ .../oxycblt/auxio/playback/PlaybackLayout.kt | 33 +++++++++++-------- .../res/layout-land/fragment_playback.xml | 3 +- .../layout-sw600dp-land/fragment_playback.xml | 3 +- .../res/layout-sw600dp/fragment_playback.xml | 3 +- app/src/main/res/layout/fragment_playback.xml | 3 +- 6 files changed, 35 insertions(+), 18 deletions(-) diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt index 341219632..f9ec44705 100644 --- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt +++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt @@ -109,6 +109,14 @@ class PlaybackFragment : Fragment() { } } + playbackModel.parent.observe(viewLifecycleOwner) { parent -> + if (parent != null) { + binding.playbackToolbar.subtitle = parent.resolvedName + } else { + binding.playbackToolbar.setSubtitle(R.string.lbl_all_songs) + } + } + playbackModel.isShuffling.observe(viewLifecycleOwner) { isShuffling -> binding.playbackShuffle.isActivated = isShuffling } diff --git a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackLayout.kt b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackLayout.kt index 507479467..b84524ef8 100644 --- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackLayout.kt +++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackLayout.kt @@ -527,24 +527,28 @@ class PlaybackLayout @JvmOverloads constructor( } /** - * Update the view transitions done when the panel slides up. + * Do the nice view animations that occur whenever we slide up the playback panel. + * The way I transition is largely inspired by Android 12's notification panel, with the + * compact view fading out completely before the panel view fades in. We don't fade out the + * content though so we have cohesion between the other sliding transitions. */ private fun updatePanelTransition() { - val outAlpha = min(1 - panelOffset, 1f) - val inAlpha = max(panelOffset, 0f) + val ratio = max(panelOffset, 0f) - contentView.apply { - alpha = outAlpha - isInvisible = alpha == 0f - } + val outRatio = 1 - ratio + val halfOutRatio = min(ratio / 0.5f, 1f) + val halfInRatio = max(ratio - 0.5f, 0f) / 0.5f + + // Optimize out drawing for this view completely + contentView.isInvisible = outRatio == 0f // Slowly reduce the elevation as we slide up, eventually resulting in a neutral color // instead of an elevated one when fully expanded. - (playbackContainerView.background as MaterialShapeDrawable).alpha = (outAlpha * 255).toInt() + (playbackContainerView.background as MaterialShapeDrawable).alpha = (outRatio * 255).toInt() // Fade out our bar view as we slide up playbackBarView.apply { - alpha = outAlpha + alpha = min(1 - halfOutRatio, 1f) isInvisible = alpha == 0f // When edge-to-edge is enabled, the playback bar will not fade out into the @@ -561,7 +565,7 @@ class PlaybackLayout @JvmOverloads constructor( params.setMargins( params.leftMargin, - (bars.top * max(panelOffset, 0f)).toInt(), + (bars.top * halfOutRatio).toInt(), params.rightMargin, params.bottomMargin ) @@ -575,7 +579,7 @@ class PlaybackLayout @JvmOverloads constructor( // Fade in our panel as we slide up playbackPanelView.apply { - alpha = inAlpha + alpha = halfInRatio isInvisible = alpha == 0f } } @@ -587,10 +591,11 @@ class PlaybackLayout @JvmOverloads constructor( (computePanelTopPosition(0f) - topPosition).toFloat() / panelRange private fun smoothSlideTo(offset: Float) { - // Find the new top position and animate the panel to that - val panelTop = computePanelTopPosition(offset) + val okay = dragHelper.smoothSlideViewTo( + playbackContainerView, playbackContainerView.left, computePanelTopPosition(offset) + ) - if (dragHelper.smoothSlideViewTo(playbackContainerView, playbackContainerView.left, panelTop)) { + if (okay) { postInvalidateOnAnimation() } } diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml index 04d7ea9a6..af0c8be52 100644 --- a/app/src/main/res/layout-land/fragment_playback.xml +++ b/app/src/main/res/layout-land/fragment_playback.xml @@ -26,11 +26,12 @@ android:layout_height="match_parent" android:clipToPadding="false"> - - diff --git a/app/src/main/res/layout-sw600dp/fragment_playback.xml b/app/src/main/res/layout-sw600dp/fragment_playback.xml index d5b2b63c2..115fc4ed3 100644 --- a/app/src/main/res/layout-sw600dp/fragment_playback.xml +++ b/app/src/main/res/layout-sw600dp/fragment_playback.xml @@ -26,11 +26,12 @@ android:layout_height="match_parent" android:clipToPadding="false"> - -