playback: update tablet layouts
Use proper exact-size layouts for the tablet views. This also adds a new compact view that shows more controls for landscape/tablet layouts.
This commit is contained in:
parent
58c2681f72
commit
4475d4a5cc
8 changed files with 152 additions and 21 deletions
|
@ -142,10 +142,6 @@ class MainFragment : Fragment(), PlaybackBarLayout.ActionCallback {
|
|||
return binding.root
|
||||
}
|
||||
|
||||
override fun onPlayPauseClick() {
|
||||
playbackModel.invertPlayingStatus()
|
||||
}
|
||||
|
||||
override fun onNavToPlayback() {
|
||||
findNavController().navigate(
|
||||
MainFragmentDirections.actionGoToPlayback()
|
||||
|
@ -155,4 +151,16 @@ class MainFragment : Fragment(), PlaybackBarLayout.ActionCallback {
|
|||
override fun onNavToItem() {
|
||||
detailModel.navToItem(playbackModel.song.value ?: return)
|
||||
}
|
||||
|
||||
override fun onPrev() {
|
||||
playbackModel.skipPrev()
|
||||
}
|
||||
|
||||
override fun onPlayPauseClick() {
|
||||
playbackModel.invertPlayingStatus()
|
||||
}
|
||||
|
||||
override fun onNext() {
|
||||
playbackModel.skipNext()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -352,7 +352,9 @@ class PlaybackBarLayout @JvmOverloads constructor(
|
|||
* view is detached.
|
||||
*/
|
||||
interface ActionCallback {
|
||||
fun onPrev()
|
||||
fun onPlayPauseClick()
|
||||
fun onNext()
|
||||
fun onNavToItem()
|
||||
fun onNavToPlayback()
|
||||
}
|
||||
|
|
|
@ -81,10 +81,6 @@ class PlaybackBarView @JvmOverloads constructor(
|
|||
true
|
||||
}
|
||||
|
||||
binding.playbackPlayPause.setOnClickListener {
|
||||
mCallback?.onPlayPauseClick()
|
||||
}
|
||||
|
||||
// Deliberately override the progress bar color [in a Lollipop-friendly way] so that
|
||||
// we use colorSecondary instead of colorSurfaceVariant. This is for two reasons:
|
||||
// 1. colorSurfaceVariant is used with the assumption that the view that is using it
|
||||
|
@ -115,9 +111,11 @@ class PlaybackBarView @JvmOverloads constructor(
|
|||
|
||||
fun setCallback(callback: PlaybackBarLayout.ActionCallback) {
|
||||
mCallback = callback
|
||||
binding.callback = callback
|
||||
}
|
||||
|
||||
fun clearCallback() {
|
||||
mCallback = null
|
||||
binding.callback = null
|
||||
}
|
||||
}
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
style="@style/Widget.Auxio.Image.Full"
|
||||
android:layout_margin="@dimen/spacing_large"
|
||||
android:layout_margin="@dimen/spacing_mid_large"
|
||||
android:contentDescription="@{@string/desc_album_cover(song.name)}"
|
||||
app:albumArt="@{song}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
|
|
|
@ -38,9 +38,7 @@
|
|||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
style="@style/Widget.Auxio.Image.Full"
|
||||
android:layout_marginStart="@dimen/spacing_large"
|
||||
android:layout_marginTop="@dimen/spacing_insane"
|
||||
android:layout_marginBottom="@dimen/spacing_insane"
|
||||
android:layout_margin="@dimen/spacing_mid_large"
|
||||
android:contentDescription="@{@string/desc_album_cover(song.name)}"
|
||||
app:albumArt="@{song}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
|
@ -38,7 +38,7 @@
|
|||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
style="@style/Widget.Auxio.Image.Full"
|
||||
android:layout_margin="@dimen/spacing_huge"
|
||||
android:layout_margin="@dimen/spacing_mid_large"
|
||||
android:contentDescription="@{@string/desc_album_cover(song.name)}"
|
||||
app:albumArt="@{song}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_song"
|
||||
|
@ -53,8 +53,8 @@
|
|||
style="@style/Widget.Auxio.TextView.Primary"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_huge"
|
||||
android:layout_marginEnd="@dimen/spacing_huge"
|
||||
android:layout_marginStart="@dimen/spacing_mid_large"
|
||||
android:layout_marginEnd="@dimen/spacing_mid_large"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
|
||||
android:text="@{song.name}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_artist"
|
||||
|
@ -68,8 +68,8 @@
|
|||
style="@style/Widget.Auxio.TextView.Secondary"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_huge"
|
||||
android:layout_marginEnd="@dimen/spacing_huge"
|
||||
android:layout_marginStart="@dimen/spacing_mid_large"
|
||||
android:layout_marginEnd="@dimen/spacing_mid_large"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
|
||||
android:text="@{song.album.artist.resolvedName}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_album"
|
||||
|
@ -82,8 +82,8 @@
|
|||
style="@style/Widget.Auxio.TextView.Secondary"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_huge"
|
||||
android:layout_marginEnd="@dimen/spacing_huge"
|
||||
android:layout_marginStart="@dimen/spacing_mid_large"
|
||||
android:layout_marginEnd="@dimen/spacing_mid_large"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
|
||||
android:text="@{song.album.name}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
|
||||
|
@ -95,8 +95,8 @@
|
|||
android:id="@+id/playback_seek_bar"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_large"
|
||||
android:layout_marginEnd="@dimen/spacing_large"
|
||||
android:layout_marginStart="@dimen/spacing_small"
|
||||
android:layout_marginEnd="@dimen/spacing_small"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent" />
|
120
app/src/main/res/layout-w600dp/view_compact_playback.xml
Normal file
120
app/src/main/res/layout-w600dp/view_compact_playback.xml
Normal file
|
@ -0,0 +1,120 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<layout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
tools:context=".playback.PlaybackBarView">
|
||||
|
||||
<data>
|
||||
|
||||
<variable
|
||||
name="song"
|
||||
type="org.oxycblt.auxio.music.Song" />
|
||||
|
||||
<variable
|
||||
name="callback"
|
||||
type="org.oxycblt.auxio.playback.PlaybackBarLayout.ActionCallback" />
|
||||
|
||||
</data>
|
||||
|
||||
<merge
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
style="@style/Widget.Auxio.Image.Compact"
|
||||
android:layout_margin="@dimen/spacing_small"
|
||||
android:contentDescription="@{@string/desc_album_cover(song.name)}"
|
||||
app:albumArt="@{song}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_progress_bar"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:src="@drawable/ic_album" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_song"
|
||||
style="@style/Widget.Auxio.TextView.Primary.Compact"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_small"
|
||||
android:text="@{song.name}"
|
||||
android:layout_marginEnd="@dimen/spacing_small"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_info"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_cover"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_cover"
|
||||
app:layout_constraintVertical_chainStyle="packed"
|
||||
tools:text="Song Name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_info"
|
||||
style="@style/Widget.Auxio.TextView.Secondary.Compact"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/spacing_small"
|
||||
android:ellipsize="end"
|
||||
android:text="@{@string/fmt_two(song.album.artist.resolvedName, song.album.name)}"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_cover"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_song"
|
||||
tools:text="Artist Name / Album Name" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_prev"
|
||||
style="@style/Widget.Auxio.Button.Unbounded"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_margin="@dimen/spacing_small"
|
||||
android:contentDescription="@string/desc_play_pause"
|
||||
android:src="@drawable/ic_skip_prev"
|
||||
android:onClick="@{() -> callback.onPrev()}"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
|
||||
app:layout_constraintHorizontal_bias="0.5"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_song"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_play_pause"
|
||||
style="@style/Widget.Auxio.Button.Unbounded"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_margin="@dimen/spacing_small"
|
||||
android:contentDescription="@string/desc_play_pause"
|
||||
android:src="@drawable/sel_playing_state"
|
||||
android:onClick="@{() -> callback.onPlayPauseClick()}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_progress_bar"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
|
||||
app:layout_constraintHorizontal_bias="0.5"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_next"
|
||||
style="@style/Widget.Auxio.Button.Unbounded"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_margin="@dimen/spacing_small"
|
||||
android:contentDescription="@string/desc_play_pause"
|
||||
android:src="@drawable/ic_skip_next"
|
||||
android:onClick="@{() -> callback.onNext()}"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<com.google.android.material.progressindicator.LinearProgressIndicator
|
||||
android:id="@+id/playback_progress_bar"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:max="@{(int) song.seconds}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:trackColor="?attr/colorPrimary"
|
||||
tools:progress="70" />
|
||||
|
||||
</merge>
|
||||
</layout>
|
|
@ -10,6 +10,10 @@
|
|||
name="song"
|
||||
type="org.oxycblt.auxio.music.Song" />
|
||||
|
||||
<variable
|
||||
name="callback"
|
||||
type="org.oxycblt.auxio.playback.PlaybackBarLayout.ActionCallback" />
|
||||
|
||||
</data>
|
||||
|
||||
<merge
|
||||
|
@ -66,6 +70,7 @@
|
|||
android:layout_margin="@dimen/spacing_small"
|
||||
android:contentDescription="@string/desc_play_pause"
|
||||
android:src="@drawable/sel_playing_state"
|
||||
android:onClick="@{() -> callback.onPlayPauseClick()}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_progress_bar"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
|
Loading…
Reference in a new issue