ui: improve misc ui elements

Make some minor UI tweaks across the app.
2021-09-11 20:54:36 -06:00 · 2021-09-11 20:54:36 -06:00 · 744e4172f3
commit 744e4172f3
parent cafd7d8ca6
13 changed files with 86 additions and 42 deletions
--- a/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/playback/PlaybackFragment.kt
@ -88,7 +88,10 @@ class PlaybackFragment : Fragment(), SeekBar.OnSeekBarChangeListener {

        // Make marquee of song title work
        binding.playbackSong.isSelected = true
-        binding.playbackSeekBar.setOnSeekBarChangeListener(this)
+        binding.playbackSeekBar.apply {
+            setOnSeekBarChangeListener(this@PlaybackFragment)
+            isEnabled = true
+        }

        // --- VIEWMODEL SETUP --

--- a/app/src/main/java/org/oxycblt/auxio/settings/IntListPrefDialog.kt
+++ b/app/src/main/java/org/oxycblt/auxio/settings/IntListPrefDialog.kt
@ -18,12 +18,38 @@

 package org.oxycblt.auxio.settings

+import android.util.TypedValue
 import androidx.appcompat.app.AlertDialog
+import androidx.appcompat.widget.AppCompatTextView
+import androidx.core.content.res.ResourcesCompat
+import androidx.core.view.updatePadding
+import org.oxycblt.auxio.BuildConfig
+import org.oxycblt.auxio.R
 import org.oxycblt.auxio.ui.LifecycleDialog
+import org.oxycblt.auxio.util.resolveAttr

 class IntListPrefDialog(private val pref: IntListPreference) : LifecycleDialog() {
    override fun onConfigDialog(builder: AlertDialog.Builder) {
-        builder.setTitle(pref.title)
+        // Don't set the title. Instead. Set a custom title view so that the padding actually
+        // works between the title and this dialog's contents. I can't believe I have to do this.
+        val titleView = AppCompatTextView(requireContext()).apply {
+            text = pref.title
+            typeface = ResourcesCompat.getFont(context, R.font.inter_bold)
+            setTextSize(
+                TypedValue.COMPLEX_UNIT_PX,
+                resources.getDimensionPixelSize(R.dimen.text_size_large).toFloat()
+            )
+            setTextColor(android.R.attr.textColorPrimary.resolveAttr(context))
+
+            // We have to make the bottom padding account for the ListView's immutable top padding,
+            // because Android's dialog code is a massive pile of broken spaghetti.
+            val padding = resources.getDimension(R.dimen.spacing_medium).toInt()
+            val paddingHack = resources.getDimension(R.dimen.spacing_small).toInt()
+
+            updatePadding(left = padding, top = padding, right = padding, bottom = paddingHack)
+        }
+
+        builder.setCustomTitle(titleView)

        builder.setSingleChoiceItems(pref.entries, pref.getValueIndex()) { _, index ->
            pref.setValueIndex(index)
@ -35,6 +61,6 @@ class IntListPrefDialog(private val pref: IntListPreference) : LifecycleDialog()
    }

    companion object {
-        const val TAG = "TAG_INT_PREF_DIALOG"
+        const val TAG = BuildConfig.APPLICATION_ID + ".tag.INT_PREF"
    }
 }
--- a/app/src/main/res/color/overlay_popup.xml
+++ b/app/src/main/res/color/overlay_popup.xml
@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:alpha="0.0" android:color="?attr/colorOnSurface" />
+    <item android:alpha="0.12" android:color="?attr/elevationOverlayColor" />
 </selector>
--- a/app/src/main/res/color/overlay_seekbar_halo.xml
+++ b/app/src/main/res/color/overlay_seekbar_halo.xml
@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:alpha="0.12" android:color="?attr/colorOnSurface" />
+    <item android:alpha="0.24" android:color="?attr/colorPrimary" />
 </selector>
--- a/app/src/main/res/layout/dialog_accent.xml
+++ b/app/src/main/res/layout/dialog_accent.xml
@ -8,7 +8,7 @@
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
-        android:paddingTop="@dimen/spacing_small"
+        android:paddingTop="@dimen/spacing_medium"
        app:layoutManager="org.oxycblt.auxio.accent.AutoGridLayoutManager"
        app:layout_constraintBottom_toTopOf="@+id/accent_cancel"
        app:layout_constraintTop_toBottomOf="@+id/accent_header"
--- a/app/src/main/res/layout/dialog_excluded.xml
+++ b/app/src/main/res/layout/dialog_excluded.xml
@ -7,7 +7,7 @@
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
-        android:paddingTop="@dimen/spacing_small">
+        android:paddingTop="@dimen/spacing_medium">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/excluded_recycler"
--- a/app/src/main/res/layout/dialog_title.xml
+++ b/app/src/main/res/layout/dialog_title.xml
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:paddingTop="@dimen/spacing_medium"
+    android:paddingEnd="@dimen/spacing_medium"
+    android:paddingStart="@dimen/spacing_medium"
+    android:paddingBottom="@dimen/spacing_small"
+    android:fontFamily="@font/inter_bold"
+    android:textColor="?android:attr/textColorPrimary"
+    android:textSize="@dimen/text_size_large"
+    tools:text="Title" />
--- a/app/src/main/res/layout/item_excluded_dir.xml
+++ b/app/src/main/res/layout/item_excluded_dir.xml
@ -5,13 +5,14 @@

    <androidx.constraintlayout.widget.ConstraintLayout
        style="@style/ItemLayout"
+        android:padding="0dp"
        android:clickable="false"
        android:focusable="false">

        <TextView
            android:id="@+id/excluded_path"
            style="@style/Widget.TextView.Item.Primary"
-            android:layout_marginStart="0dp"
+            android:layout_marginStart="@dimen/spacing_medium"
            android:layout_marginEnd="@dimen/spacing_medium"
            android:maxLines="@null"
            app:layout_constraintBottom_toBottomOf="parent"
@ -26,6 +27,7 @@
            android:contentDescription="@string/desc_blacklist_delete"
            android:src="@drawable/ic_clear"
            app:tint="?attr/colorControlNormal"
+            android:layout_margin="@dimen/spacing_small"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
--- a/app/src/main/res/values-night/styles_core.xml
+++ b/app/src/main/res/values-night/styles_core.xml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Theme.Overlay" parent="Theme.Splash">
+        <!--
+        Use the accent color as the elevation overlay color on dark mode. It's just more visually
+        appealing then a grey-ish color that sticks out like a sore thumb. Technically this is
+        actually a part of Material3, but that is still unstable, so I just copied this element
+        for now.
+        -->
+        <item name="elevationOverlayColor">?attr/colorAccent</item>
+    </style>
+</resources>
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@ -37,4 +37,6 @@
    <dimen name="elevation_large">8dp</dimen>

    <dimen name="offset_thumb">4dp</dimen>
+
+    <dimen name="abc_dialog_list_padding_top_no_title">0dp</dimen>
 </resources>
--- a/app/src/main/res/values/styles_android.xml
+++ b/app/src/main/res/values/styles_android.xml
@ -5,7 +5,6 @@
    <!-- Custom popup menu theme -->
    <style name="Widget.CustomPopup" parent="Widget.MaterialComponents.PopupMenu.ContextMenu">
        <item name="android:popupBackground">@drawable/ui_popup_bg</item>
-        <item name="colorControlHighlight">?attr/colorControlHighlight</item>
        <item name="cornerRadius">0dp</item>
    </style>

@ -15,46 +14,22 @@
        <item name="colorControlHighlight">@color/overlay_selection</item>
    </style>

-    <!-- Base custom dialog theme. Don't try to understand this. -->
-    <style name="Theme.CustomDialog.Base" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
-        <item name="android:colorControlHighlight">?attr/colorControlHighlight</item>
+    <!-- Normal DayNight dialog theme -->
+    <style name="Theme.CustomDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
        <item name="android:checkedTextViewStyle">@style/Widget.CheckedTextView.Dialog</item>
-
+        <item name="colorControlHighlight">@color/overlay_selection</item>
        <item name="materialAlertDialogTitleTextStyle">@style/Widget.TextView.Dialog.Title</item>
-        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
-
        <item name="buttonBarPositiveButtonStyle">@style/Widget.Button.Dialog</item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.Button.Dialog</item>
        <item name="buttonBarNeutralButtonStyle">@style/Widget.Button.Dialog.Neutral</item>
    </style>

-    <!-- Normal DayNight dialog theme -->
-    <style name="Theme.CustomDialog" parent="Theme.CustomDialog.Base">
-        <item name="colorSurface">@color/surface</item>
-        <item name="colorControlHighlight">@color/overlay_selection</item>
-    </style>
-
-    <!-- Black theme dialog theme -->
-    <style name="Theme.CustomDialog.Black" parent="Theme.CustomDialog.Base">
-        <item name="colorSurface">@android:color/black</item>
-    </style>
-
-    <!-- Material-specific dialog style -->
-    <style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
-        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.Angular</item>
-    </style>
-
-    <!-- Dialog shape with no rounded corners -->
-    <style name="ShapeAppearance.Angular" parent="ShapeAppearance.MaterialComponents.MediumComponent">
-        <item name="cornerFamily">cut</item>
-        <item name="cornerRadius">0dp</item>
-    </style>
-
    <!-- Custom dialog title theme -->
    <style name="Widget.TextView.Dialog.Title" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
        <item name="android:fontFamily">@font/inter_bold</item>
        <item name="android:textColor">?android:attr/textColorPrimary</item>
        <item name="android:textSize">@dimen/text_size_large</item>
+        <item name="android:paddingBottom">@dimen/spacing_medium</item>
    </style>

    <!-- The style for the checked text view in the custom dialog -->
@ -71,7 +46,6 @@
        <item name="android:fontFamily">@font/inter_semibold</item>
        <item name="android:textColor">?attr/colorAccent</item>
        <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
-        <item name="rippleColor">?android:attr/colorControlHighlight</item>
        <item name="cornerRadius">0dp</item>
    </style>

--- a/app/src/main/res/values/styles_core.xml
+++ b/app/src/main/res/values/styles_core.xml
@ -6,9 +6,14 @@
    <style name="Theme.Edge" parent="Theme.Master" />
    <!-- Android 12 Splashscreen config -->
    <style name="Theme.Splash" parent="Theme.Edge" />
+    <!-- Dark-mode-specific stuff -->
+    <style name="Theme.Overlay" parent="Theme.Splash">
+        <!-- Light theme, don't use an elevation overlay. -->
+        <item name="elevationOverlayColor">@android:color/transparent</item>
+    </style>

    <!-- Base theme -->
-    <style name="Theme.Base" parent="Theme.Splash">
+    <style name="Theme.Base" parent="Theme.Overlay">
        <!-- Colors -->
        <item name="colorSurface">@color/surface</item>
        <item name="colorAccent">@color/blue</item>
@ -44,7 +49,6 @@
    <!-- The basic black theme derived in all black accents. -->
    <style name="Theme.Base.Black" parent="Theme.Base">
        <item name="colorSurface">@android:color/black</item>
-        <item name="materialAlertDialogTheme">@style/Theme.CustomDialog.Black</item>
    </style>

    <!--
--- a/app/src/main/res/values/styles_ui.xml
+++ b/app/src/main/res/values/styles_ui.xml
@ -40,6 +40,13 @@
        <item name="android:splitTrack">false</item>
        <item name="android:thumbOffset">@dimen/offset_thumb</item>
        <item name="android:thumbTint">?attr/colorAccent</item>
+        <item name="android:enabled">true</item>
+        <item name="android:theme">@style/ThemeOverlay.SeekbarSelectionHack</item>
+    </style>
+    
+    <style name="ThemeOverlay.SeekbarSelectionHack" parent="">
+        <!-- TODO: Remove this dumb hack and use a slider -->
+        <item name="colorControlHighlight">@color/overlay_seekbar_halo</item>
    </style>

    <style name="Widget.ImageView.Compact" parent="">
@ -200,10 +207,11 @@
    <style name="Widget.Button.Vibrant.Primary" parent="@style/Widget.MaterialComponents.Button.TextButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
-        <item name="android:letterSpacing">0.05</item>
+        <item name="android:letterSpacing">0.01</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">@dimen/text_size_small</item>
        <item name="android:textColor">?attr/colorSurface</item>
+        <item name="rippleColor">@color/mtrl_btn_ripple_color</item>
        <item name="fontFamily">@font/inter_semibold</item>
        <item name="cornerRadius">0dp</item>
    </style>
@ -211,7 +219,7 @@
    <style name="Widget.Button.Vibrant.Secondary" parent="@style/Widget.MaterialComponents.Button.OutlinedButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
-        <item name="android:letterSpacing">0.05</item>
+        <item name="android:letterSpacing">0.0125</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">@dimen/text_size_small</item>
        <item name="fontFamily">@font/inter_semibold</item>