feat(UI): Add grab line to bottom and top sheet dialogs

CreativeCodeCat · CreativeCodeCat · commit 6a81010d6bf1 · 2025-10-20T14:21:59.000+01:00
This commit introduces a visual grab line to both the `FontBottomSheetDialogLocked` and `FontTopSheetDialogLocked` components to improve their appearance and affordance.

Key changes:
- A `View` with a rounded `GradientDrawable` is added to serve as a grab line.
- In `FontBottomSheetDialogLocked`, the grab line is positioned at the top of the sheet.
- In `FontTopSheetDialogLocked`, it is positioned at the bottom.
- The layout logic is updated to wrap the content in a `FrameLayout` alongside the grab line, ensuring content is positioned correctly relative to the new grab line.
- The previous `CardView` has been replaced by `MaterialCardView`.
- Removed `setContentPadding` from `FontTopSheetDialogLocked` as margins now handle the required spacing.
diff --git a/app/src/main/java/com/github/creativecodecat/components/views/FontBottomSheetDialogLocked.kt b/app/src/main/java/com/github/creativecodecat/components/views/FontBottomSheetDialogLocked.kt
@@ -2,14 +2,14 @@ package com.github.creativecodecat.components.views
 
 import android.content.Context
 import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.widget.FrameLayout
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatDialog
-import androidx.cardview.widget.CardView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.content.ContextCompat
 import com.github.droidworksstudio.common.isGestureNavigationEnabled
@@ -19,12 +19,13 @@ import com.github.droidworksstudio.mlauncher.helper.FontManager
 import com.google.android.material.card.MaterialCardView
 
 /**
- * BottomSheetDialog using CardView for reliable rounded bottom corners.
+ * BottomSheetDialog using CardView with a grab line at the top.
  */
 class FontBottomSheetDialogLocked(context: Context) : AppCompatDialog(context), CustomFontView {
 
     private val coordinator: CoordinatorLayout
-    private val sheet: CardView
+    private val sheet: MaterialCardView
+    private val contentWrapper: FrameLayout
     private var cancelableFlag = true
 
     override fun setCancelable(flag: Boolean) {
@@ -33,6 +34,8 @@ class FontBottomSheetDialogLocked(context: Context) : AppCompatDialog(context),
     }
 
     init {
+        val density = context.resources.displayMetrics.density
+
         // Coordinator layout
         coordinator = CoordinatorLayout(context).apply {
             layoutParams = ViewGroup.LayoutParams(
@@ -42,18 +45,46 @@ class FontBottomSheetDialogLocked(context: Context) : AppCompatDialog(context),
             setOnClickListener { if (cancelableFlag) dismiss() }
         }
 
-        // Sheet wrapped in CardView
+        // Sheet wrapped in MaterialCardView
         sheet = MaterialCardView(context).apply {
             layoutParams = CoordinatorLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.WRAP_CONTENT
             ).apply { gravity = Gravity.BOTTOM }
 
-            cardElevation = 16 * context.resources.displayMetrics.density
+            cardElevation = 16 * density
             setCardBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimaryBackground))
         }
 
+        // Grab line at top
+        val grabLine = View(context).apply {
+            val widthPx = (40 * density).toInt()
+            val heightPx = (4 * density).toInt()
+            val topMarginPx = (10 * density).toInt()
+            val bottomMarginPx = (8 * density).toInt()
+
+            layoutParams = FrameLayout.LayoutParams(widthPx, heightPx).apply {
+                gravity = Gravity.CENTER_HORIZONTAL
+                topMargin = topMarginPx
+                bottomMargin = bottomMarginPx
+            }
+            background = GradientDrawable().apply {
+                shape = GradientDrawable.RECTANGLE
+                cornerRadius = 2 * density
+                setColor(ContextCompat.getColor(context, R.color.colorAccent))
+            }
+        }
+
+        // Content wrapper inside sheet
+        contentWrapper = FrameLayout(context).apply {
+            layoutParams = FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+            addView(grabLine) // always at index 0
+        }
 
+        sheet.addView(contentWrapper)
         coordinator.addView(sheet)
         super.setContentView(coordinator)
 
@@ -73,38 +104,44 @@ class FontBottomSheetDialogLocked(context: Context) : AppCompatDialog(context),
     }
 
     override fun setContentView(view: View) {
-        sheet.removeAllViews()
-        sheet.addView(
+        // Remove old content except the grab line (index 0)
+        for (i in contentWrapper.childCount - 1 downTo 1) {
+            contentWrapper.removeViewAt(i)
+        }
+
+        // Remove parent if the view already has one
+        (view.parent as? ViewGroup)?.removeView(view)
+
+        val density = context.resources.displayMetrics.density
+        contentWrapper.addView(
             view, FrameLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.WRAP_CONTENT
-            )
-        )
+            ).apply {
+                topMargin = (22 * density).toInt() // push below grab line
+            })
     }
 
     override fun onStart() {
         super.onStart()
 
         // Apply font recursively
         window?.decorView?.let { rootView ->
-            FontManager.getTypeface(context)?.let { typeface ->
-                applyFontRecursively(rootView, typeface)
-            }
+            FontManager.getTypeface(context)?.let { applyFontRecursively(rootView, it) }
         }
 
-        // Add padding for gesture/status bar
+        // Add padding for gesture navigation
         val bottomMargin = when (isGestureNavigationEnabled(context)) {
             true -> context.resources.getDimensionPixelSize(R.dimen.bottom_margin_gesture_nav)
             false -> context.resources.getDimensionPixelSize(R.dimen.bottom_margin_3_button_nav)
         }
 
-        // Apply side margins
         val sideMargin = context.resources.getDimensionPixelSize(R.dimen.bottom_sheet_side_margin)
         val lp = sheet.layoutParams as CoordinatorLayout.LayoutParams
         lp.setMargins(sideMargin, lp.topMargin, sideMargin, bottomMargin)
         sheet.layoutParams = lp
 
-        // Slide down from top
+        // Slide up animation from bottom
         sheet.translationY = -sheet.height.toFloat()
         sheet.animate().translationY(0f).setDuration(250).start()
     }
diff --git a/app/src/main/java/com/github/creativecodecat/components/views/FontTopSheetDialogLocked.kt b/app/src/main/java/com/github/creativecodecat/components/views/FontTopSheetDialogLocked.kt
@@ -2,28 +2,30 @@ package com.github.creativecodecat.components.views
 
 import android.content.Context
 import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.widget.FrameLayout
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatDialog
-import androidx.cardview.widget.CardView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.content.ContextCompat
+import com.github.droidworksstudio.common.isGestureNavigationEnabled
 import com.github.droidworksstudio.mlauncher.R
 import com.github.droidworksstudio.mlauncher.helper.CustomFontView
 import com.github.droidworksstudio.mlauncher.helper.FontManager
 import com.google.android.material.card.MaterialCardView
 
 /**
- * TopSheetDialog using CardView for reliable rounded bottom corners.
+ * TopSheetDialog using CardView with a grab line at the bottom.
  */
 class FontTopSheetDialogLocked(context: Context) : AppCompatDialog(context), CustomFontView {
 
     private val coordinator: CoordinatorLayout
-    private val sheet: CardView
+    private val sheet: MaterialCardView
+    private val contentWrapper: FrameLayout
     private var cancelableFlag = true
 
     override fun setCancelable(flag: Boolean) {
@@ -32,6 +34,8 @@ class FontTopSheetDialogLocked(context: Context) : AppCompatDialog(context), Cus
     }
 
     init {
+        val density = context.resources.displayMetrics.density
+
         // Coordinator layout
         coordinator = CoordinatorLayout(context).apply {
             layoutParams = ViewGroup.LayoutParams(
@@ -41,18 +45,46 @@ class FontTopSheetDialogLocked(context: Context) : AppCompatDialog(context), Cus
             setOnClickListener { if (cancelableFlag) dismiss() }
         }
 
-        // Sheet wrapped in CardView
+        // Sheet wrapped in MaterialCardView
         sheet = MaterialCardView(context).apply {
             layoutParams = CoordinatorLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.WRAP_CONTENT
             ).apply { gravity = Gravity.TOP }
 
-            cardElevation = 16 * context.resources.displayMetrics.density
+            cardElevation = 16 * density
             setCardBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimaryBackground))
         }
 
+        // Bottom grab line
+        val grabLine = View(context).apply {
+            val widthPx = (40 * density).toInt()
+            val heightPx = (4 * density).toInt()
+            val topMarginPx = (8 * density).toInt()
+            val bottomMarginPx = (10 * density).toInt()
+
+            layoutParams = FrameLayout.LayoutParams(widthPx, heightPx).apply {
+                gravity = Gravity.CENTER_HORIZONTAL or Gravity.BOTTOM
+                topMargin = topMarginPx
+                bottomMargin = bottomMarginPx
+            }
+            background = GradientDrawable().apply {
+                shape = GradientDrawable.RECTANGLE
+                cornerRadius = 2 * density
+                setColor(ContextCompat.getColor(context, R.color.colorAccent))
+            }
+        }
+
+        // Content wrapper inside sheet
+        contentWrapper = FrameLayout(context).apply {
+            layoutParams = FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+            addView(grabLine) // always at index 0, bottom-aligned
+        }
 
+        sheet.addView(contentWrapper)
         coordinator.addView(sheet)
         super.setContentView(coordinator)
 
@@ -72,42 +104,46 @@ class FontTopSheetDialogLocked(context: Context) : AppCompatDialog(context), Cus
     }
 
     override fun setContentView(view: View) {
-        sheet.removeAllViews()
-        sheet.addView(
+        // Remove old content except grab line
+        for (i in contentWrapper.childCount - 1 downTo 0) {
+            val child = contentWrapper.getChildAt(i)
+            if (child != contentWrapper.getChildAt(0)) contentWrapper.removeViewAt(i)
+        }
+
+        // Remove from parent if needed
+        (view.parent as? ViewGroup)?.removeView(view)
+
+        val density = context.resources.displayMetrics.density
+        contentWrapper.addView(
             view, FrameLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.WRAP_CONTENT
-            )
-        )
+            ).apply {
+                topMargin = 0 // adjust if you want padding above content
+                bottomMargin = (22 * density).toInt() // leave space for grab line
+            })
     }
 
     override fun onStart() {
         super.onStart()
 
         // Apply font recursively
         window?.decorView?.let { rootView ->
-            FontManager.getTypeface(context)?.let { typeface ->
-                applyFontRecursively(rootView, typeface)
-            }
+            FontManager.getTypeface(context)?.let { applyFontRecursively(rootView, it) }
         }
 
         // Add padding for gesture/status bar
-        val paddingBottom = context.resources.getDimensionPixelSize(R.dimen.bottom_sheet_side_margin)
-
-        sheet.setContentPadding(
-            sheet.paddingLeft,
-            sheet.paddingTop,
-            sheet.paddingRight,
-            paddingBottom
-        )
+        val bottomMargin = when (isGestureNavigationEnabled(context)) {
+            true -> context.resources.getDimensionPixelSize(R.dimen.bottom_margin_gesture_nav)
+            false -> context.resources.getDimensionPixelSize(R.dimen.bottom_margin_3_button_nav)
+        }
 
-        // Apply side margins
         val sideMargin = context.resources.getDimensionPixelSize(R.dimen.bottom_sheet_side_margin)
         val lp = sheet.layoutParams as CoordinatorLayout.LayoutParams
-        lp.setMargins(sideMargin, lp.topMargin, sideMargin, lp.bottomMargin)
+        lp.setMargins(sideMargin, lp.topMargin, sideMargin, bottomMargin)
         sheet.layoutParams = lp
 
-        // Slide down from top
+        // Slide down animation from top
         sheet.translationY = -sheet.height.toFloat()
         sheet.animate().translationY(0f).setDuration(250).start()
     }
