Search code examples
androidandroid-jetpack-compose

Is there a way to change preview resolution in jetpack compose?


I'm developing an app for a specific device. I can change the size of the preview screen with

@Preview(showBackground = true, widthDp = 1080, heightDp = 1920)

Is there a way to change resolution as well? The screen seems to be ~480p.


Solution

  • You can pass a device parameter to @Preview annotation, to change resolution. There is my polygon where I test different devices with different resolutions.

    @Preview(name = "NEXUS_7", device = Devices.NEXUS_7)
    @Preview(name = "NEXUS_7_2013", device = Devices.NEXUS_7_2013)
    @Preview(name = "NEXUS_5", device = Devices.NEXUS_5)
    @Preview(name = "NEXUS_6", device = Devices.NEXUS_6)
    @Preview(name = "NEXUS_9", device = Devices.NEXUS_9)
    @Preview(name = "NEXUS_10", device = Devices.NEXUS_10)
    @Preview(name = "NEXUS_5X", device = Devices.NEXUS_5X)
    @Preview(name = "NEXUS_6P", device = Devices.NEXUS_6P)
    @Preview(name = "PIXEL_C", device = Devices.PIXEL_C)
    @Preview(name = "PIXEL", device = Devices.PIXEL)
    @Preview(name = "PIXEL_XL", device = Devices.PIXEL_XL)
    @Preview(name = "PIXEL_2", device = Devices.PIXEL_2)
    @Preview(name = "PIXEL_2_XL", device = Devices.PIXEL_2_XL)
    @Preview(name = "PIXEL_3", device = Devices.PIXEL_3)
    @Preview(name = "PIXEL_3_XL", device = Devices.PIXEL_3_XL)
    @Preview(name = "PIXEL_3A", device = Devices.PIXEL_3A)
    @Preview(name = "PIXEL_3A_XL", device = Devices.PIXEL_3A_XL)
    @Preview(name = "PIXEL_4", device = Devices.PIXEL_4)
    @Preview(name = "PIXEL_4_XL", device = Devices.PIXEL_4_XL)
    @Preview(name = "AUTOMOTIVE_1024p", device = Devices.AUTOMOTIVE_1024p)
    @Composable
    fun Polygon() {
      val dm = LocalContext.current.resources.displayMetrics
      val widthPixels = dm.widthPixels
      val heightPixels = dm.heightPixels
      val densityDpi = dm.densityDpi
      val density = dm.density
      val xdpi = dm.xdpi
      val ydpi = dm.ydpi
      val scaledDensity = dm.scaledDensity
    
      val widthInch = widthPixels.toFloat() / xdpi
      val heightInch = heightPixels.toFloat() / ydpi
      val diagonalInch = sqrt(widthInch * widthInch + heightInch * heightInch).times(100).toInt().toFloat().div(100)
    
      val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
      Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.padding(8.dp).fillMaxSize(1f),
      ) {
        Text(text = "widthPixels = $widthPixels")
        Text(text = "heightPixels = $heightPixels")
        Text(text = "densityDpi = $densityDpi")
        Text(text = "density = $density")
        Text(text = "xdpi = $xdpi")
        Text(text = "ydpi = $ydpi")
        Text(text = "scaledDensity = $scaledDensity")
        Text(text = "dpWidth = ${widthPixels.toFloat() / density}")
        Text(text = "dpHeight = ${heightPixels.toFloat() / density}")
        Text(text = "diagonalInch = $diagonalInch")
        Text(text = "isPortrait = $isPortrait")
      }
    }