Fabio/Auxio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: use material play/pause icons

Browse source 
The old play/pause icons that I used to use were really bad and didn't
work right on many display densities. Give up and just use the material
ones.
This commit is contained in:
OxygenCobalt 2021-08-21 09:52:39 -06:00
parent ad2c02936a
commit 4c59c37111
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
14 changed files with 19 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/src/main/java/org/oxycblt/auxio/playback/PlayPauseButton.kt
View file

@ -19,14 +19,9 @@
package org.oxycblt.auxio.playback package org.oxycblt.auxio.playback
import android.content.Context import android.content.Context
import android.graphics.drawable.Animatable2
import android.graphics.drawable.Drawable
import android.os.Build
import android.util.AttributeSet import android.util.AttributeSet
import androidx.annotation.RequiresApi
import androidx.appcompat.widget.AppCompatImageButton import androidx.appcompat.widget.AppCompatImageButton
import org.oxycblt.auxio.R import org.oxycblt.auxio.R
import org.oxycblt.auxio.resolveAnimDrawable
/** /**
* Custom [AppCompatImageButton] that handles the animated play/pause icons. * Custom [AppCompatImageButton] that handles the animated play/pause icons.
@ -38,58 +33,15 @@ class PlayPauseButton @JvmOverloads constructor(
attrs: AttributeSet? = null, attrs: AttributeSet? = null,
defStyleAttr: Int = -1 defStyleAttr: Int = -1
) : AppCompatImageButton(context, attrs, defStyleAttr) { ) : AppCompatImageButton(context, attrs, defStyleAttr) {
private val iconPauseToPlay = R.drawable.ic_pause_to_play.resolveAnimDrawable(context)
private val iconPlayToPause = R.drawable.ic_play_to_pause.resolveAnimDrawable(context)
init {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
fixSeams()
}
}
/** /**
* Update the play/pause icon to reflect [isPlaying] * Update the play/pause icon to reflect [isPlaying]
* @param animate Whether the icon change should be animated or not. * @param animate Whether the icon change should be animated or not.
*/ */
fun setPlaying(isPlaying: Boolean, animate: Boolean) { fun setPlaying(isPlaying: Boolean, animate: Boolean) {
if (isPlaying) { if (isPlaying) {
if (animate) { setImageResource(R.drawable.ic_pause)
setImageDrawable(iconPlayToPause)
iconPlayToPause.start()
} else {
setImageResource(R.drawable.ic_pause_large)
}
} else { } else {
if (animate) { setImageResource(R.drawable.ic_play)
setImageDrawable(iconPauseToPlay)
iconPauseToPlay.start()
} else {
setImageResource(R.drawable.ic_play_large)
}
}
}
/**
* Hack that fixes an issue where a seam would display in the middle of the play button,
* probably as a result of floating point precision errors. Thanks IEEE 754.
*/
@RequiresApi(Build.VERSION_CODES.M)
private fun fixSeams() {
iconPauseToPlay.registerAnimationCallback(object : Animatable2.AnimationCallback() {
override fun onAnimationEnd(drawable: Drawable?) {
// ic_play_large is a unified vector, compared to the two paths on the
// animated vector. So switch to that when the animation completes to prevent the
// seam from displaying.
setImageResource(R.drawable.ic_play_large)
}
})
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
iconPauseToPlay.clearAnimationCallbacks()
} }
} }
} }

10
app/src/main/res/drawable/ic_pause.xml
View file

@ -2,10 +2,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" <vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp" android:width="24dp"
android:height="24dp" android:height="24dp"
android:tint="?attr/colorControlNormal"
android:viewportWidth="24" android:viewportWidth="24"
android:viewportHeight="24"> android:viewportHeight="24"
<path android:tint="?attr/colorControlNormal">
android:fillColor="@android:color/white" <path
android:pathData="M5.571 19.5h4.286v-15H5.571zm8.572-15v15h4.286v-15z" /> android:fillColor="@android:color/white"
android:pathData="M6,19h4L10,5L6,5v14zM14,5v14h4L18,5h-4z"/>
</vector> </vector>

22
app/src/main/res/drawable/ic_pause_large.xml
View file

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="32dp"
android:tint="@color/control"
android:viewportWidth="24"
android:viewportHeight="24">
<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>

44
app/src/main/res/drawable/ic_pause_to_play.xml
View file

@ -1,44 +0,0 @@
<?xml version="1.0" encoding="utf-8"?><!-- Animated 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"
android:drawable="@drawable/ic_pause_large">
<target android:name="play_upper">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
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="@android:integer/config_shortAnimTime"
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>

10
app/src/main/res/drawable/ic_play.xml
View file

@ -2,10 +2,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" <vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp" android:width="24dp"
android:height="24dp" android:height="24dp"
android:tint="?attr/colorControlNormal"
android:viewportWidth="24" android:viewportWidth="24"
android:viewportHeight="24"> android:viewportHeight="24"
<path android:tint="?attr/colorControlNormal">
android:fillColor="@android:color/white" <path
android:pathData="M5.078 4.089V12h13.844zm0 15.822V12h13.844z" /> android:fillColor="@android:color/white"
android:pathData="M8,5v14l11,-7L8,5z"/>
</vector> </vector>

21
app/src/main/res/drawable/ic_play_large.xml
View file

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="32dp"
android:tint="@color/control"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="play"
android:pivotX="12"
android:pivotY="12">
<path
android:name="play_upper"
android:fillColor="#FF000000"
android:pathData="m 8.2501424,6.0001505 v 5.9996335 6.000151 L 18.749759,11.999784 Z" />
<path
android:name="play_lower"
android:fillColor="#FF000000"
android:pathData="m 8.2501424,6.0001505 v 5.9996335 6.000151 L 18.749759,11.999784 Z" />
</group>
</vector>

44
app/src/main/res/drawable/ic_play_to_pause.xml
View file

@ -1,44 +0,0 @@
<?xml version="1.0" encoding="utf-8"?><!--Animated 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"
android:drawable="@drawable/ic_play_large">
<target android:name="play_upper">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
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="@android:integer/config_shortAnimTime"
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>

2
app/src/main/res/layout-land/fragment_compact_playback.xml
View file

@ -70,7 +70,7 @@
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
<ProgressBar <ProgressBar
android:id="@+id/playback_progress" android:id="@+id/playback_progress"

2
app/src/main/res/layout-land/fragment_playback.xml
View file

@ -164,7 +164,7 @@
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration" app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
app:layout_constraintStart_toStartOf="@+id/playback_duration_current" app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
app:layout_constraintTop_toBottomOf="@+id/playback_duration_current" app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
<ImageButton <ImageButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"

2
app/src/main/res/layout-xlarge-land/fragment_playback.xml
View file

@ -165,7 +165,7 @@
app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration" app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
app:layout_constraintStart_toStartOf="@+id/playback_duration_current" app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
app:layout_constraintTop_toBottomOf="@+id/playback_duration_current" app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
<ImageButton <ImageButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"

2
app/src/main/res/layout-xlarge/fragment_playback.xml
View file

@ -152,7 +152,7 @@
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration" app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
app:layout_constraintStart_toStartOf="@+id/playback_duration_current" app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
<ImageButton <ImageButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"

3
app/src/main/res/layout/fragment_compact_playback.xml
View file

@ -74,11 +74,10 @@
android:layout_margin="@dimen/spacing_small" android:layout_margin="@dimen/spacing_small"
android:contentDescription="@string/desc_play_pause" android:contentDescription="@string/desc_play_pause"
android:onClick="@{() -> playbackModel.invertPlayingStatus()}" android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>
</layout> </layout>

2
app/src/main/res/layout/fragment_playback.xml
View file

@ -148,7 +148,7 @@
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration" app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
app:layout_constraintStart_toStartOf="@+id/playback_duration_current" app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
tools:src="@drawable/ic_pause_large" /> tools:src="@drawable/ic_pause" />
<ImageButton <ImageButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"

2
app/src/main/res/values/dimens.xml
View file

@ -32,7 +32,7 @@
<dimen name="size_cover_huge_land">136dp</dimen> <dimen name="size_cover_huge_land">136dp</dimen>
<dimen name="size_cover_huge">264dp</dimen> <dimen name="size_cover_huge">264dp</dimen>
<dimen name="size_play_pause">72dp</dimen> <dimen name="size_play_pause">64dp</dimen>
<dimen name="size_unbounded">36dp</dimen> <dimen name="size_unbounded">36dp</dimen>
<dimen name="size_scroll_thumb">48dp</dimen> <dimen name="size_scroll_thumb">48dp</dimen>
<dimen name="size_clear">32dp</dimen> <dimen name="size_clear">32dp</dimen>