detail: update layouts

Update the detail layouts to work better on tablets and be more
consistent overall.
This commit is contained in:
OxygenCobalt 2021-11-20 16:54:03 -07:00
parent c350576f21
commit e697908a2f
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
26 changed files with 176 additions and 49 deletions

View file

@ -45,7 +45,7 @@ abstract class AuxioFetcher : Fetcher {
}
/**
* Create a mosaic image from multiple image views, Code adapted from Phonograph
* Create a mosaic image from multiple streams of image data, Code adapted from Phonograph
* https://github.com/kabouzeid/Phonograph
*/
protected fun createMosaic(context: Context, streams: List<InputStream>): FetchResult? {

View file

@ -42,7 +42,6 @@
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
tools:src="@drawable/ic_album" />

View file

@ -12,9 +12,7 @@
<ImageView
android:id="@+id/detail_cover"
style="@style/Widget.Auxio.Image.Full"
android:layout_width="@dimen/size_cover_huge_land"
android:layout_height="@dimen/size_cover_huge_land"
style="@style/Widget.Auxio.Image.Large"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"
@ -27,7 +25,7 @@
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:ellipsize="end"
android:maxLines="2"
android:maxLines="1"
app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
@ -64,12 +62,12 @@
app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
tools:text="Info B" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_play_button"
style="@style/Widget.Auxio.Button.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small"
android:layout_marginTop="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_small"
android:text="@string/lbl_play"
app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
@ -77,7 +75,7 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/detail_cover" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_shuffle_button"
style="@style/Widget.Auxio.Button.Primary"
android:layout_width="0dp"

View file

@ -42,7 +42,6 @@
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
tools:src="@drawable/ic_album" />

View file

@ -42,7 +42,6 @@
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{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"

View file

@ -0,0 +1,96 @@
<?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">
<!-- This layout is re-used across all detail fragments. Do not add databinding. -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/spacing_medium">
<ImageView
android:id="@+id/detail_cover"
style="@style/Widget.Auxio.Image.MidHuge"
app:layout_constraintDimensionRatio="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"
tools:src="@drawable/ic_artist" />
<TextView
android:id="@+id/detail_name"
style="@style/Widget.Auxio.TextView.Detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="@font/inter_semibold"
android:layout_marginStart="@dimen/spacing_medium"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toTopOf="@+id/detail_cover"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Name" />
<TextView
android:id="@+id/detail_subhead"
style="@style/Widget.Auxio.TextView.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toTopOf="@+id/detail_info"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toBottomOf="@+id/detail_name"
tools:text="Info A" />
<TextView
android:id="@+id/detail_info"
style="@style/Widget.Auxio.TextView.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
app:layout_constraintBottom_toTopOf="@+id/detail_play_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
tools:text="Info B" />
<Button
android:id="@+id/detail_play_button"
style="@style/Widget.Auxio.Button.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginTop="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_small"
android:text="@string/lbl_play"
app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toBottomOf="@+id/detail_info" />
<Button
android:id="@+id/detail_shuffle_button"
style="@style/Widget.Auxio.Button.Primary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_small"
android:text="@string/lbl_shuffle"
app:layout_constraintBottom_toBottomOf="@+id/detail_play_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/detail_play_button"
app:layout_constraintTop_toTopOf="@+id/detail_play_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View file

@ -10,9 +10,7 @@
<ImageView
android:id="@+id/detail_cover"
style="@style/Widget.Auxio.Image.Full"
android:layout_width="@dimen/size_cover_huge"
android:layout_height="@dimen/size_cover_huge"
style="@style/Widget.Auxio.Image.Huge"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"
@ -21,11 +19,12 @@
<TextView
android:id="@+id/detail_name"
style="@style/Widget.Auxio.TextView.Detail"
android:textAppearance="@style/TextAppearance.Auxio.HeadlineLarge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:ellipsize="end"
android:maxLines="4"
android:maxLines="1"
app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
@ -40,6 +39,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toTopOf="@+id/detail_info"
@ -54,26 +54,29 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
app:layout_constraintEnd_toEndOf="parent"
android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
app:layout_constraintBottom_toTopOf="@+id/detail_play_button"
tools:text="Info B" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_play_button"
style="@style/Widget.Auxio.Button.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginTop="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_small"
android:text="@string/lbl_play"
app:layout_constraintBottom_toBottomOf="@+id/detail_cover"
app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/detail_cover" />
app:layout_constraintStart_toEndOf="@+id/detail_cover"
app:layout_constraintTop_toBottomOf="@+id/detail_info" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_shuffle_button"
style="@style/Widget.Auxio.Button.Primary"
android:layout_width="0dp"

View file

@ -23,7 +23,7 @@
<ImageView
android:id="@+id/playback_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:layout_margin="@dimen/spacing_small"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"

View file

@ -47,7 +47,7 @@
<ImageView
android:id="@+id/about_auxio_icon"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginTop="@dimen/spacing_medium"
android:contentDescription="@string/desc_auxio_icon"
@ -63,7 +63,7 @@
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:text="@string/info_app_name"
android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
android:textAppearance="@style/TextAppearance.Auxio.TitleLarge"
app:layout_constraintBottom_toBottomOf="@+id/about_auxio_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/about_auxio_icon"

View file

@ -41,7 +41,6 @@
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{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"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Normal"
style="@style/Widget.Auxio.Image.Medium"
android:contentDescription="@{@string/desc_album_cover(album.name)}"
app:albumArt="@{album}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/artist_image"
style="@style/Widget.Auxio.Image.Normal"
style="@style/Widget.Auxio.Image.Medium"
android:contentDescription="@{@string/desc_artist_image(artist.resolvedName)}"
app:artistImage="@{artist}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Normal"
style="@style/Widget.Auxio.Image.Medium"
android:contentDescription="@{@string/desc_album_cover(album.name)}"
app:albumArt="@{album}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -12,9 +12,7 @@
<ImageView
android:id="@+id/detail_cover"
style="@style/Widget.Auxio.Image.Full"
android:layout_width="@dimen/size_cover_huge"
android:layout_height="@dimen/size_cover_huge"
style="@style/Widget.Auxio.Image.Huge"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
@ -53,19 +51,19 @@
app:layout_constraintTop_toBottomOf="@+id/detail_subhead"
tools:text="Info B" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_play_button"
style="@style/Widget.Auxio.Button.Secondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small"
android:layout_marginTop="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_small"
android:text="@string/lbl_play"
app:layout_constraintEnd_toStartOf="@+id/detail_shuffle_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/detail_info" />
<com.google.android.material.button.MaterialButton
<Button
android:id="@+id/detail_shuffle_button"
style="@style/Widget.Auxio.Button.Primary"
android:layout_width="0dp"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/genre_image"
style="@style/Widget.Auxio.Image.Normal"
style="@style/Widget.Auxio.Image.Medium"
android:contentDescription="@{@string/desc_genre_image(genre.resolvedName)}"
app:genreImage="@{genre}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -40,7 +40,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:layout_margin="@dimen/spacing_medium"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"

View file

@ -15,7 +15,7 @@
<ImageView
android:id="@+id/album_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"
app:layout_constraintBottom_toBottomOf="parent"

View file

@ -23,7 +23,7 @@
<ImageView
android:id="@+id/playback_cover"
style="@style/Widget.Auxio.Image.Compact"
style="@style/Widget.Auxio.Image.Small"
android:layout_margin="@dimen/spacing_small"
android:contentDescription="@{@string/desc_album_cover(song.name)}"
app:albumArt="@{song}"

View file

@ -22,7 +22,7 @@
<android.widget.ImageView
android:id="@+id/widget_cover"
style="@style/Widget.Auxio.Image.Normal"
style="@style/Widget.Auxio.Image.Medium"
android:layout_marginEnd="@dimen/spacing_medium"
android:contentDescription="@string/desc_no_cover"
android:scaleType="centerCrop"

View file

@ -14,7 +14,8 @@
<dimen name="size_cover_compact">48dp</dimen>
<dimen name="size_cover_normal">56dp</dimen>
<dimen name="size_cover_huge_land">128dp</dimen>
<dimen name="size_cover_large">128dp</dimen>
<dimen name="size_cover_mid_huge">192dp</dimen>
<dimen name="size_cover_huge">256dp</dimen>
<dimen name="size_small_unb_ripple">20dp</dimen>

View file

@ -29,6 +29,10 @@
<!-- Material configuration -->
<item name="materialAlertDialogTheme">@style/Theme.Auxio.Dialog</item>
<item name="textAppearanceDisplayLarge">@style/TextAppearance.Auxio.DisplayLarge</item>
<item name="textAppearanceDisplayMedium">@style/TextAppearance.Auxio.DisplayMedium</item>
<item name="textAppearanceDisplaySmall">@style/TextAppearance.Auxio.DisplaySmall</item>
<item name="textAppearanceHeadlineLarge">@style/TextAppearance.Auxio.HeadlineLarge</item>
<item name="textAppearanceHeadlineMedium">@style/TextAppearance.Auxio.HeadlineMedium</item>
<item name="textAppearanceHeadlineSmall">@style/TextAppearance.Auxio.HeadlineSmall</item>

View file

@ -19,19 +19,35 @@
<item name="navigationIcon">@drawable/ic_down</item>
</style>
<style name="Widget.Auxio.Image.Compact" parent="">
<style name="Widget.Auxio.Image.Small" parent="">
<item name="android:layout_width">@dimen/size_cover_compact</item>
<item name="android:layout_height">@dimen/size_cover_compact</item>
</style>
<style name="Widget.Auxio.Image.Normal" parent="">
<style name="Widget.Auxio.Image.Medium" parent="">
<item name="android:layout_width">@dimen/size_cover_normal</item>
<item name="android:layout_height">@dimen/size_cover_normal</item>
</style>
<style name="Widget.Auxio.Image.Large" parent="">
<item name="android:layout_width">@dimen/size_cover_large</item>
<item name="android:layout_height">@dimen/size_cover_large</item>
</style>
<style name="Widget.Auxio.Image.MidHuge" parent="">
<item name="android:layout_width">@dimen/size_cover_mid_huge</item>
<item name="android:layout_height">@dimen/size_cover_mid_huge</item>
</style>
<style name="Widget.Auxio.Image.Huge" parent="">
<item name="android:layout_width">@dimen/size_cover_huge</item>
<item name="android:layout_height">@dimen/size_cover_huge</item>
</style>
<style name="Widget.Auxio.Image.Full" parent="">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="layout_constraintDimensionRatio">1</item>
</style>
<style name="Widget.Auxio.ItemLayout" parent="">
@ -108,7 +124,7 @@
</style>
<style name="Widget.Auxio.TextView.Detail" parent="Widget.Auxio.TextView.Base">
<item name="android:textAppearance">@style/TextAppearance.Auxio.HeadlineSmall</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleLarge</item>
<item name="android:textAlignment">viewStart</item>
</style>

View file

@ -1,19 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Basic Material3 typography -->
<style name="TextAppearance.Auxio.DisplayLarge" parent="TextAppearance.Material3.DisplayLarge">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
</style>
<style name="TextAppearance.Auxio.DisplayMedium" parent="TextAppearance.Material3.DisplayMedium">
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.DisplaySmall" parent="TextAppearance.Material3.DisplaySmall">
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.HeadlineLarge" parent="TextAppearance.Material3.HeadlineLarge">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
</style>
<style name="TextAppearance.Auxio.HeadlineMedium" parent="TextAppearance.Material3.HeadlineMedium">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.HeadlineSmall" parent="TextAppearance.Material3.HeadlineSmall">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.TitleLarge" parent="TextAppearance.Material3.TitleLarge">