Repository navigation
Add cross-platform backdrop blur to modal sheets and iOS dialogs - #3449
Shubham (shubham-jhajhria) wants to merge 7 commits into
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
|
Hi Shubham (@shubham-jhajhria)! |
There was a problem hiding this comment.
Thank you for contribution.
Important merge order: all changes in androidMain and commonMain should be implemented and merged in AOSP first, then we will upstreamed in our fork.
Ivan Matkov (@MatkovIvan) , Igor Demin (@igordmn) , could you please check if we need this kind of API.
Use the requested numeric backdrop radius on the hosting Compose scene. This removes the tinted UIKit material that could turn the background white behind modal sheets.
|
I'll let Ivan answer |
Ivan Matkov (MatkovIvan)
left a comment
There was a problem hiding this comment.
all changes in androidMain and commonMain should be implemented and merged in AOSP first
Yes, it's a strict requirement of our contribution guide:
https://github.com/JetBrains/compose-multiplatform/blob/d337cc6de4528678e58f007ae8f7796dc300717b/CONTRIBUTING.md?plain=1#L9
And it's not just about following the rules, there are technical reasons for this as well. So, we just cannot accept changing the common public API in the fork.
| dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() }, | ||
| contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.modalWindowInsets }, | ||
| properties: ModalBottomSheetProperties = ModalBottomSheetProperties(), | ||
| blurBehindRadius: Dp = Dp.Unspecified, |
There was a problem hiding this comment.
It breaks binary compatibility. Previous signature must be kept at least under @Deprecation annotation
| } | ||
|
|
||
| private fun updateBackdropBlur() { | ||
| if (Build.VERSION.SDK_INT < 31) return |
There was a problem hiding this comment.
I'd recommend against adding platform-specific code to the material module directly. While we already have such examples around, it's supposed to be theming components library, not something that exposes platform detail - it's the scope of lower level modules.
| androidLibrary { | ||
| compileSdk = 35 | ||
| namespace = "org.jetbrains.androidx.compose.material3" | ||
| androidLibrary { |
There was a problem hiding this comment.
It's a no-go change here. It breaks compatibility with all existing android libraries and will produce a lot of issues like duplicated symbols and so on. It MUST remain redirect as-is
| val usePlatformInsets: Boolean = true, | ||
| val useSoftwareKeyboardInset: Boolean = true, | ||
| val scrimColor: Color = DefaultScrimColor, | ||
| val blurBehindRadius: Dp = Dp.Unspecified, |
There was a problem hiding this comment.
- Breaking binary compatibility here too
- Any reason to keep it for non-android only? It adds generic dialog compatibility everywhere outside of android, while touching common/android on material3 level anyway. such as symmetry seems like a design issue here
| var scrimColor: Color? | ||
|
|
||
| /** Blur radius applied to content already drawn behind this layer. */ | ||
| var backdropBlurRadius: Dp |
There was a problem hiding this comment.
It seems you've implemented it only for iOS and silently ignore this on Desktop and Web. It doesn't seem like a proper implementation.
Also, adding such public API forces usage of a full window/screen skia GPU canvas to implement it properly, but it is explicitly avoided for performance reasons.
For example desktop uses a regular color background non-skia view, and it's not clear how it's going to be implemented there
Add opt-in backdrop blur behind Compose dialogs and Material 3 modal bottom sheets. iOS blurs the hosting Compose scene with the same Skia
BlurEffectused by Compose rendering, using the requested radius before the separate overlay Metal surface is drawn. This removes the white tint caused by the earlier UIKit material overlay. Android modal sheets blur the host Compose view withRenderEffecton API 31 and newer. Zero or unspecified radius preserves the existing appearance. The blur affects Compose content in the host view; UIKit interop and unrelated Android views are outside that render surface.Tracks CMP-10845.
The
commonMainandandroidMainchanges are under AndroidX/AOSP review: bottom sheets, Compose UI dialogs, Material 3 alert dialogs, and custom BasicAlertDialog content. They must merge in AOSP before their counterparts can merge in this fork. This PR remains a draft pending that merge; the iOS implementation can be reviewed independently.Testing
QA should check sheets over text and images, dialog and sheet dismissal, nested overlays, and Android API 31+ behavior.
Release Notes
Features - iOS
Features - Android