Fix issues with playback layouts on small screens
Fix problems with the playback layouts when the screen size is lower than 390dp.
This commit is contained in:
OxygenCobalt
parent
a34850b9cb
commit
23ddfd4d99
4 changed files with 230 additions and 26 deletions
|
|
@ -4,6 +4,9 @@
|
|||
xmlns:tools="http://schemas.android.com/tools"
|
||||
tools:context=".playback.PlaybackFragment">
|
||||
|
||||
<!-- FIXME: Way controls are designed can cause problems on displays 4.5 inch or smaller.
|
||||
Need to fix it but the way I did it with the other layouts will create bad spacing here -->
|
||||
|
||||
<data>
|
||||
|
||||
<variable
|
||||
|
|
@ -163,26 +166,25 @@
|
|||
<ImageButton
|
||||
android:id="@+id/playback_loop"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_change_loop"
|
||||
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
|
||||
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"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_prev"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:layout_marginEnd="@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"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_loop"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
|
|
@ -191,34 +193,33 @@
|
|||
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
|
||||
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
|
||||
tools:src="@drawable/ic_play_to_pause" />
|
||||
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_next"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:layout_marginStart="@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"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_shuffle"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_shuffle"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
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"
|
||||
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"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
|
||||
|
||||
|
|
|
|||
|
|
@ -165,25 +165,24 @@
|
|||
<ImageButton
|
||||
android:id="@+id/playback_loop"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_change_loop"
|
||||
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
|
||||
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"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_prev"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_prev"
|
||||
android:onClick="@{() -> playbackModel.skipPrev()}"
|
||||
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"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
|
|
@ -192,31 +191,30 @@
|
|||
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
|
||||
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song_container_duration"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_duration_current"
|
||||
tools:src="@drawable/ic_play_to_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_next"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_next"
|
||||
android:onClick="@{() -> playbackModel.skipNext()}"
|
||||
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"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_shuffle"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
|
||||
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
|
||||
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"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
|
||||
|
||||
|
|
|
|||
208
app/src/main/res/layout-large/fragment_playback.xml
Normal file
208
app/src/main/res/layout-large/fragment_playback.xml
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
<?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.PlaybackFragment">
|
||||
|
||||
<data>
|
||||
|
||||
<variable
|
||||
name="song"
|
||||
type="org.oxycblt.auxio.music.Song" />
|
||||
|
||||
<variable
|
||||
name="playbackModel"
|
||||
type="org.oxycblt.auxio.playback.PlaybackViewModel" />
|
||||
|
||||
<variable
|
||||
name="detailModel"
|
||||
type="org.oxycblt.auxio.detail.DetailViewModel" />
|
||||
</data>
|
||||
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/playback_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:background="@color/background"
|
||||
android:fitsSystemWindows="true">
|
||||
|
||||
<androidx.appcompat.widget.Toolbar
|
||||
android:id="@+id/playback_toolbar"
|
||||
style="@style/Toolbar.Style.Icon"
|
||||
android:elevation="0dp"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:menu="@menu/menu_playback"
|
||||
app:navigationIcon="@drawable/ic_down"
|
||||
app:title="@string/label_playback" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:layout_margin="@dimen/margin_mid_large"
|
||||
android:contentDescription="@{@string/description_album_cover(song.name)}"
|
||||
android:elevation="@dimen/elevation_normal"
|
||||
android:outlineProvider="bounds"
|
||||
app:coverArt="@{song}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_song"
|
||||
app:layout_constraintDimensionRatio="1:1"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
|
||||
tools:src="@drawable/ic_song" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_song"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_mid_large"
|
||||
android:layout_marginEnd="@dimen/margin_mid_large"
|
||||
android:ellipsize="marquee"
|
||||
android:fontFamily="@font/inter_semibold"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
|
||||
android:singleLine="true"
|
||||
android:text="@{song.name}"
|
||||
android:textAlignment="viewStart"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_artist"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintVertical_chainStyle="packed"
|
||||
tools:text="Song Name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_artist"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_mid_large"
|
||||
android:layout_marginEnd="@dimen/margin_mid_large"
|
||||
android:ellipsize="end"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
|
||||
android:singleLine="true"
|
||||
android:text="@{song.album.artist.name}"
|
||||
android:textAlignment="viewStart"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
|
||||
android:textColor="?android:attr/textColorSecondary"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_album"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:text="Artist Name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_album"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_mid_large"
|
||||
android:layout_marginEnd="@dimen/margin_mid_large"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:ellipsize="end"
|
||||
android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
|
||||
android:singleLine="true"
|
||||
android:text="@{song.album.name}"
|
||||
android:textAlignment="viewStart"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
|
||||
android:textColor="?android:attr/textColorSecondary"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:text="Album Name" />
|
||||
|
||||
<SeekBar
|
||||
android:id="@+id/playback_seek_bar"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:clickable="true"
|
||||
android:focusable="true"
|
||||
android:paddingStart="@dimen/margin_mid_large"
|
||||
android:paddingEnd="@dimen/margin_mid_large"
|
||||
android:progressBackgroundTint="?android:attr/colorControlNormal"
|
||||
android:progressTint="?attr/colorPrimary"
|
||||
android:splitTrack="false"
|
||||
android:thumbOffset="@dimen/offset_thumb"
|
||||
android:thumbTint="?attr/colorPrimary"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:progress="70" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_duration_current"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_mid_large"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:text="11:38" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_song_duration"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginEnd="@dimen/margin_mid_large"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:text="@{song.formattedDuration}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
tools:text="16:16" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_loop"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_change_loop"
|
||||
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
|
||||
android:src="@drawable/ic_loop"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_prev"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_prev"
|
||||
android:onClick="@{() -> playbackModel.skipPrev()}"
|
||||
android:src="@drawable/ic_skip_prev"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_play_pause"
|
||||
style="@style/PlayPause"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
|
||||
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
tools:src="@drawable/ic_play_to_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_next"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_next"
|
||||
android:onClick="@{() -> playbackModel.skipNext()}"
|
||||
android:src="@drawable/ic_skip_next"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_play_pause"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_shuffle"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
|
||||
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
|
||||
android:src="@drawable/ic_shuffle"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
</layout>
|
||||
|
|
@ -152,19 +152,17 @@
|
|||
<ImageButton
|
||||
android:id="@+id/playback_loop"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_mid_small"
|
||||
android:contentDescription="@string/description_change_loop"
|
||||
android:onClick="@{() -> playbackModel.incrementLoopStatus()}"
|
||||
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"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_prev"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_prev"
|
||||
android:onClick="@{() -> playbackModel.skipPrev()}"
|
||||
android:src="@drawable/ic_skip_prev"
|
||||
|
|
@ -180,14 +178,13 @@
|
|||
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
|
||||
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toStartOf="@+id/playback_skip_next"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_prev"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
|
||||
app:layout_constraintStart_toStartOf="@+id/playback_duration_current"
|
||||
tools:src="@drawable/ic_play_to_pause" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_skip_next"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:contentDescription="@string/description_skip_next"
|
||||
android:onClick="@{() -> playbackModel.skipNext()}"
|
||||
android:src="@drawable/ic_skip_next"
|
||||
|
|
@ -199,12 +196,12 @@
|
|||
<ImageButton
|
||||
android:id="@+id/playback_shuffle"
|
||||
style="@style/Widget.Button.Unbounded"
|
||||
android:layout_marginEnd="@dimen/margin_mid_small"
|
||||
android:contentDescription="@{playbackModel.isShuffling() ? @string/description_shuffle_off : @string/description_shuffle_on"
|
||||
android:onClick="@{() -> playbackModel.invertShuffleStatus()}"
|
||||
android:src="@drawable/ic_shuffle"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_skip_next"
|
||||
app:layout_constraintEnd_toEndOf="@+id/playback_song_duration"
|
||||
app:layout_constraintTop_toTopOf="@+id/playback_skip_next" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue