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

loading: redesign ui

Browse source 
Redesign the loading UI to be in line with the rest of Auxio and the
upcoming Android 12 splash screen [sort of]. This also updates the
header and button designs so that the layout heirarchy is better/more
information dense.
This commit is contained in:
OxygenCobalt 2021-08-08 18:06:25 -06:00
parent 97459fdcca
commit fe29e01311
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
8 changed files with 101 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/src/main/java/org/oxycblt/auxio/loading/LoadingFragment.kt
View file

@ -141,10 +141,9 @@ class LoadingFragment : Fragment() {
*/ */
private fun showLoading(binding: FragmentLoadingBinding) { private fun showLoading(binding: FragmentLoadingBinding) {
binding.apply { binding.apply {
loadingErrorIcon.visibility = View.GONE loadingErrorIcon.visibility = View.INVISIBLE
loadingErrorText.visibility = View.GONE loadingErrorText.visibility = View.INVISIBLE
loadingRetryButton.visibility = View.GONE loadingActionButton.visibility = View.INVISIBLE
loadingGrantButton.visibility = View.GONE
loadingCircle.visibility = View.VISIBLE loadingCircle.visibility = View.VISIBLE
} }
} }
@ -158,21 +157,37 @@ class LoadingFragment : Fragment() {
binding.loadingCircle.visibility = View.GONE binding.loadingCircle.visibility = View.GONE
binding.loadingErrorIcon.visibility = View.VISIBLE binding.loadingErrorIcon.visibility = View.VISIBLE
binding.loadingErrorText.visibility = View.VISIBLE binding.loadingErrorText.visibility = View.VISIBLE
binding.loadingActionButton.visibility = View.VISIBLE
when (error) { when (error) {
MusicStore.Response.NO_MUSIC -> { MusicStore.Response.NO_MUSIC -> {
binding.loadingRetryButton.visibility = View.VISIBLE
binding.loadingErrorText.text = getString(R.string.err_no_music) binding.loadingErrorText.text = getString(R.string.err_no_music)
} binding.loadingActionButton.apply {
setText(R.string.lbl_retry)
MusicStore.Response.NO_PERMS -> { setOnClickListener {
binding.loadingGrantButton.visibility = View.VISIBLE loadingModel.load(context)
binding.loadingErrorText.text = getString(R.string.err_no_perms) }
}
} }
MusicStore.Response.FAILED -> { MusicStore.Response.FAILED -> {
binding.loadingRetryButton.visibility = View.VISIBLE
binding.loadingErrorText.text = getString(R.string.err_load_failed) binding.loadingErrorText.text = getString(R.string.err_load_failed)
binding.loadingActionButton.apply {
setText(R.string.lbl_retry)
setOnClickListener {
loadingModel.load(context)
}
}
}
MusicStore.Response.NO_PERMS -> {
binding.loadingErrorText.text = getString(R.string.err_no_perms)
binding.loadingActionButton.apply {
setText(R.string.lbl_grant)
setOnClickListener {
loadingModel.grant()
}
}
} }
else -> {} else -> {}

108
app/src/main/res/layout/fragment_loading.xml
View file

@ -1,5 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" <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"> xmlns:tools="http://schemas.android.com/tools">
<data> <data>
@ -9,61 +10,80 @@
type="org.oxycblt.auxio.loading.LoadingViewModel" /> type="org.oxycblt.auxio.loading.LoadingViewModel" />
</data> </data>
<LinearLayout <FrameLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:gravity="center" android:gravity="center"
android:orientation="vertical" android:orientation="vertical">
android:padding="@dimen/spacing_small">
<ProgressBar <!-- TODO: Get this splash icon working with Android 12 splashes -->
android:id="@+id/loading_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/spacing_small"
android:paddingBottom="@dimen/spacing_tiny" />
<ImageView <ImageView
android:id="@+id/loading_error_icon" android:id="@+id/loading_splash"
android:layout_width="@dimen/size_error_icon" android:layout_width="match_parent"
android:layout_height="@dimen/size_error_icon" android:layout_height="match_parent"
android:layout_margin="@dimen/spacing_small" android:contentDescription="@string/desc_auxio_icon"
android:contentDescription="@string/desc_error" android:scaleType="fitCenter"
android:src="@drawable/ic_error" android:src="@drawable/ic_launcher_foreground" />
android:visibility="gone"
tools:visibility="visible" />
<TextView <androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/loading_error_text" android:id="@+id/constraintLayout"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:fontFamily="@font/inter" android:layout_margin="@dimen/spacing_large"
android:textAlignment="center" android:animateLayoutChanges="true"
android:textAppearance="?android:attr/textAppearanceMedium" android:layout_gravity="bottom"
android:textColor="?android:attr/textColorPrimary" android:fitsSystemWindows="true"
tools:text="Some kind of error" /> android:gravity="center"
android:orientation="vertical">
<Button <com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/loading_retry_button" android:id="@+id/loading_circle"
style="@style/Widget.Button.Unbounded.Text" android:layout_width="match_parent"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_height="wrap_content" android:indeterminate="true"
android:onClick="@{() -> loadingModel.load(context)}" app:layout_constraintBottom_toBottomOf="@+id/loading_action_button"
android:text="@string/lbl_retry" app:layout_constraintTop_toTopOf="@+id/loading_error_icon" />
android:visibility="gone"
tools:visibility="visible" />
<Button <TextView
android:id="@+id/loading_grant_button" android:id="@+id/loading_error_text"
style="@style/Widget.Button.Unbounded.Text" android:fontFamily="@font/inter_semibold"
android:layout_width="wrap_content" android:textSize="@dimen/text_size_mid_large"
android:layout_height="wrap_content" android:textColor="?android:attr/textColorPrimary"
android:onClick="@{() -> loadingModel.grant()}" android:layout_width="match_parent"
android:text="@string/lbl_grant" android:layout_height="wrap_content"
android:visibility="gone" android:layout_marginBottom="@dimen/spacing_small"
tools:visibility="visible" /> android:textAlignment="center"
app:layout_constraintBottom_toTopOf="@+id/loading_action_button"
tools:text="No Music Found" />
</LinearLayout> <ImageView
android:id="@+id/loading_error_icon"
android:layout_width="@dimen/size_error_icon"
android:layout_height="@dimen/size_error_icon"
android:layout_marginBottom="@dimen/spacing_small"
android:contentDescription="@string/desc_error"
android:src="@drawable/ic_error"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="@+id/loading_error_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible" />
<com.google.android.material.button.MaterialButton
android:id="@+id/loading_action_button"
style="@style/Widget.Button.Vibrant.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_mid_large"
android:layout_marginEnd="@dimen/spacing_mid_large"
android:text="@string/lbl_retry"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</layout> </layout>

2
app/src/main/res/layout/item_artist_header.xml
View file

@ -103,7 +103,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small" android:layout_marginTop="@dimen/spacing_small"
android:background="@drawable/ui_header_dividers" android:background="@drawable/ui_header_dividers"
android:text="@string/lbl_songs" android:text="@string/lbl_albums"
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/artist_play_button" /> app:layout_constraintTop_toBottomOf="@+id/artist_play_button" />

2
app/src/main/res/layout/view_fast_scroll.xml
View file

@ -25,7 +25,7 @@
android:fontFamily="@font/inter_semibold" android:fontFamily="@font/inter_semibold"
android:gravity="center" android:gravity="center"
android:textColor="?android:attr/windowBackground" android:textColor="?android:attr/windowBackground"
android:textSize="@dimen/text_size_thumb" android:textSize="@dimen/text_size_mid_large"
tools:text="A" /> tools:text="A" />
</FrameLayout> </FrameLayout>

15
app/src/main/res/values-large/styles_ui.xml
View file

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Widget.Button.Vibrant.Base" parent="@style/Widget.MaterialComponents.Button.TextButton">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:clickable">true</item>
<item name="android:focusable">true</item>
<item name="rippleColor">?attr/colorControlHighlight</item>
<item name="fontFamily">@font/inter_semibold</item>
<item name="textAllCaps">false</item>
<item name="cornerRadius">0dp</item>
<item name="android:padding">@dimen/spacing_small</item>
<item name="android:textSize">@dimen/text_size_material_button</item>
</style>
</resources>

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

@ -39,14 +39,13 @@
<dimen name="size_app_icon">50dp</dimen> <dimen name="size_app_icon">50dp</dimen>
<!-- Text Size Namespace | Text Sizes --> <!-- Text Size Namespace | Text Sizes -->
<dimen name="text_size_min">10sp</dimen>
<dimen name="text_size_increment">1sp</dimen> <dimen name="text_size_increment">1sp</dimen>
<dimen name="text_size_min">10sp</dimen>
<dimen name="text_size_track_max">20sp</dimen> <dimen name="text_size_track_max">20sp</dimen>
<dimen name="text_size_detail_header_max">26sp</dimen> <dimen name="text_size_detail_header_max">26sp</dimen>
<dimen name="text_size_thumb">18sp</dimen> <dimen name="text_size_small">16sp</dimen>
<dimen name="text_size_header">19sp</dimen> <dimen name="text_size_mid_large">18sp</dimen>
<dimen name="text_size_material_button">16sp</dimen> <dimen name="text_size_toolbar">20sp</dimen>
<dimen name="text_size_toolbar_header">20sp</dimen>
<!-- Misc --> <!-- Misc -->
<dimen name="elevation_small">2dp</dimen> <dimen name="elevation_small">2dp</dimen>

2
app/src/main/res/values/styles_android.xml
View file

@ -54,7 +54,7 @@
<style name="Widget.TextView.Dialog.Title" parent="MaterialAlertDialog.MaterialComponents.Title.Text"> <style name="Widget.TextView.Dialog.Title" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:fontFamily">@font/inter_bold</item> <item name="android:fontFamily">@font/inter_bold</item>
<item name="android:textColor">?android:attr/textColorPrimary</item> <item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="android:textSize">@dimen/text_size_toolbar_header</item> <item name="android:textSize">@dimen/text_size_toolbar</item>
</style> </style>
<!-- The style for the checked text view in the custom dialog --> <!-- The style for the checked text view in the custom dialog -->

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

@ -70,7 +70,7 @@
<style name="TextAppearance.Toolbar.Header" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> <style name="TextAppearance.Toolbar.Header" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:fontFamily">@font/inter_bold</item> <item name="android:fontFamily">@font/inter_bold</item>
<item name="android:textSize">@dimen/text_size_toolbar_header</item> <item name="android:textSize">@dimen/text_size_toolbar</item>
</style> </style>
<style name="ItemLayout"> <style name="ItemLayout">
@ -146,7 +146,7 @@
<item name="android:paddingTop">@dimen/spacing_small</item> <item name="android:paddingTop">@dimen/spacing_small</item>
<item name="android:paddingBottom">@dimen/spacing_small</item> <item name="android:paddingBottom">@dimen/spacing_small</item>
<item name="android:paddingEnd">@dimen/spacing_medium</item> <item name="android:paddingEnd">@dimen/spacing_medium</item>
<item name="android:textSize">@dimen/text_size_header</item> <item name="android:textSize">@dimen/text_size_mid_large</item>
<item name="android:textColor">?android:attr/textColorPrimary</item> <item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="android:fontFamily">@font/inter_semibold</item> <item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:background">@drawable/ui_header_dividers</item> <item name="android:background">@drawable/ui_header_dividers</item>
@ -194,11 +194,6 @@
<item name="android:padding">@dimen/spacing_micro</item> <item name="android:padding">@dimen/spacing_micro</item>
</style> </style>
<style name="Widget.Button.Unbounded.Text" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textColor">?attr/colorAccent</item>
</style>
<style name="Widget.Button.Unbounded.Small" parent="Widget.AppCompat.Button.Borderless"> <style name="Widget.Button.Unbounded.Small" parent="Widget.AppCompat.Button.Borderless">
<item name="android:minWidth">0dp</item> <item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item> <item name="android:minHeight">0dp</item>
@ -216,12 +211,14 @@
<item name="android:focusable">true</item> <item name="android:focusable">true</item>
<item name="rippleColor">?attr/colorControlHighlight</item> <item name="rippleColor">?attr/colorControlHighlight</item>
<item name="fontFamily">@font/inter_semibold</item> <item name="fontFamily">@font/inter_semibold</item>
<item name="android:textSize">@dimen/text_size_small</item>
<item name="textAllCaps">false</item> <item name="textAllCaps">false</item>
<item name="cornerRadius">0dp</item> <item name="cornerRadius">0dp</item>
</style> </style>
<style name="Widget.Button.Vibrant.Primary" parent="@style/Widget.Button.Vibrant.Base"> <style name="Widget.Button.Vibrant.Primary" parent="@style/Widget.Button.Vibrant.Base">
<item name="android:textColor">?attr/colorSurface</item> <item name="android:textColor">?attr/colorSurface</item>
<item name="backgroundTint">?attr/colorAccent</item>
</style> </style>
<style name="Widget.Button.Vibrant.Secondary" parent="@style/Widget.Button.Vibrant.Base"> <style name="Widget.Button.Vibrant.Secondary" parent="@style/Widget.Button.Vibrant.Base">