Use animated icons for play/pause
Use animated play/pause icons from Noice [https://github.com/ashutoshgngwr/noice] on the playback fragments.
This commit is contained in:
OxygenCobalt
parent
eb6839b10c
commit
f884adc39d
9 changed files with 192 additions and 30 deletions
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
78
app/src/main/res/drawable/ic_pause_to_play.xml
Normal file
78
app/src/main/res/drawable/ic_pause_to_play.xml
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
79
app/src/main/res/drawable/ic_play_to_pause.xml
Normal file
79
app/src/main/res/drawable/ic_play_to_pause.xml
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue