CODEWITHSUNDEEP
androiddialogandroid-jetpack-compose
Ali_Waris
Ali_Waris

Reputation: 2382

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

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:

Upvotes: 6

Views: 6503

Answers (3)

Enes Koçer
Enes Koçer

Reputation: 26

There are deprecated codes in the solution above. the updated solution code is as follows:

val context = LocalContext.current
val windowManager =
    remember { context.getSystemService(Context.WINDOW_SERVICE) as WindowManager }

val windowMetrics = windowManager.currentWindowMetrics
val bounds = windowMetrics.bounds
val (width, height) = with(LocalDensity.current) {
    Pair(bounds.width().toDp(), bounds.height().toDp())
}

Upvotes: 0

Gasol
Gasol

Reputation: 2529

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)
        ) {
           // ...
        }
    }

Upvotes: 7

Chandresh Parmar
Chandresh Parmar

Reputation: 205

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

Upvotes: -1

Related Questions