[MaterialAlertDialog] When displayed on top of BottomSheetDialog, screen flickers

[daniel-stoneuk]

Description: When showing a MaterialAlertDialog on top of a BottomSheetDialog, the scrim goes very dark and then becomes lighter again. See the attached gif at 50% speed (edit - there are video files in the attached repo)

This is not a great experience for the user as it is quite jarring to see the background change brightness quickly.

Expected behavior: I expect the MaterialAlertDialog to not have any issues with the BottomSheetDialog elevation, and simply appear on top as it does normally.

Source code: Within a BottomSheetDialog

MaterialAlertDialogBuilder(requireContext())
                .setTitle(R.string.dialog_close_title)
                .setMessage(R.string.dialog_close_message)
                .setPositiveButton(R.string.dialog_close_positive) { _, _ ->
                    dialog.setCancelable(true)
                    dialog.cancel()
                }.setNegativeButton(R.string.dialog_close_negative, null)
                .show()

See example project: https://github.com/daniel-stoneuk/material-dialog-report

Android API version: tested on 27

Material Library version: 1.3.0-alpha01

Device: Emulator

[michael-winkler]

This is no bug at all. A "BottomSheetDialog" and a "MaterialAlertDialog" have both a dim amount of screen.

What you see as "bug" is first the dim from the sheet dialog and then the dim amount from the alert dialog.

[daniel-stoneuk]

My apologies for not creating a more extensive issue report in the first place. I have since created a demo repository with (added to original comment) and I have attached two videos here which show the difference between my expected behaviour and what I'm seeing. The expected behaviour is from https://github.com/afollestad/material-dialogs

The MaterialAlertDialog's dim is less than that of the BottomSheetDialog, however I don't believe the screen should lighten like it does in the video and gif here. The flicker isn't that clear in the gif, but the video should show it well.

demo video.zip

[mateuszkwiecinski]

I'm facing exactly the same issue. I've tried to work around it by:

1. Disabling backgroundDimEnabled and setting windowBackground manually for the BottomSheetDialog - it didn't work well because of the windowAnimation which made the window background to animate as well.
2. Disabling backgroundDimEnabled and setting windowBackground manually for the MaterialAlertDialog (which should work as dialog's window animation tranforms only alha attribute) but then I encountered https://issuetracker.google.com/issues/120426520 - basically it is not possible to customize the background behind MaterialAlertDialog 🤷
3. I also tried to remove BottomSheet's backgroundDim after the window animation finishes and replace it with static window background, but as the removal happens with animation it also didn't worked in expected way.
4. I tried to use afollestad's library, but it overrode couple of default animations and basically it doesn't seem to respect themes defined within my app. As the transition wasn't trivial I dropped the idea

tl;dr I couldn't find any workaround 🤷 I also don't hope the bug to be fixed anymore, as amount of workload clearly exceeds maintainers' capabilities :/ so, if anyone finds a workaround, please do share it!

[tanranran]

+1

[dsn5ft]

I agree with @Mika-89 - I think this is because both components have the window dim/scrim, and since the scrims are translucent they are overlapping with each other for a split second. I don't think there's anything we can do to fix it, since we don't even have full control over the scrim (they are based on the framework's window dim).

The only workarounds I can think of are disabling the scrim on one of the components, or delaying the showing of the dialog slightly to allow for the bottom sheet and it's scrim to fully (or almost fully) disappear first.

[lwasyl]

@dsn5ft I'm not sure you're addressing the actual issue though. Yes, flickering is one component, but if you look at Daniel's gif, you can see that a single dim is darker than double scrim:

Additionally, according to https://github.com/material-components/material-components-android/issues/1448#issuecomment-831790355 disabling scrim for just one of the components doesn't work — would you mind pointing to specific API or better yet, implementing a sample fix in https://github.com/daniel-stoneuk/material-dialog-report?

Finally, I'm wondering what afollestad/material-dialogs does that prevents this scrim issue. Perhaps a similar approach can be used to avoid the issue in this official library?

[daniel-stoneuk]

These are the two video files from my original issue (I don't think GitHub allowed video embeds back then)

https://user-images.githubusercontent.com/15860949/164476386-5edd9d6c-147c-4817-acae-1380a571c039.mp4

https://user-images.githubusercontent.com/15860949/164476431-8ae0c872-9f5a-44ce-a3fc-0ee09fe5ff9d.mov

Interestingly, the "flicker" from before -> dimmer -> brighter -> end is only present in the tablet. I'm no longer working on the original project, and it's been a while since I worked with the material components library so I can't confirm if this is still present. However, I can understand the difficulty in getting the two scrims to swap cleanly.

The brightness of the overlapping scrims described by @lwasyl, perhaps, should be a new issue so it's easier to track?