Full screen dialog in Android Compose does not take full screen height

user_4164419 0
Viewed 780
Dialog(
  properties = DialogProperties(usePlatformDefaultWidth = false),
  onDismissRequest = {viewModel.showDialog.value = false}
){
  Column(modifier = Modifier.width(LocalConfiguration.current.screenWidthDp.dp)
    .height(LocalConfiguration.current.screenHeightDp.dp).background(color = Color.Black.copy(alpha = 1f))) {

  }
}

Running this code results in a dialog with fullscreen, but the height does not fully match the screen height.

Is there any way to make the dialog take full width and height of the screen size?

Please find the screenshot below:

android-jetpack-compose dialog android
2 Answers

If you take a took at how screenHeightDp is defined.

The current height of the available screen space, in dp units, corresponding to screen height resource qualifier.

Apparently, It excludes the area occupied by window insets, such as the status bar, navigation bar, and cutouts.

So here is a solution I managed to solve the problem. It try to get entire screen size from WindowManager. and feed them via Modifier.requiredSize(). Note that it is important to ignore parent constraints by using requiredSize, otherwise it won't work. More info at https://stackoverflow.com/a/65779227/157675 .

    Dialog(
        properties = DialogProperties(usePlatformDefaultWidth = false),
        onDismissRequest = onDismiss
    ) {
        val context = LocalContext.current
        val windowManager =
            remember { context.getSystemService(Context.WINDOW_SERVICE) as WindowManager }

        val metrics = DisplayMetrics().apply {
            windowManager.defaultDisplay.getRealMetrics(this)
        }
        val (width, height) = with(LocalDensity.current) {
            Pair(metrics.widthPixels.toDp(), metrics.heightPixels.toDp())
        }
        Column(
            modifier = Modifier
                .requiredSize(width, height)
                .background(color = Color.Green)
        ) {
           // ...
        }
    }
user_1576750

For making the dialog fill the full screen either use Modifier.fillMaxSize() or use Modifier.fillMaxWidth() along with Modifier.fillMaxHeight().

user_155457740
Related