Make PlaybackFragment full-screen

Change PlaybackFragment to a full-screen layout w/a slide animation.

app/src/main/java/org/oxycblt/auxio/MainFragment.kt

@@ -15,7 +15,6 @@ import com.google.android.material.tabs.TabLayoutMediator
 import org.oxycblt.auxio.databinding.FragmentMainBinding
 import org.oxycblt.auxio.library.LibraryFragment
 import org.oxycblt.auxio.music.MusicViewModel
-import org.oxycblt.auxio.playback.PlaybackFragment
 import org.oxycblt.auxio.playback.PlaybackViewModel
 import org.oxycblt.auxio.songs.SongsFragment
 import org.oxycblt.auxio.theme.accent
@@ -94,14 +93,6 @@ class MainFragment : Fragment() {
 
         // --- VIEWMODEL SETUP ---
 
-        playbackModel.shouldOpenPlayback.observe(viewLifecycleOwner) {
-            if (it) {
-                PlaybackFragment().show(requireActivity().supportFragmentManager, "TAG_PLAYBACK")
-
-                playbackModel.doneWithOpenPlayback()
-            }
-        }
-
         Log.d(this::class.simpleName, "Fragment Created.")
 
         return binding.root

app/src/main/java/org/oxycblt/auxio/playback/CompactPlaybackFragment.kt

@@ -9,6 +9,8 @@ import android.view.ViewGroup
 import androidx.core.content.ContextCompat
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.activityViewModels
+import androidx.navigation.fragment.findNavController
+import org.oxycblt.auxio.MainFragmentDirections
 import org.oxycblt.auxio.R
 import org.oxycblt.auxio.databinding.FragmentCompactPlaybackBinding
 import org.oxycblt.auxio.music.MusicViewModel
@@ -46,7 +48,9 @@ class CompactPlaybackFragment : Fragment() {
         binding.root.visibility = View.GONE
 
         binding.root.setOnClickListener {
-            playbackModel.openPlayback()
+            findNavController().navigate(
+                MainFragmentDirections.actionGoToPlayback()
+            )
         }
 
         // --- VIEWMODEL SETUP ---

app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt

@@ -7,14 +7,15 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.core.content.ContextCompat
+import androidx.fragment.app.Fragment
 import androidx.fragment.app.activityViewModels
-import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import androidx.navigation.fragment.findNavController
 import org.oxycblt.auxio.R
 import org.oxycblt.auxio.databinding.FragmentPlaybackBinding
 import org.oxycblt.auxio.theme.accent
 import org.oxycblt.auxio.theme.toColor
 
-class PlaybackFragment : BottomSheetDialogFragment() {
+class PlaybackFragment : Fragment() {
     private val playbackModel: PlaybackViewModel by activityViewModels()
 
     // TODO: Implement nav to artists/albums
@@ -27,6 +28,7 @@ class PlaybackFragment : BottomSheetDialogFragment() {
     ): View? {
         val binding = FragmentPlaybackBinding.inflate(inflater)
 
+        // Create accents & icons to use
         val accentColor = ColorStateList.valueOf(accent.first.toColor(requireContext()))
         val inactiveColor = ColorStateList.valueOf(R.color.control_color.toColor(requireContext()))
 
@@ -42,16 +44,15 @@ class PlaybackFragment : BottomSheetDialogFragment() {
 
         binding.playbackModel = playbackModel
 
+        binding.playbackToolbar.setNavigationOnClickListener {
+            findNavController().navigateUp()
+        }
+
         // Make marquee scroll work
         binding.playbackSong.isSelected = true
         binding.playbackAlbum.isSelected = true
         binding.playbackArtist.isSelected = true
 
-        // Override the accents manually because the BottomSheetFragment is too dumb to do it themselves.
-        binding.playbackSeekBar.thumbTintList = accentColor
-        binding.playbackSeekBar.progressTintList = accentColor
-        binding.playbackSeekBar.progressBackgroundTintList = accentColor
-
         // --- VIEWMODEL SETUP --
 
         playbackModel.currentSong.observe(viewLifecycleOwner) {

app/src/main/res/anim/anim_nav_slide_down.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="250"
+    android:fromYDelta="0%"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
+    android:toYDelta="100%" />

app/src/main/res/anim/anim_nav_slide_up.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="250"
+    android:fromYDelta="100%"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
+    android:toYDelta="0%" />

app/src/main/res/drawable/ic_down.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="@color/control_color">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6 1.41,-1.41z" />
+</vector>

app/src/main/res/layout/fragment_playback.xml

@@ -17,38 +17,53 @@
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/playback_layout"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
+        android:layout_height="match_parent"
-        android:background="@color/background"
+        android:background="@color/background">
-        android:theme="@style/Theme.Base"
+
-        android:padding="@dimen/padding_medium">
+        <androidx.appcompat.widget.Toolbar
+            android:id="@+id/playback_toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="?android:attr/actionBarSize"
+            android:background="?android:attr/windowBackground"
+            android:theme="@style/Toolbar.Style"
+            android:clickable="true"
+            android:focusable="true"
+            app:navigationIcon="@drawable/ic_down"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:title="@string/title_playback"
+            app:titleTextAppearance="@style/TextAppearance.Toolbar.Header" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="@dimen/cover_size_playback"
+            android:layout_width="0dp"
-            android:layout_height="@dimen/cover_size_playback"
+            android:layout_height="0dp"
+            android:layout_margin="@dimen/margin_large"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
-            android:layout_marginBottom="100dp"
+            app:layout_constraintDimensionRatio="1:1"
             app:coverArt="@{song}"
+            app:layout_constraintBottom_toTopOf="@+id/playback_song"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
             tools:src="@drawable/ic_song" />
 
         <TextView
             android:id="@+id/playback_song"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/margin_medium"
             android:ellipsize="marquee"
+            android:focusable="true"
             android:fontFamily="@font/inter_semibold"
             android:marqueeRepeatLimit="marquee_forever"
             android:singleLine="true"
-            android:focusable="true"
+            android:layout_marginStart="@dimen/margin_large"
+            android:layout_marginEnd="@dimen/margin_large"
             android:text="@{song.name}"
             android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
             app:layout_constraintBottom_toTopOf="@+id/playback_artist"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/playback_cover"
+            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintVertical_chainStyle="packed"
             tools:text="Song Name" />
 
@@ -56,60 +71,60 @@
             android:id="@+id/playback_artist"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/margin_medium"
             android:ellipsize="marquee"
             android:marqueeRepeatLimit="marquee_forever"
             android:singleLine="true"
+            android:layout_marginStart="@dimen/margin_large"
+            android:layout_marginEnd="@dimen/margin_large"
             android:text="@{song.album.artist.name}"
             android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
             android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_album"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/playback_cover"
-            app:layout_constraintTop_toBottomOf="@+id/playback_song"
             tools:text="Artist Name" />
 
         <TextView
             android:id="@+id/playback_album"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/margin_medium"
             android:ellipsize="marquee"
+            android:layout_marginStart="@dimen/margin_large"
+            android:layout_marginEnd="@dimen/margin_large"
             android:marqueeRepeatLimit="marquee_forever"
+            android:layout_marginBottom="@dimen/margin_medium"
             android:singleLine="true"
             android:text="@{song.album.name}"
             android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
             android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
+            app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/playback_cover"
+            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/playback_artist"
             tools:text="Album Name" />
 
         <SeekBar
             android:id="@+id/playback_seek_bar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/margin_medium"
+            android:layout_marginBottom="@dimen/margin_medium"
-            android:paddingStart="6dp"
+            android:paddingStart="@dimen/margin_large"
-            android:paddingEnd="6dp"
+            android:paddingEnd="@dimen/margin_large"
-            android:thumbTint="?android:attr/colorPrimary"
-            android:splitTrack="false"
             android:progressBackgroundTint="?android:attr/colorControlNormal"
             android:progressTint="?android:attr/colorPrimary"
+            android:splitTrack="false"
+            android:thumbTint="?android:attr/colorPrimary"
+            app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/playback_cover"
             tools:progress="70" />
 
         <ImageButton
             android:id="@+id/playback_play_pause"
-            android:layout_width="70dp"
+            android:layout_width="@dimen/controls_size"
-            android:layout_height="70dp"
+            android:layout_height="@dimen/controls_size"
-            android:layout_marginTop="@dimen/margin_medium"
+            android:layout_marginBottom="40dp"
-            android:layout_marginBottom="@dimen/margin_medium"
             android:background="@drawable/ui_circular_button"
+            android:backgroundTint="?android:attr/colorPrimary"
             android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
             android:foregroundTint="@color/background"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
@@ -117,8 +132,6 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/playback_seek_bar"
-            android:backgroundTint="?android:attr/colorPrimary"
             tools:src="@drawable/ic_play_to_pause" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/navigation/nav_main.xml

@@ -51,6 +51,13 @@
             app:destination="@id/loading_fragment"
             app:popUpTo="@id/main_fragment"
             app:popUpToInclusive="true" />
+        <action
+            android:id="@+id/action_go_to_playback"
+            app:destination="@id/playback_fragment"
+            app:enterAnim="@anim/anim_nav_slide_up"
+            app:exitAnim="@anim/anim_nav_slide_down"
+            app:popEnterAnim="@anim/anim_nav_slide_up"
+            app:popExitAnim="@anim/anim_nav_slide_down" />
     </fragment>
     <fragment
         android:id="@+id/artist_detail_fragment"
@@ -103,4 +110,9 @@
             android:name="genreId"
             app:argType="long" />
     </fragment>
+    <fragment
+        android:id="@+id/playback_fragment"
+        android:name="org.oxycblt.auxio.playback.PlaybackFragment"
+        android:label="PlaybackFragment"
+        tools:layout="@layout/fragment_playback" />
 </navigation>

app/src/main/res/values/dimens.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <!-- TODO: Do dimens refactoring -->
     <dimen name="padding_tiny">4dp</dimen>
     <dimen name="padding_small">8dp</dimen>
     <dimen name="padding_medium">16dp</dimen>

app/src/main/res/values/strings.xml

@@ -5,6 +5,7 @@
     <!-- Title Namespace | Toolbar titles -->
     <string name="title_library_fragment">Library</string>
     <string name="title_all_songs">All Songs</string>
+    <string name="title_playback">Now Playing</string>
 
     <!-- Error Namespace | Error Labels -->
     <string name="error_no_music">No music found.</string>

app/src/main/res/values/styles.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <!-- TODO: Try to make some of these styles better -->
     <!-- Base theme -->
     <style name="Theme.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="android:windowBackground">@color/background</item>