Use animated icons for play/pause

Use animated play/pause icons from Noice [https://github.com/ashutoshgngwr/noice] on the playback fragments.

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

@@ -1,10 +1,12 @@
 package org.oxycblt.auxio.playback
 
+import android.graphics.drawable.AnimatedVectorDrawable
 import android.os.Bundle
 import android.util.Log
 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 org.oxycblt.auxio.R
@@ -25,6 +27,13 @@ class CompactPlaybackFragment : Fragment() {
     ): View? {
         val binding = FragmentCompactPlaybackBinding.inflate(inflater)
 
+        val iconPauseToPlay = ContextCompat.getDrawable(
+            requireContext(), R.drawable.ic_pause_to_play
+        ) as AnimatedVectorDrawable
+        val iconPlayToPause = ContextCompat.getDrawable(
+            requireContext(), R.drawable.ic_play_to_pause
+        ) as AnimatedVectorDrawable
+
         // --- UI SETUP ---
 
         binding.lifecycleOwner = this
@@ -59,9 +68,11 @@ class CompactPlaybackFragment : Fragment() {
         // TODO: Animate this icon
         playbackModel.isPlaying.observe(viewLifecycleOwner) {
             if (it) {
-                binding.songControls.setImageResource(R.drawable.ic_pause)
+                binding.playbackControls.setImageDrawable(iconPauseToPlay)
+                iconPauseToPlay.start()
             } else {
-                binding.songControls.setImageResource(R.drawable.ic_play)
+                binding.playbackControls.setImageDrawable(iconPlayToPause)
+                iconPlayToPause.start()
             }
         }
 

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

@@ -1,10 +1,12 @@
 package org.oxycblt.auxio.playback
 
 import android.content.res.ColorStateList
+import android.graphics.drawable.AnimatedVectorDrawable
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.content.ContextCompat
 import androidx.fragment.app.activityViewModels
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import org.oxycblt.auxio.R
@@ -28,6 +30,13 @@ class PlaybackFragment : BottomSheetDialogFragment() {
         val accentColor = ColorStateList.valueOf(accent.first.toColor(requireContext()))
         val white = ColorStateList.valueOf(android.R.color.white.toColor(requireContext()))
 
+        val iconPauseToPlay = ContextCompat.getDrawable(
+            requireContext(), R.drawable.ic_pause_to_play
+        ) as AnimatedVectorDrawable
+        val iconPlayToPause = ContextCompat.getDrawable(
+            requireContext(), R.drawable.ic_play_to_pause
+        ) as AnimatedVectorDrawable
+
         // --- UI SETUP ---
 
         binding.playbackModel = playbackModel
@@ -50,10 +59,14 @@ class PlaybackFragment : BottomSheetDialogFragment() {
 
         playbackModel.isPlaying.observe(viewLifecycleOwner) {
             if (it) {
-                binding.playbackPlayPause.setImageResource(R.drawable.ic_pause)
+                binding.playbackPlayPause.setImageDrawable(iconPauseToPlay)
+                iconPauseToPlay.start()
+
                 binding.playbackPlayPause.backgroundTintList = accentColor
             } else {
-                binding.playbackPlayPause.setImageResource(R.drawable.ic_play)
+                binding.playbackPlayPause.setImageDrawable(iconPlayToPause)
+                iconPlayToPause.start()
+
                 binding.playbackPlayPause.backgroundTintList = white
             }
         }

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

@@ -21,7 +21,10 @@ class PlaybackViewModel : ViewModel() {
 
     fun updateSong(song: Song) {
         mCurrentSong.value = song
-        mIsPlaying.value = true
+
+        if (!mIsPlaying.value!!) {
+            mIsPlaying.value = true
+        }
     }
 
     fun openPlayback() {

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

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="30dp"
-    android:height="30dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="@color/control_color">
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M6,19h4L10,5L6,5v14zM14,5v14h4L18,5h-4z" />
-</vector>

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

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+Animated control icons derived from Noice
+https://github.com/ashutoshgngwr/noice
+-->
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+
+    <aapt:attr name="android:drawable">
+        <vector
+            android:width="32dp"
+            android:height="32dp"
+            android:alpha="1"
+            android:viewportWidth="24.0"
+            android:viewportHeight="24.0">
+
+            <group
+                android:name="play"
+                android:pivotX="12"
+                android:pivotY="12">
+
+                <path
+                    android:name="play_upper"
+                    android:fillColor="@android:color/white"
+                    android:pathData="M8.25,6L8.25,12L18.75,12L18.75,12Z" />
+
+                <path
+                    android:name="play_lower"
+                    android:fillColor="@android:color/white"
+                    android:pathData="M8.25,18L8.25,12L18.75,12L18.75,12Z" />
+
+            </group>
+
+        </vector>
+    </aapt:attr>
+
+    <target android:name="play_upper">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="pathData"
+                    android:valueFrom="M8.25,6L8.25,12L18.75,12L18.75,12Z"
+                    android:valueTo="M6,7.5L6,10.5L18,10.5L18,7.5Z"
+                    android:valueType="pathType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="play_lower">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="pathData"
+                    android:valueFrom="M8.25,18L8.25,12L18.75,12L18.75,12Z"
+                    android:valueTo="M6,16.5L6,13.5L18,13.5L18,16.5Z"
+                    android:valueType="pathType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="play">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="rotation"
+                    android:valueFrom="0"
+                    android:valueTo="90"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+</animated-vector>

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

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="30dp"
-    android:height="30dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="@color/control_color">
-    <path
-        android:name="play"
-        android:fillColor="@android:color/white"
-        android:pathData="M8,5v14l11,-7z" />
-</vector>

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

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+Animated control icons derived from Noice
+https://github.com/ashutoshgngwr/noice
+-->
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+
+    <aapt:attr name="android:drawable">
+        <vector
+            android:width="32dp"
+            android:height="32dp"
+            android:tint="@android:color/white"
+            android:viewportWidth="24.0"
+            android:viewportHeight="24.0">
+
+            <group
+                android:name="play"
+                android:pivotX="12"
+                android:pivotY="12"
+                android:rotation="-90">
+
+                <path
+                    android:name="play_upper"
+                    android:fillColor="@android:color/white"
+                    android:pathData="M6,7.5L6,10.5L18,10.5L18,7.5Z" />
+
+                <path
+                    android:name="play_lower"
+                    android:fillColor="@android:color/white"
+                    android:pathData="M6,16.5L6,13.5L18,13.5L18,16.5Z" />
+
+            </group>
+
+        </vector>
+    </aapt:attr>
+
+    <target android:name="play_upper">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="pathData"
+                    android:valueFrom="M6,7.5L6,10.5L18,10.5L18,7.5Z"
+                    android:valueTo="M8.25,6L8.25,12L18.75,12L18.75,12Z"
+                    android:valueType="pathType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="play_lower">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="pathData"
+                    android:valueFrom="M6,16.5L6,13.5L18,13.5L18,16.5Z"
+                    android:valueTo="M8.25,18L8.25,12L18.75,12L18.75,12Z"
+                    android:valueType="pathType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="play">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:duration="200"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="rotation"
+                    android:valueFrom="-90"
+                    android:valueTo="0"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+
+</animated-vector>

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

@@ -95,7 +95,8 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent"
-            tools:src="@drawable/ic_play" />
+            tools:src="@drawable/ic_play_to_pause"
+            tools:tint="@color/control_color" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

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

@@ -119,7 +119,7 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/playback_seek_bar"
             android:backgroundTint="?android:attr/colorPrimary"
-            tools:src="@drawable/ic_play" />
+            tools:src="@drawable/ic_play_to_pause" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>