Modaal Android: Modal Dialogs and Sheets in Apps
Key points
- "Modaal" is the Dutch word for modal; there is no official Android library with that name.
- AlertDialog, DialogFragment and ModalBottomSheet are the native ways to build an Android modal.
- A DialogFragment survives rotation and font-scale changes better than a bare Dialog.
- Modaal jQuery modals run in an Android WebView only when JavaScript is enabled.
- Test every modal at 200 percent font scale, in dark theme, with TalkBack and the back gesture.
What does "Modaal Android" actually mean?
"Modaal Android" is the Dutch spelling of "modal" attached to Android, so the search almost always means one thing: you want a modal window — a dialog, pop-up or bottom sheet that blocks the rest of the screen until the user answers — on Android. It is not the name of an official Android SDK component, and there is no Google library called Modaal. Treat it as a spelling of "modal" plus a platform name.
Two genuinely different things get called that. The first is native Android modal UI: AlertDialog, DialogFragment and ModalBottomSheet in Jetpack Compose. The second is a third-party jQuery modal plugin also named Modaal, which runs in a browser and therefore inside an Android WebView if JavaScript is enabled.
Knowing which one you are dealing with changes everything about the fix. A native dialog is compiled into your app, follows the Material theme, and participates in the system back gesture. A jQuery-based modal is just HTML, CSS and JavaScript rendered by the WebView, so it inherits WebView quirks instead of Android framework behaviour.
Native Android modals: pick the right one
In Jetpack Compose, the shortest path to a blocking modal is AlertDialog with a confirm and dismiss button, because it handles focus, scrim and dismissal for you. For a half-height sheet that users can drag, use ModalBottomSheet together with rememberModalBottomSheetState; if you want it to open fully expanded rather than at half height, set skipPartiallyExpanded to true in the sheet state.
In the older View system, return an AlertDialog.Builder from DialogFragment.onCreateDialog. A DialogFragment survives configuration changes such as rotation and font-size changes far more gracefully than a bare Dialog, because the FragmentManager recreates it instead of leaking a window. A raw Dialog built with an Activity context that outlives the screen is the classic source of window-leak crashes.
Back handling matters more than styling. From Android 13 (API 33) onward the predictive back gesture is part of the system, and a modal that swallows back without a visible exit leaves users stuck. Dialogs are cancellable by default, so if you set cancelable to false you must provide your own close affordance; we have seen production apps where the only escape was force-quitting.
Using the Modaal jQuery plugin in an Android WebView
If your modal comes from an HTML page, you are running it in a WebView, and the setup is roughly five steps. One: set settings.javaScriptEnabled to true, because nothing in a jQuery plugin works without it. Two: enable DOM storage if the plugin persists state. Three: attach a WebViewClient so links and redirects stay inside the app, and override shouldOverrideUrlLoading for external links.
Four: handle the back button yourself, checking webView.canGoBack() before finishing the Activity, otherwise back closes your app while the modal is still open on screen. Five: set android:windowSoftInputMode to adjustResize in the manifest so a text field inside the modal is not hidden behind the keyboard.
Local testing over plain http also needs cleartext traffic allowed in the network security config, or the page simply fails to load. Remember that the Android System WebView is updated independently through Google Play, so the rendering engine version varies by device. We cannot promise any third-party plugin behaves identically across those versions — test on your actual target hardware rather than one emulator image.
How do you test a modal on Android?
A modal is one of the easiest things to test badly. Our own check runs six passes: portrait and landscape rotation, system font scale pushed to 200 percent, dark theme, TalkBack focus order, the back gesture, and process death enabled through the developer option "Don't keep activities". Those six catch most of the bugs that reach users.
Rotation exposes state loss. Font scale exposes clipped button labels, which is where fixed-height dialogs fall over. TalkBack exposes a broken focus trap, because a modal that does not move focus into itself is invisible to screen readers. Process death exposes a dialog rebuilt after the ViewModel that supplied its data is already gone.
For WebView-based modals, remote debugging is the fastest tool: connect the device, open chrome://inspect on your desktop Chrome, and the embedded page appears as a debuggable target. When a page loads the wrong environment, a quick IP address lookup from inside the WebView shows which egress IP it reached, which tells you whether it hit staging or production. You can also browse more free browser-based tools from OnlineFree.app with no sign-up, which is handy when you need to check a URL, a token count or a time zone mid-debug.
Mistakes that break Android modals
The five we see most often: stacking a second modal on top of the first with no clear dismissal order; setting cancelable to false and providing no close button; holding an Activity reference in a long-lived object; hard-coding heights that clip at large font scales; and treating a modal as an advertisement rather than a decision point.
Accessibility is the quiet failure. The W3C's authoring practices for the dialog pattern require focus to move into the dialog when it opens and to return to the trigger when it closes, and they require the rest of the page to be inert. Android dialogs mostly do this for you; hand-rolled overlays almost never do, and jQuery-era modals vary by plugin version.
Be honest about scope too. A modal is a blocking interaction, so using one for anything a user did not initiate costs you retention. If the modal involves money, health or legal choices, verify the content and the calculation independently rather than trusting a template. And if a plugin claims full Android support, confirm it on your own WebView versions before shipping — that claim is not something we can confirm for you. If you want the written workflow for build-and-test tasks, the OnlineFree.app blog and guides cover the tooling side in more depth.
Frequently asked questions
Is Modaal Android a real Android library?
No. There is no official Android SDK component or Google library named Modaal; "modaal" is simply the Dutch word for "modal". Searches for Modaal Android almost always mean modal windows on Android — AlertDialog, DialogFragment or ModalBottomSheet — or the third-party Modaal jQuery plugin running inside a WebView.
How do I open a modal dialog in Android with the least code?
In Jetpack Compose, use AlertDialog with a title, text and two buttons; it manages the scrim, focus and dismissal itself. In the View system, return an AlertDialog.Builder from DialogFragment.onCreateDialog and show it with show(fragmentManager, "tag"). Both survive rotation better than a bare Dialog tied to an Activity instance.
Does the Modaal jQuery plugin work inside an Android WebView?
It runs if JavaScript is enabled, DOM storage is set as needed, and your network security config allows the page's scheme. It is not officially supported by Android, and results vary because the System WebView updates independently of the operating system. Test on your real target devices rather than trusting a single emulator image.
Why does my Android modal disappear when I rotate the phone?
Rotation is a configuration change that recreates the Activity. A Dialog held directly by that Activity is destroyed with it, while a DialogFragment is recreated by the FragmentManager and a Compose dialog rebuilt from remembered state reappears. Moving the dialog's data into a ViewModel also prevents crashes after process death.
Can I build and test Android modals with free online tools?
Free browser-based tools help with the surrounding work — checking URLs, IP addresses, tokens or time zones — and OnlineFree.app offers those with no sign-up. They cannot replace Android Studio, the SDK or a physical device, because compiling, running and accessibility-testing a modal requires the Android toolchain.
References
- W3C WAI-ARIA Authoring Practices: Dialog (Modal) Pattern · w3.org
- Android developers: DialogFragment reference · developer.android.com
- Android developers: WebView reference · developer.android.com