home: reimplement speed dial overlay

The stock overlay is not sufficient for our needs, as: 1. It seemingly cannot be set up without missing certain touch areas or disabling the touch area of the speed dial itself 2. The scrim can't be evenly applied everywhere in the app due to the nested expore UI. So, modify the speed dial to work without a scrim and reimplement the overlay touch behavior manually.
OxygenCobalt · Jan 2, 2024 · 8a75295 · 8a75295
1 parent afa73a2
commit 8a75295
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 deletions.
diff --git a/app/src/main/java/org/oxycblt/auxio/home/HomeFragment.kt b/app/src/main/java/org/oxycblt/auxio/home/HomeFragment.kt
@@ -21,6 +21,7 @@ package org.oxycblt.auxio.home
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.MenuItem
+import android.view.MotionEvent
 import android.view.View
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
@@ -77,6 +78,7 @@ import org.oxycblt.auxio.playback.PlaybackViewModel
 import org.oxycblt.auxio.util.collect
 import org.oxycblt.auxio.util.collectImmediately
 import org.oxycblt.auxio.util.getColorCompat
+import org.oxycblt.auxio.util.isUnder
 import org.oxycblt.auxio.util.lazyReflectedField
 import org.oxycblt.auxio.util.lazyReflectedMethod
 import org.oxycblt.auxio.util.logD
@@ -143,6 +145,21 @@ class HomeFragment :
             }
 
         // --- UI SETUP ---
+
+        binding.root.rootView.apply {
+            // Stock bottom sheet overlay won't work with our nested UI setup, have to replicate
+            // it ourselves.
+            findViewById<View>(R.id.main_scrim).setOnTouchListener { _, event ->
+                handleSpeedDialBoundaryTouch(event)
+                false
+            }
+
+            findViewById<View>(R.id.sheet_scrim).setOnTouchListener { _, event ->
+                handleSpeedDialBoundaryTouch(event)
+                false
+            }
+        }
+
         binding.homeAppbar.addOnOffsetChangedListener(this)
         binding.homeNormalToolbar.apply {
             setOnMenuItemClickListener(this@HomeFragment)
@@ -589,6 +606,14 @@ class HomeFragment :
         }
     }
 
+    private fun handleSpeedDialBoundaryTouch(event: MotionEvent) {
+        val binding = requireBinding()
+        if (binding.homeNewPlaylistFab.isOpen &&
+            !binding.homeNewPlaylistFab.isUnder(event.x, event.y)) {
+            binding.homeNewPlaylistFab.close()
+        }
+    }
+
     private fun handleShow(show: Show?) {
         when (show) {
             is Show.SongDetails -> {

diff --git a/app/src/main/java/org/oxycblt/auxio/home/ThemedSpeedDialView.kt b/app/src/main/java/org/oxycblt/auxio/home/ThemedSpeedDialView.kt
@@ -24,7 +24,6 @@ import android.animation.AnimatorSet
 import android.animation.ObjectAnimator
 import android.content.Context
 import android.content.res.ColorStateList
-import android.graphics.Color
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.RotateDrawable
 import android.os.Bundle
@@ -41,13 +40,15 @@ import androidx.core.view.setMargins
 import androidx.core.view.updateLayoutParams
 import androidx.core.widget.TextViewCompat
 import androidx.interpolator.view.animation.FastOutSlowInInterpolator
+import com.google.android.material.shape.MaterialShapeDrawable
 import com.leinardi.android.speeddial.FabWithLabelView
 import com.leinardi.android.speeddial.SpeedDialActionItem
 import com.leinardi.android.speeddial.SpeedDialView
 import kotlin.math.roundToInt
 import kotlinx.parcelize.Parcelize
 import org.oxycblt.auxio.R
 import org.oxycblt.auxio.util.getAttrColorCompat
+import org.oxycblt.auxio.util.getDimen
 import org.oxycblt.auxio.util.getDimenPixels
 
 /**
@@ -64,6 +65,7 @@ import org.oxycblt.auxio.util.getDimenPixels
  */
 class ThemedSpeedDialView : SpeedDialView {
     private var mainFabAnimator: Animator? = null
+    private val spacingSmall = context.getDimenPixels(R.dimen.spacing_small)
 
     constructor(context: Context) : super(context)
 
@@ -174,7 +176,13 @@ class ThemedSpeedDialView : SpeedDialView {
         val fabBackgroundColor =
             context.getAttrColorCompat(com.google.android.material.R.attr.colorSurface)
         val labelColor = context.getAttrColorCompat(android.R.attr.textColorSecondary)
-        val labelBackgroundColor = Color.TRANSPARENT
+        val labelBackgroundColor =
+            context.getAttrColorCompat(com.google.android.material.R.attr.colorSurface)
+        val labelStroke =
+            context.getAttrColorCompat(com.google.android.material.R.attr.colorOutline)
+        val labelElevation =
+            context.getDimen(com.google.android.material.R.dimen.m3_card_elevated_elevation)
+        val cornerRadius = context.getDimenPixels(R.dimen.spacing_medium)
         val actionItem =
             SpeedDialActionItem.Builder(
                     actionItem.id,
@@ -184,7 +192,7 @@ class ThemedSpeedDialView : SpeedDialView {
                 .setFabImageTintColor(fabImageTintColor.defaultColor)
                 .setFabBackgroundColor(fabBackgroundColor.defaultColor)
                 .setLabelColor(labelColor.defaultColor)
-                .setLabelBackgroundColor(labelBackgroundColor)
+                .setLabelBackgroundColor(labelBackgroundColor.defaultColor)
                 .setLabelClickable(actionItem.isLabelClickable)
                 .setTheme(actionItem.theme)
                 .create()
@@ -199,7 +207,13 @@ class ThemedSpeedDialView : SpeedDialView {
 
             labelBackground.apply {
                 useCompatPadding = false
-                setContentPadding(0, 0, 0, 0)
+                setContentPadding(spacingSmall, spacingSmall, spacingSmall, spacingSmall)
+                background =
+                    MaterialShapeDrawable.createWithElevationOverlay(context).apply {
+                        fillColor = labelBackgroundColor
+                        elevation = labelElevation
+                        setCornerSize(cornerRadius.toFloat())
+                    }
                 foreground = null
                 (getChildAt(0) as TextView).apply {
                     TextViewCompat.setTextAppearance(this, R.style.TextAppearance_Auxio_LabelLarge)

diff --git a/app/src/main/res/layout-w600dp-land/fragment_main.xml b/app/src/main/res/layout-w600dp-land/fragment_main.xml
@@ -17,6 +17,8 @@
         app:navGraph="@navigation/inner"
         tools:layout="@layout/fragment_home" />
 
+    <View android:id="@+id/main_scrim" android:layout_height="match_parent" android:layout_width="match_parent"/>
+
     <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:id="@+id/playback_sheet"
         android:layout_width="match_parent"
@@ -72,6 +74,8 @@
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 
+        <View android:id="@+id/sheet_scrim" android:layout_height="match_parent" android:layout_width="match_parent"/>
+
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml
@@ -156,11 +156,6 @@
         app:layout_anchor="@id/home_content">
 
 
-        <com.leinardi.android.speeddial.SpeedDialOverlayLayout
-            android:id="@+id/home_speed_dial_overlay"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent" />
-
         <org.oxycblt.auxio.home.ThemedSpeedDialView
             android:id="@+id/home_new_playlist_fab"
             android:layout_width="wrap_content"
@@ -171,8 +166,7 @@
             android:gravity="bottom|end"
             app:sdMainFabAnimationRotateAngle="135"
             app:sdMainFabClosedIconColor="@android:color/white"
-            app:sdMainFabClosedSrc="@drawable/ic_add_24"
-            app:sdOverlayLayout="@+id/home_speed_dial_overlay" />
+            app:sdMainFabClosedSrc="@drawable/ic_add_24"/>
 
         <com.google.android.material.floatingactionbutton.FloatingActionButton
             android:id="@+id/home_shuffle_fab"
@@ -184,5 +178,4 @@
 
     </org.oxycblt.auxio.home.EdgeFrameLayout>
 
-
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/layout/fragment_main.xml b/app/src/main/res/layout/fragment_main.xml
@@ -18,6 +18,8 @@
         app:navGraph="@navigation/inner"
         tools:layout="@layout/fragment_home" />
 
+    <View android:id="@+id/main_scrim" android:layout_height="match_parent" android:layout_width="match_parent"/>
+
     <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:id="@+id/playback_sheet"
         style="@style/Widget.Auxio.DisableDropShadows"
@@ -81,6 +83,8 @@
 
         </LinearLayout>
 
+        <View android:id="@+id/sheet_scrim" android:layout_height="match_parent" android:layout_width="match_parent"/>
+
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>