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

ui: tweak tablet playback layouts

Browse source 
- Use dual pane layouts on portrait and landscape
- Make buttons cope with restrictive width
This commit is contained in:
Alexander Capehart 2024-07-05 11:49:39 -06:00
parent f9e6017b5f
commit ebdf3e153b
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
3 changed files with 65 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
app/src/main/res/layout-sw600dp/fragment_playback_panel.xml
View file

@ -12,12 +12,12 @@
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/toolbar_playback" app:menu="@menu/toolbar_playback"
app:titleCentered="true"
app:subtitleCentered="true"
app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
app:navigationIcon="@drawable/ic_down_24" app:navigationIcon="@drawable/ic_down_24"
app:subtitleCentered="true"
app:subtitleTextAppearance="@style/TextAppearance.Auxio.BodySmall"
app:title="@string/lbl_playback" app:title="@string/lbl_playback"
app:titleCentered="true"
app:titleTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
tools:subtitle="@string/lbl_all_songs" /> tools:subtitle="@string/lbl_all_songs" />
<org.oxycblt.auxio.playback.ui.SwipeCoverView <org.oxycblt.auxio.playback.ui.SwipeCoverView
@ -26,56 +26,60 @@
android:layout_margin="@dimen/spacing_medium" android:layout_margin="@dimen/spacing_medium"
app:enablePlaybackIndicator="false" app:enablePlaybackIndicator="false"
app:enableSelectionBadge="false" app:enableSelectionBadge="false"
app:layout_constraintBottom_toTopOf="@+id/playback_song" app:layout_constraintBottom_toTopOf="@+id/playback_info_container"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar" /> app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
app:layout_constraintVertical_chainStyle="packed" />
<LinearLayout
android:id="@+id/playback_info_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_medium"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
app:layout_constraintEnd_toStartOf="@+id/playback_more"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
app:layout_constraintVertical_bias="1.0"
app:layout_constraintVertical_chainStyle="packed">
<TextView <TextView
android:id="@+id/playback_song" android:id="@+id/playback_song"
style="@style/Widget.Auxio.TextView.Primary" style="@style/Widget.Auxio.TextView.Primary"
android:layout_width="0dp" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_mid_medium"
app:layout_constraintBottom_toTopOf="@+id/playback_artist"
app:layout_constraintEnd_toStartOf="@+id/playback_more"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Song Name" /> tools:text="Song Name" />
<TextView <TextView
android:id="@+id/playback_artist" android:id="@+id/playback_artist"
style="@style/Widget.Auxio.TextView.Secondary.Marquee" style="@style/Widget.Auxio.TextView.Secondary.Marquee"
android:layout_width="0dp" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
app:layout_constraintBottom_toTopOf="@+id/playback_album"
app:layout_constraintEnd_toEndOf="@+id/playback_song"
app:layout_constraintStart_toStartOf="parent"
tools:text="Artist Name" /> tools:text="Artist Name" />
<TextView <TextView
android:id="@+id/playback_album" android:id="@+id/playback_album"
style="@style/Widget.Auxio.TextView.Secondary.Marquee" style="@style/Widget.Auxio.TextView.Secondary.Marquee"
android:layout_width="0dp" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
app:layout_constraintEnd_toEndOf="@+id/playback_song"
app:layout_constraintStart_toStartOf="parent"
tools:text="Album Name" /> tools:text="Album Name" />
</LinearLayout>
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_more" android:id="@+id/playback_more"
style="@style/Widget.Auxio.Button.Icon.Medium" style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/spacing_medium"
app:icon="@drawable/ic_more_24" app:icon="@drawable/ic_more_24"
android:layout_marginEnd="@dimen/spacing_mid_medium" app:layout_constraintBottom_toBottomOf="@+id/playback_info_container"
app:layout_constraintBottom_toBottomOf="@+id/playback_album"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_song" /> app:layout_constraintTop_toTopOf="@+id/playback_info_container" />
<org.oxycblt.auxio.playback.ui.StyledSeekBar <org.oxycblt.auxio.playback.ui.StyledSeekBar
android:id="@+id/playback_seek_bar" android:id="@+id/playback_seek_bar"
@ -86,16 +90,21 @@
app:layout_constraintBottom_toTopOf="@+id/playback_controls_container" app:layout_constraintBottom_toTopOf="@+id/playback_controls_container"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" /> app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_info_container" />
<org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout <org.oxycblt.auxio.playback.ui.ForcedLTRFrameLayout
android:id="@+id/playback_controls_container" android:id="@+id/playback_controls_container"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_medium" android:layout_marginEnd="@dimen/spacing_medium"
android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginBottom="@dimen/spacing_medium"
app:layout_constraintBottom_toBottomOf="parent"> app:layout_constraintTop_toBottomOf="@+id/playback_seek_bar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_max="400dp">
<androidx.constraintlayout.widget.ConstraintLayout <androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent" android:layout_width="match_parent"
@ -106,13 +115,11 @@
style="@style/Widget.Auxio.Button.Icon.Medium" style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/spacing_huge"
android:contentDescription="@string/desc_change_repeat" android:contentDescription="@string/desc_change_repeat"
app:icon="@drawable/ic_repeat_off_24" app:icon="@drawable/ic_repeat_off_24"
app:iconTint="@color/sel_activatable_icon" app:iconTint="@color/sel_activatable_icon"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev" app:layout_constraintBottom_toBottomOf="@+id/playback_skip_prev"
app:layout_constraintEnd_toStartOf="@+id/playback_skip_prev" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" /> app:layout_constraintTop_toTopOf="@+id/playback_skip_prev" />
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
@ -120,11 +127,12 @@
style="@style/Widget.Auxio.Button.Icon.Huge" style="@style/Widget.Auxio.Button.Icon.Huge"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/spacing_huge"
android:contentDescription="@string/desc_skip_prev" android:contentDescription="@string/desc_skip_prev"
app:icon="@drawable/ic_skip_prev_24" app:icon="@drawable/ic_skip_prev_40"
app:iconSize="40dp"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause" app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause"
app:layout_constraintEnd_toStartOf="@+id/playback_play_pause" app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
app:layout_constraintStart_toEndOf="@+id/playback_repeat"
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" /> app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
<org.oxycblt.auxio.playback.ui.AnimatedMaterialButton <org.oxycblt.auxio.playback.ui.AnimatedMaterialButton
@ -133,22 +141,22 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:contentDescription="@string/desc_play_pause" android:contentDescription="@string/desc_play_pause"
app:icon="@drawable/sel_playing_state_24" app:icon="@drawable/sel_playing_state_48"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
tools:icon="@drawable/ic_pause_24" /> tools:icon="@drawable/ic_play_24" />
<org.oxycblt.auxio.ui.RippleFixMaterialButton <org.oxycblt.auxio.ui.RippleFixMaterialButton
android:id="@+id/playback_skip_next" android:id="@+id/playback_skip_next"
style="@style/Widget.Auxio.Button.Icon.Huge" style="@style/Widget.Auxio.Button.Icon.Huge"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_huge"
android:contentDescription="@string/desc_skip_next" android:contentDescription="@string/desc_skip_next"
app:icon="@drawable/ic_skip_next_24" app:icon="@drawable/ic_skip_next_40"
app:layout_constraintBottom_toBottomOf="@+id/playback_play_pause" 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_constraintStart_toEndOf="@+id/playback_play_pause"
app:layout_constraintTop_toTopOf="@+id/playback_play_pause" /> app:layout_constraintTop_toTopOf="@+id/playback_play_pause" />
@ -157,12 +165,11 @@
style="@style/Widget.Auxio.Button.Icon.Medium" style="@style/Widget.Auxio.Button.Icon.Medium"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_huge"
android:contentDescription="@string/desc_shuffle" android:contentDescription="@string/desc_shuffle"
app:icon="@drawable/sel_shuffle_state_24" app:icon="@drawable/sel_shuffle_state_24"
app:iconTint="@color/sel_activatable_icon" app:iconTint="@color/sel_activatable_icon"
app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next" app:layout_constraintBottom_toBottomOf="@+id/playback_skip_next"
app:layout_constraintStart_toEndOf="@+id/playback_skip_next" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/playback_skip_next" app:layout_constraintTop_toTopOf="@+id/playback_skip_next"
app:tint="@color/sel_activatable_icon" /> app:tint="@color/sel_activatable_icon" />

0
app/src/main/res/layout-w600dp-land/fragment_main.xml → app/src/main/res/layout-w670dp/fragment_main.xml
View file

12
app/src/main/res/values/styles_ui.xml
View file

@ -279,16 +279,16 @@
<style name="Widget.Auxio.Button.Icon.Huge" parent="Widget.Material3.Button.IconButton"> <style name="Widget.Auxio.Button.Icon.Huge" parent="Widget.Material3.Button.IconButton">
<item name="iconSize">40dp</item> <item name="iconSize">40dp</item>
<item name="android:minWidth">@dimen/size_touchable_mid_large</item> <item name="android:minWidth">@dimen/size_touchable_medium</item>
<item name="android:minHeight">@dimen/size_touchable_mid_large</item> <item name="android:minHeight">@dimen/size_touchable_medium</item>
<item name="android:insetTop">0dp</item> <item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item> <item name="android:insetBottom">0dp</item>
<item name="android:insetLeft">0dp</item> <item name="android:insetLeft">0dp</item>
<item name="android:insetRight">0dp</item> <item name="android:insetRight">0dp</item>
<item name="android:paddingStart">10dp</item> <item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">10dp</item> <item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">10dp</item> <item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">10dp</item> <item name="android:paddingBottom">8dp</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Auxio.IconButton.Huge</item> <item name="materialThemeOverlay">@style/ThemeOverlay.Auxio.IconButton.Huge</item>
</style> </style>