Apply brand design radius to popup menus

android-design-system/design-system/src/main/java/com/duckduckgo/common/ui/menu/PopupMenu.kt

@@ -20,6 +20,7 @@ import android.app.Activity
 import android.content.Context
 import android.os.Build.VERSION
 import android.util.DisplayMetrics
+import android.util.TypedValue
 import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
@@ -42,6 +43,7 @@ open class PopupMenu(
     init {
         elevation = ELEVATION
         animationStyle = android.R.style.Animation_Dialog
+        contentView.applyMenuRadiusClipping()
         applyRoundedRippleCorners()
     }
 
@@ -185,3 +187,8 @@ open class PopupMenu(
         fun getPopupWidth(context: Context): Int = context.resources.getDimensionPixelSize(R.dimen.popupMenuWidth)
     }
 }
+
+fun View.applyMenuRadiusClipping() {
+    val value = TypedValue()
+    clipToOutline = context.theme.resolveAttribute(R.attr.daxMenuClipToOutline, value, true) && value.data != 0
+}

android-design-system/design-system/src/main/res/drawable/popup_menu_bg.xml

@@ -16,5 +16,5 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="?attr/daxColorWindow" />
-    <corners android:radius="@dimen/smallShapeCornerRadius" />
-</shape>
+    <corners android:radius="?attr/daxMenuRadius" />
+</shape>

android-design-system/design-system/src/main/res/drawable/ripple_bottom_rounded.xml

@@ -19,7 +19,9 @@
     <item android:id="@android:id/mask">
         <shape android:shape="rectangle">
             <solid android:color="@color/black" />
-            <corners android:bottomLeftRadius="@dimen/smallShapeCornerRadius" android:bottomRightRadius="@dimen/smallShapeCornerRadius" />
+            <corners
+                android:bottomLeftRadius="?attr/daxMenuRadius"
+                android:bottomRightRadius="?attr/daxMenuRadius" />
         </shape>
     </item>
 </ripple>

android-design-system/design-system/src/main/res/drawable/ripple_rectangle_rounded.xml

@@ -19,7 +19,7 @@
     <item android:id="@android:id/mask">
         <shape android:shape="rectangle">
             <solid android:color="@color/black" />
-            <corners android:radius="@dimen/smallShapeCornerRadius" />
+            <corners android:radius="?attr/daxMenuRadius" />
         </shape>
     </item>
 </ripple>

android-design-system/design-system/src/main/res/drawable/ripple_top_rounded.xml

@@ -19,7 +19,9 @@
     <item android:id="@android:id/mask">
         <shape android:shape="rectangle">
             <solid android:color="@color/black" />
-            <corners android:topLeftRadius="@dimen/smallShapeCornerRadius" android:topRightRadius="@dimen/smallShapeCornerRadius" />
+            <corners
+                android:topLeftRadius="?attr/daxMenuRadius"
+                android:topRightRadius="?attr/daxMenuRadius" />
         </shape>
     </item>
 </ripple>

android-design-system/design-system/src/main/res/values/design-system-rebrand.xml

@@ -50,6 +50,8 @@
     <attr name="daxDialogRadius" format="dimension" />
     <attr name="daxSheetRadius" format="dimension" />
     <attr name="daxLargeSheetRadius" format="dimension" />
+    <attr name="daxMenuRadius" format="dimension" />
+    <attr name="daxMenuClipToOutline" format="boolean" />
     <attr name="daxOnboardingSheetRadius" format="dimension" />
     <attr name="daxInfoPanelRadius" format="dimension" />
     <attr name="daxMessageCtaCloseButtonSize" format="dimension" />
@@ -185,6 +187,8 @@
         <item name="daxDialogRadius">@dimen/rebrandContainerRadius</item>
         <item name="daxSheetRadius">@dimen/rebrandContainerRadius</item>
         <item name="daxLargeSheetRadius">@dimen/rebrandContainerRadius</item>
+        <item name="daxMenuRadius">@dimen/largeShapeCornerRadius</item>
+        <item name="daxMenuClipToOutline">true</item>
         <item name="daxOnboardingSheetRadius">@dimen/rebrandContainerRadius</item>
         <item name="daxInfoPanelRadius">@dimen/rebrandContainerRadius</item>
         <item name="daxMessageCtaCloseButtonSize">@dimen/rebrandMessageCtaCloseButtonSize</item>

android-design-system/design-system/src/main/res/values/design-system-theming.xml

@@ -349,6 +349,8 @@
         <item name="daxDialogRadius">@dimen/dialogBorderRadius</item>
         <item name="daxSheetRadius">@dimen/dialogBorderRadius</item>
         <item name="daxLargeSheetRadius">@dimen/largeShapeCornerRadius</item>
+        <item name="daxMenuRadius">@dimen/smallShapeCornerRadius</item>
+        <item name="daxMenuClipToOutline">false</item>
         <item name="daxOnboardingSheetRadius">@dimen/onboardingBottomSheetCornerRadius</item>
         <item name="daxInfoPanelRadius">@dimen/smallShapeCornerRadius</item>
         <item name="daxMessageCtaCloseButtonSize">@dimen/messageCtaCloseButtonSize</item>
@@ -525,6 +527,8 @@
         <item name="daxDialogRadius">@dimen/dialogBorderRadius</item>
         <item name="daxSheetRadius">@dimen/dialogBorderRadius</item>
         <item name="daxLargeSheetRadius">@dimen/largeShapeCornerRadius</item>
+        <item name="daxMenuRadius">@dimen/smallShapeCornerRadius</item>
+        <item name="daxMenuClipToOutline">false</item>
         <item name="daxOnboardingSheetRadius">@dimen/onboardingBottomSheetCornerRadius</item>
         <item name="daxInfoPanelRadius">@dimen/smallShapeCornerRadius</item>
         <item name="daxMessageCtaCloseButtonSize">@dimen/messageCtaCloseButtonSize</item>

android-design-system/design-system/src/test/java/com/duckduckgo/common/ui/PopupMenuRadiusDrawableTest.kt

@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2026 DuckDuckGo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.duckduckgo.common.ui
+
+import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.RippleDrawable
+import android.view.ContextThemeWrapper
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import com.duckduckgo.common.ui.menu.PopupMenu
+import com.duckduckgo.mobile.android.R
+import org.junit.Assert.assertArrayEquals
+import org.junit.Assert.assertEquals
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RuntimeEnvironment
+import org.robolectric.annotation.Config
+
+@RunWith(AndroidJUnit4::class)
+class PopupMenuRadiusDrawableTest {
+
+    @Test
+    fun whenRadiusOverlayIsAbsentThenPopupSurfaceAndCustomRipplesUse8DpInLightAndDarkThemes() {
+        assertPopupRadii(
+            overlayEnabled = false,
+            expectedDimen = R.dimen.smallShapeCornerRadius,
+        )
+    }
+
+    @Test
+    @Config(qualifiers = "xhdpi")
+    fun whenRadiusOverlayIsAppliedThenPopupSurfaceAndCustomRipplesUse16DpInLightAndDarkThemes() {
+        assertPopupRadii(
+            overlayEnabled = true,
+            expectedDimen = R.dimen.largeShapeCornerRadius,
+        )
+    }
+
+    private fun assertPopupRadii(
+        overlayEnabled: Boolean,
+        expectedDimen: Int,
+    ) {
+        listOf(
+            R.style.Theme_DuckDuckGo_Light,
+            R.style.Theme_DuckDuckGo_Dark,
+        ).forEach { themeResId ->
+            val context = ContextThemeWrapper(RuntimeEnvironment.getApplication(), themeResId)
+            if (overlayEnabled) {
+                context.theme.applyStyle(R.style.ThemeOverlay_Rebrand_Radius, true)
+            }
+            val expectedRadius = context.resources.getDimension(expectedDimen)
+
+            val popupBackground = checkNotNull(AppCompatResources.getDrawable(context, R.drawable.popup_menu_bg)) as GradientDrawable
+            assertEquals(expectedRadius, popupBackground.getCornerRadius(), 0f)
+
+            val singleItemMask = rippleMask(context, R.drawable.ripple_rectangle_rounded)
+            assertEquals(expectedRadius, singleItemMask.getCornerRadius(), 0f)
+
+            val topMask = rippleMask(context, R.drawable.ripple_top_rounded)
+            assertArrayEquals(
+                floatArrayOf(expectedRadius, expectedRadius, expectedRadius, expectedRadius, 0f, 0f, 0f, 0f),
+                checkNotNull(topMask.cornerRadii),
+                0f,
+            )
+
+            val bottomMask = rippleMask(context, R.drawable.ripple_bottom_rounded)
+            assertArrayEquals(
+                floatArrayOf(0f, 0f, 0f, 0f, expectedRadius, expectedRadius, expectedRadius, expectedRadius),
+                checkNotNull(bottomMask.cornerRadii),
+                0f,
+            )
+
+            assertPopupStyleUsesSharedBackground(
+                context,
+                R.style.Widget_DuckDuckGo_PopupMenu,
+                android.R.attr.popupBackground,
+                expectedRadius,
+            )
+            assertPopupStyleUsesSharedBackground(
+                context,
+                R.style.Widget_DuckDuckGo_PopupMenu,
+                com.google.android.material.R.attr.popupMenuBackground,
+                expectedRadius,
+            )
+            assertPopupStyleUsesSharedBackground(
+                context,
+                R.style.Widget_DuckDuckGo_PopUpOverflowMenu,
+                android.R.attr.popupBackground,
+                expectedRadius,
+            )
+
+            val popupContent = LinearLayout(context).apply {
+                setBackgroundResource(R.drawable.popup_menu_bg)
+            }
+            PopupMenu(
+                layoutInflater = LayoutInflater.from(context),
+                resourceId = R.layout.view_popup_menu_item,
+                view = popupContent,
+            )
+            assertEquals(overlayEnabled, popupContent.clipToOutline)
+        }
+    }
+
+    private fun rippleMask(
+        context: ContextThemeWrapper,
+        drawableRes: Int,
+    ): GradientDrawable {
+        val ripple = checkNotNull(AppCompatResources.getDrawable(context, drawableRes)) as RippleDrawable
+        return checkNotNull(ripple.findDrawableByLayerId(android.R.id.mask)) as GradientDrawable
+    }
+
+    private fun assertPopupStyleUsesSharedBackground(
+        baseContext: ContextThemeWrapper,
+        popupStyle: Int,
+        backgroundAttr: Int,
+        expectedRadius: Float,
+    ) {
+        val popupContext = ContextThemeWrapper(baseContext, popupStyle)
+        val values = popupContext.obtainStyledAttributes(intArrayOf(backgroundAttr))
+        try {
+            assertEquals(R.drawable.popup_menu_bg, values.getResourceId(0, 0))
+            val drawable = checkNotNull(AppCompatResources.getDrawable(popupContext, R.drawable.popup_menu_bg)) as GradientDrawable
+            assertEquals(expectedRadius, drawable.getCornerRadius(), 0f)
+        } finally {
+            values.recycle()
+        }
+    }
+}

android-design-system/design-system/src/test/java/com/duckduckgo/common/ui/ThemingRebrandOverlayTest.kt

@@ -239,6 +239,8 @@ class ThemingRebrandOverlayTest {
         assertEquals(28f, resolveDimension(activity, R.attr.daxDialogRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxSheetRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxLargeSheetRadius), 0f)
+        assertEquals(16f, resolveDimension(activity, R.attr.daxMenuRadius), 0f)
+        assertTrue(resolveBoolean(activity, R.attr.daxMenuClipToOutline))
         assertEquals(28f, resolveDimension(activity, R.attr.daxOnboardingSheetRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxInfoPanelRadius), 0f)
         assertEquals(48f, resolveDimension(activity, R.attr.daxMessageCtaCloseButtonSize), 0f)
@@ -258,6 +260,8 @@ class ThemingRebrandOverlayTest {
         assertEquals(12f, resolveDimension(activity, R.attr.daxDialogRadius), 0f)
         assertEquals(12f, resolveDimension(activity, R.attr.daxSheetRadius), 0f)
         assertEquals(16f, resolveDimension(activity, R.attr.daxLargeSheetRadius), 0f)
+        assertEquals(8f, resolveDimension(activity, R.attr.daxMenuRadius), 0f)
+        assertFalse(resolveBoolean(activity, R.attr.daxMenuClipToOutline))
         assertEquals(36f, resolveDimension(activity, R.attr.daxOnboardingSheetRadius), 0f)
         assertEquals(8f, resolveDimension(activity, R.attr.daxInfoPanelRadius), 0f)
         assertEquals(40f, resolveDimension(activity, R.attr.daxMessageCtaCloseButtonSize), 0f)
@@ -282,6 +286,8 @@ class ThemingRebrandOverlayTest {
             R.attr.daxDialogRadius,
             R.attr.daxSheetRadius,
             R.attr.daxLargeSheetRadius,
+            R.attr.daxMenuRadius,
+            R.attr.daxMenuClipToOutline,
             R.attr.daxOnboardingSheetRadius,
             R.attr.daxInfoPanelRadius,
             R.attr.daxMessageCtaCloseButtonSize,
@@ -305,6 +311,8 @@ class ThemingRebrandOverlayTest {
             assertEquals(28f, resolveDimension(activity, R.attr.daxDialogRadius), 0f)
             assertEquals(28f, resolveDimension(activity, R.attr.daxSheetRadius), 0f)
             assertEquals(28f, resolveDimension(activity, R.attr.daxLargeSheetRadius), 0f)
+            assertEquals(16f, resolveDimension(activity, R.attr.daxMenuRadius), 0f)
+            assertTrue(resolveBoolean(activity, R.attr.daxMenuClipToOutline))
             assertEquals(28f, resolveDimension(activity, R.attr.daxOnboardingSheetRadius), 0f)
             assertEquals(28f, resolveDimension(activity, R.attr.daxInfoPanelRadius), 0f)
             assertEquals(48f, resolveDimension(activity, R.attr.daxMessageCtaCloseButtonSize), 0f)
@@ -340,6 +348,8 @@ class ThemingRebrandOverlayTest {
         assertEquals(28f, resolveDimension(activity, R.attr.daxDialogRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxSheetRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxLargeSheetRadius), 0f)
+        assertEquals(16f, resolveDimension(activity, R.attr.daxMenuRadius), 0f)
+        assertTrue(resolveBoolean(activity, R.attr.daxMenuClipToOutline))
         assertEquals(28f, resolveDimension(activity, R.attr.daxOnboardingSheetRadius), 0f)
         assertEquals(28f, resolveDimension(activity, R.attr.daxInfoPanelRadius), 0f)
         assertEquals(48f, resolveDimension(activity, R.attr.daxMessageCtaCloseButtonSize), 0f)

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/ui/nativeinput/views/AttachmentView.kt

@@ -40,6 +40,7 @@ import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.viewModelScope
 import com.duckduckgo.anvil.annotations.InjectWith
 import com.duckduckgo.app.browser.favicon.FaviconManager
+import com.duckduckgo.common.ui.menu.applyMenuRadiusClipping
 import com.duckduckgo.common.ui.view.text.DaxTextView
 import com.duckduckgo.common.ui.view.toPx
 import com.duckduckgo.common.utils.ViewViewModelFactory
@@ -325,6 +326,7 @@ class AttachmentView(
         val container = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             setBackgroundResource(com.duckduckgo.mobile.android.R.drawable.popup_menu_bg)
+            applyMenuRadiusClipping()
         }
         val popup = PopupWindow(
             ScrollView(context).apply {

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/ui/nativeinput/views/ModelPickerView.kt

@@ -37,6 +37,7 @@ import androidx.lifecycle.findViewTreeLifecycleOwner
 import androidx.lifecycle.findViewTreeViewModelStoreOwner
 import androidx.lifecycle.lifecycleScope
 import com.duckduckgo.anvil.annotations.InjectWith
+import com.duckduckgo.common.ui.menu.applyMenuRadiusClipping
 import com.duckduckgo.common.ui.view.PopupMenuItemView
 import com.duckduckgo.common.ui.view.divider.HorizontalDivider
 import com.duckduckgo.common.ui.view.text.DaxTextView
@@ -231,6 +232,7 @@ class ModelPickerView @JvmOverloads constructor(
         val container = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             setBackgroundResource(com.duckduckgo.mobile.android.R.drawable.popup_menu_bg)
+            applyMenuRadiusClipping()
         }
         return container
     }

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/ui/nativeinput/views/OptionsView.kt

@@ -31,6 +31,7 @@ import androidx.lifecycle.findViewTreeLifecycleOwner
 import androidx.lifecycle.findViewTreeViewModelStoreOwner
 import androidx.lifecycle.lifecycleScope
 import com.duckduckgo.anvil.annotations.InjectWith
+import com.duckduckgo.common.ui.menu.applyMenuRadiusClipping
 import com.duckduckgo.common.ui.view.text.DaxTextView
 import com.duckduckgo.common.utils.ViewViewModelFactory
 import com.duckduckgo.di.scopes.ViewScope
@@ -198,6 +199,7 @@ class OptionsView(context: Context, private val host: NativeInputHost) : LinearL
         val container = LinearLayout(context).apply {
             orientation = VERTICAL
             setBackgroundResource(com.duckduckgo.mobile.android.R.drawable.popup_menu_bg)
+            applyMenuRadiusClipping()
         }
         val popup = PopupWindow(
             ScrollView(context).apply {

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/ui/nativeinput/views/ReasoningModePickerView.kt

@@ -32,6 +32,7 @@ import androidx.lifecycle.findViewTreeLifecycleOwner
 import androidx.lifecycle.findViewTreeViewModelStoreOwner
 import androidx.lifecycle.lifecycleScope
 import com.duckduckgo.anvil.annotations.InjectWith
+import com.duckduckgo.common.ui.menu.applyMenuRadiusClipping
 import com.duckduckgo.common.ui.view.divider.HorizontalDivider
 import com.duckduckgo.common.ui.view.text.DaxTextView
 import com.duckduckgo.common.utils.ViewViewModelFactory
@@ -169,6 +170,7 @@ class ReasoningModePickerView @JvmOverloads constructor(
         val container = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             setBackgroundResource(com.duckduckgo.mobile.android.R.drawable.popup_menu_bg)
+            applyMenuRadiusClipping()
         }
         val popup = PopupWindow(
             ScrollView(context).apply {