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

Improve playback fragment styling

Browse source 
Fix some issues with the styling/icon usage on PlaybackFragment.
This commit is contained in:
OxygenCobalt 2021-01-18 11:13:22 -07:00
parent bfa8a6d8f2
commit 6687dbc2f6
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
12 changed files with 61 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/java/org/oxycblt/auxio/MainFragment.kt
View file

@ -72,7 +72,7 @@ class MainFragment : Fragment() {
itemIconTintList = navTints
itemTextColor = navTints
if (isTablet(resources)) {
if (isTablet(resources) && !isLandscape(resources)) {
labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED
}
}

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

@ -118,15 +118,15 @@ class PlaybackFragment : Fragment(), SeekBar.OnSeekBarChangeListener {
when (it) {
LoopMode.NONE -> {
binding.playbackLoop.imageTintList = controlColor
binding.playbackLoop.setImageResource(R.drawable.ic_loop_large)
binding.playbackLoop.setImageResource(R.drawable.ic_loop)
}
LoopMode.ONCE -> {
binding.playbackLoop.imageTintList = accentColor
binding.playbackLoop.setImageResource(R.drawable.ic_loop_one_large)
binding.playbackLoop.setImageResource(R.drawable.ic_loop_one)
}
LoopMode.INFINITE -> {
binding.playbackLoop.imageTintList = accentColor
binding.playbackLoop.setImageResource(R.drawable.ic_loop_large)
binding.playbackLoop.setImageResource(R.drawable.ic_loop)
}
else -> return@observe

11
app/src/main/res/drawable/ic_loop_large.xml
View file

@ -1,11 +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="?attr/colorControlNormal"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4z" />
</vector>

11
app/src/main/res/drawable/ic_loop_one_large.xml
View file

@ -1,11 +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="?attr/colorControlNormal"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4zM13,15L13,9h-1l-2,1v1h1.5v4L13,15z" />
</vector>

11
app/src/main/res/drawable/ic_shuffle_large.xml
View file

@ -1,11 +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="?attr/colorControlNormal"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M10.59,9.17L5.41,4 4,5.41l5.17,5.17 1.42,-1.41zM14.5,4l2.04,2.04L4,18.59 5.41,20 17.96,7.46 20,9.5L20,4h-5.5zM14.83,13.41l-1.41,1.41 3.13,3.13L14.5,20L20,20v-5.5l-2.04,2.04 -3.13,-3.13z" />
</vector>

12
app/src/main/res/drawable/ic_skip_next_large.xml
View file

@ -1,12 +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:autoMirrored="true"
android:tint="?attr/colorControlNormal"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M6,18l8.5,-6L6,6v12zM16,6v12h2V6h-2z" />
</vector>

12
app/src/main/res/drawable/ic_skip_prev_large.xml
View file

@ -1,12 +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:autoMirrored="true"
android:tint="?attr/colorControlNormal"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z" />
</vector>

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

@ -159,17 +159,9 @@
<ImageButton
android:id="@+id/playback_play_pause"
android:layout_width="@dimen/size_play_pause"
android:layout_height="@dimen/size_play_pause"
android:layout_marginStart="@dimen/margin_large"
android:layout_marginTop="@dimen/margin_medium"
android:layout_marginEnd="@dimen/margin_large"
android:background="@drawable/ui_circular_button"
android:backgroundTint="?attr/colorPrimary"
style="@style/PlayPause"
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
android:foregroundTint="@color/background"
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
android:tint="@color/background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
@ -178,14 +170,13 @@
<ImageButton
android:id="@+id/playback_skip_next"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
style="@style/Widget.Button.Unbounded"
android:layout_marginEnd="@dimen/margin_large"
android:padding="0dp"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_next"
android:onClick="@{() -> playbackModel.skipNext()}"
android:src="@drawable/ic_skip_next_large"
android:src="@drawable/ic_skip_next"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
@ -193,14 +184,13 @@
<ImageButton
android:id="@+id/playback_skip_prev"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
style="@style/Widget.Button.Unbounded"
android:layout_marginStart="@dimen/margin_large"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_prev"
android:onClick="@{() -> playbackModel.skipPrev()}"
android:src="@drawable/ic_skip_prev_large"
android:src="@drawable/ic_skip_prev"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
app:layout_constraintStart_toEndOf="@+id/playback_loop"
@ -208,13 +198,11 @@
<ImageButton
android:id="@+id/playback_shuffle"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
style="@style/Widget.Button.Unbounded"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
android:src="@drawable/ic_shuffle_large"
android:src="@drawable/ic_shuffle"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
@ -222,13 +210,10 @@
<ImageButton
android:id="@+id/playback_loop"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:background="@drawable/ui_unbounded_ripple"
style="@style/Widget.Button.Unbounded"
android:contentDescription="@string/description_change_loop"
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
android:src="@drawable/ic_loop_large"
android:src="@drawable/ic_loop"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
app:layout_constraintHorizontal_chainStyle="packed"

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

@ -161,17 +161,9 @@
<ImageButton
android:id="@+id/playback_play_pause"
android:layout_width="@dimen/size_play_pause"
android:layout_height="@dimen/size_play_pause"
android:layout_marginStart="@dimen/margin_large"
android:layout_marginTop="@dimen/margin_medium"
android:layout_marginEnd="@dimen/margin_large"
android:background="@drawable/ui_circular_button"
android:backgroundTint="?attr/colorPrimary"
style="@style/PlayPause"
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
android:foregroundTint="@color/background"
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
android:tint="@color/background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
@ -180,14 +172,15 @@
<ImageButton
android:id="@+id/playback_skip_next"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Button.Unbounded"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:layout_marginEnd="@dimen/margin_large"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_next"
android:onClick="@{() -> playbackModel.skipNext()}"
android:src="@drawable/ic_skip_next_large"
android:src="@drawable/ic_skip_next"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
@ -195,14 +188,14 @@
<ImageButton
android:id="@+id/playback_skip_prev"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Button.Unbounded"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:layout_marginStart="@dimen/margin_large"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_prev"
android:onClick="@{() -> playbackModel.skipPrev()}"
android:src="@drawable/ic_skip_prev_large"
android:src="@drawable/ic_skip_prev"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
app:layout_constraintStart_toEndOf="@+id/playback_loop"
@ -210,13 +203,14 @@
<ImageButton
android:id="@+id/playback_shuffle"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Button.Unbounded"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
android:src="@drawable/ic_shuffle_large"
android:src="@drawable/ic_shuffle"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
@ -224,13 +218,13 @@
<ImageButton
android:id="@+id/playback_loop"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.Button.Unbounded"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_change_loop"
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
android:src="@drawable/ic_loop_large"
android:src="@drawable/ic_loop"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
app:layout_constraintHorizontal_chainStyle="packed"

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

@ -148,17 +148,10 @@
<ImageButton
android:id="@+id/playback_play_pause"
android:layout_width="@dimen/size_play_pause"
android:layout_height="@dimen/size_play_pause"
android:layout_marginStart="@dimen/margin_large"
android:layout_marginEnd="@dimen/margin_large"
style="@style/PlayPause"
android:layout_marginBottom="@dimen/margin_medium"
android:background="@drawable/ui_circular_button"
android:backgroundTint="?attr/colorPrimary"
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
android:foregroundTint="@color/background"
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
android:tint="@color/background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
@ -166,14 +159,11 @@
<ImageButton
android:id="@+id/playback_skip_next"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
style="@style/Widget.Button.Unbounded"
android:layout_marginEnd="@dimen/margin_large"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_next"
android:onClick="@{() -> playbackModel.skipNext()}"
android:src="@drawable/ic_skip_next_large"
android:src="@drawable/ic_skip_next"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
@ -181,14 +171,12 @@
<ImageButton
android:id="@+id/playback_skip_prev"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
style="@style/Widget.Button.Unbounded"
android:layout_marginStart="@dimen/margin_large"
android:background="@drawable/ui_unbounded_ripple"
android:contentDescription="@string/description_skip_prev"
android:onClick="@{() -> playbackModel.skipPrev()}"
android:src="@drawable/ic_skip_prev_large"
android:padding="0dp"
android:src="@drawable/ic_skip_prev"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
app:layout_constraintStart_toEndOf="@+id/playback_loop"
@ -196,13 +184,11 @@
<ImageButton
android:id="@+id/playback_shuffle"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:background="@drawable/ui_unbounded_ripple"
style="@style/Widget.Button.Unbounded"
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
android:src="@drawable/ic_shuffle_large"
android:src="@drawable/ic_shuffle"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
@ -210,13 +196,10 @@
<ImageButton
android:id="@+id/playback_loop"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="@dimen/size_play_pause_compact"
android:layout_height="@dimen/size_play_pause_compact"
android:background="@drawable/ui_unbounded_ripple"
style="@style/Widget.Button.Unbounded"
android:contentDescription="@string/description_change_loop"
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
android:src="@drawable/ic_loop_large"
android:src="@drawable/ic_loop"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
app:layout_constraintHorizontal_chainStyle="packed"

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

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Padding Namespace | Dimens for padding attributes -->
<dimen name="padding_microscopic">2dp</dimen>
<dimen name="padding_tiny">4dp</dimen>
<dimen name="padding_small">8dp</dimen>
<dimen name="padding_medium">16dp</dimen>

23
app/src/main/res/values/styles.xml
View file

@ -214,4 +214,27 @@
<item name="android:textColor">@color/background</item>
<item name="cornerRadius">0dp</item>
</style>
<!-- Style for an unbounded button -->
<style name="Widget.Button.Unbounded" parent="Widget.AppCompat.Button.Borderless">
<item name="android:layout_width">@dimen/size_play_pause_compact</item>
<item name="android:layout_height">@dimen/size_play_pause_compact</item>
<item name="android:background">@drawable/ui_unbounded_ripple</item>
<item name="android:scaleType">fitCenter</item>
<item name="android:padding">@dimen/padding_microscopic</item>
</style>
<!-- Style for the play/pause circle button -->
<style name="PlayPause">
<item name="android:layout_height">@dimen/size_play_pause</item>
<item name="android:layout_width">@dimen/size_play_pause</item>
<item name="android:background">@drawable/ui_circular_button</item>
<item name="android:backgroundTint">?attr/colorPrimary</item>
<item name="android:tint">?android:attr/windowBackground</item>
<item name="android:layout_marginStart">@dimen/margin_large</item>
<item name="android:layout_marginTop">@dimen/margin_medium</item>
<item name="android:layout_marginEnd">@dimen/margin_large</item>
<item name="android:scaleType">fitCenter</item>
<item name="android:padding">@dimen/padding_medium</item>
</style>
</resources>