Search code examples
androidandroid-alertdialogxiaomi

How to make AlertDialog show near edge of the screen


I have an AlertDialog working fine on most android devices. The dialog shows up from the bottom with its layout and it is drawn near the bottom edge of the screen. However, on the Xiaomi Mi 8 device, the dialog hovers above the bottom edge. This device has rounded screen corners, and I think the dialog is trying to avoid them. However, this looks terribly bad aesthetically. How can I create the dialog so that it appears near the edge of the screen in all devices, regardless of their screen corners?

Unfortunately stackoverflow is filled with questions about making a dialog with round corners and I can't find anything of use. The closest was this question regarding the status bar but the suggestions there didn't change the dialog behaviour for the AlertDialog on the Mi8.

To showcase the problem I made a minimal example project. At commit 763bc62ff9320227b806260e861b63d48cc2347d the following screenshot shows the problem on the Mi8, where the full screen mode leaves the dialog floating above the edge of the screen, and it seems like it does some weird thing with the overlay at the top too.

floating alertdialog on full screen vs normal display

The Xiaomi Mi8 is pushing the AlertDialog above the screen corners because the AlertDialog is declared as floating. After changing the style to windowIsFloating = false the dialog would show up near the edge of the screen:

<style name="Dialog" parent="Theme.AppCompat.Dialog.Alert">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowAnimationStyle">@style/MapDialogAnimation</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowMinWidthMajor">100%</item>
    <item name="android:windowMinWidthMinor">100%</item>
    <item name="android:colorBackgroundCacheHint">@null</item>

    <!-- https://stackoverflow.com/a/28341624/172690 -->
    <item name="android:fitsSystemWindows">true</item>
</style>

Unfortunately, this solution works for the Xiaomi, but not for another Samsung SM-J530F, which shows a black bar during the animation:

Samsung SM-J530F black bar animation

In order to avoid the black bar in the animation, the only way I found was to make windowFullScreen = true. However, when this value is set to true, then the Xiaomi makes a weird status bar animation:

enter image description here

Is there any way to make this simple animation consistent on all android devices without having to resort to several hardcoded conditionals?

UPDATE: As suggested, instead of animating the dialog I changed in commit 403808dcfb5d3fae52c51eb1b21593b79065ada7 the dialog to not animate and moved the button myself through constraint layout sets:

[!https://gitlab.com/gradha/stackoverflow53343622/wikis/uploads/8e7a47d939677277459619db6af27de3/mi8_buttons.gif]

enter image description here


Solution

  • The best solution is to animate the view, not the transition of the fragment, dialog or whatever you are using.