Feature: Dim background

cascade/src/main/java/me/saket/cascade/CascadePopupMenu.kt

@@ -3,18 +3,23 @@
 
 package me.saket.cascade
 
+import android.animation.TimeInterpolator
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.drawable.Drawable
+import android.os.Build
 import android.view.Gravity
 import android.view.Menu
 import android.view.MenuItem
 import android.view.SubMenu
 import android.view.View
+import android.view.ViewGroup
 import android.view.View.SCROLLBARS_INSIDE_OVERLAY
 import android.view.ViewGroup.LayoutParams
 import android.view.ViewGroup.LayoutParams.MATCH_PARENT
 import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
+import android.view.animation.DecelerateInterpolator
+import androidx.annotation.ColorInt
 import androidx.annotation.MenuRes
 import androidx.appcompat.view.SupportMenuInflater
 import androidx.appcompat.view.menu.MenuBuilder
@@ -52,7 +57,8 @@ open class CascadePopupMenu @JvmOverloads constructor(
     val background: () -> Drawable? = { null },
     val menuList: (RecyclerView) -> Unit = {},
     val menuTitle: (MenuHeaderViewHolder) -> Unit = {},
-    val menuItem: (MenuItemViewHolder) -> Unit = {}
+    val menuItem: (MenuItemViewHolder) -> Unit = {},
+    @ColorInt val backgroundDimColor: Int? = null
   )
 
   fun show() {
@@ -69,6 +75,10 @@ open class CascadePopupMenu @JvmOverloads constructor(
       popup.contentView.background = it
     }
 
+    styler.backgroundDimColor?.let {
+      applyBackgroundDim(it)
+    }
+
     showMenu(menuBuilder, goingForward = true)
     popup.showAsDropDown(anchor, 0, 0, gravity)
   }
@@ -128,6 +138,56 @@ open class CascadePopupMenu @JvmOverloads constructor(
     }
   }
 
+  private fun applyBackgroundDim(@ColorInt backgroundDimColor: Int) {
+    val container = (anchor.rootView as ViewGroup)
+    val overlay = View(context).apply {
+      alpha = 0f
+      setBackgroundColor(backgroundDimColor)
+    }
+    container.addView(overlay)
+
+    val alphaInInterpolator: TimeInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N)
+      popup.enterTransition?.interpolator ?: DecelerateInterpolator()
+    else
+      DecelerateInterpolator()
+
+    var alphaInDuration: Long = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+      popup.enterTransition?.duration ?: 300L
+    } else {
+      300L
+    }
+
+    if (alphaInDuration == -1L) alphaInDuration = 300L
+
+    overlay.animate()
+      .alpha(1f)
+      .setInterpolator(alphaInInterpolator)
+      .setDuration(alphaInDuration)
+      .start()
+
+    popup.setOnDismissListener {
+      val alphaOutInterpolator: TimeInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N)
+        popup.exitTransition?.interpolator ?: DecelerateInterpolator()
+      else
+        DecelerateInterpolator()
+
+      var alphaOutDuration: Long = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+        popup.exitTransition?.duration ?: 300L
+      } else {
+        300L
+      }
+
+      if (alphaOutDuration == -1L) alphaOutDuration = 300L
+
+      overlay.animate()
+        .withEndAction { container.removeView(overlay) }
+        .setInterpolator(alphaOutInterpolator)
+        .setDuration(alphaOutDuration)
+        .alpha(0f)
+        .start()
+    }
+  }
+
   private fun Drawable.copy(): Drawable {
     return constantState!!.newDrawable(context.resources, context.theme)
   }

sample/src/main/java/me/saket/cascade/sample/MainActivity.kt

@@ -104,7 +104,8 @@ class MainActivity : AppCompatActivity() {
       menuItem = {
         it.titleView.typeface = ResourcesCompat.getFont(this, R.font.work_sans_medium)
         it.itemView.background = rippleDrawable()
-      }
+      },
+      backgroundDimColor = ContextCompat.getColor(this, R.color.window_overlay_background)
     )
   }
 

sample/src/main/res/values/styles.xml

@@ -2,6 +2,7 @@
   <color name="color_accent">#356859</color>
   <color name="color_control_normal">#356859</color>
   <color name="window_background">#B5D2C3</color>
+  <color name="window_overlay_background">#80000000</color>
 
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="colorPrimary">@color/window_background</item>