Add a list of predefined Devices

README.md

@@ -29,13 +29,13 @@ fun AdvancedPreview(
 | `statusBarSize` | Specify custom StatusBar size. Default value is `24.dp` |
 | `statusBarContentPadding` | Specify custom StatusBar inner padding. Default value is `PaddingValues(start = 8.dp, end = 4.dp)` |
 | `displayCutout` | Currently only "O-shaped" cutout is supported. You can customize size, margins and position |
-| `navigationType` | Choose between navigation types: `NavigationType.ThreeButtons` or `NavigationType.Gesture` |
 
 #### Settings
 | Property | Description |
 |---|---|
 | `time` | Customize time displayed on StatusBar by providing `hours` and `minutes`. Default value is `StatusBarTime(hours = 12, minutes = 0)` |
 | `showDisplayCutoutDecoration` | Specify whether to draw the black mask as display cutout decoration |
+| `navigationType` | Choose between navigation types: `NavigationType.ThreeButtons` or `NavigationType.Gesture` |
 
 #### StatusBar / NavigationBar
 | Property | Description |

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/AdvancedPreview.kt

@@ -28,10 +28,10 @@ fun AdvancedPreview(
     ) {
         StatusBarLayout(device, settings, statusBar)
 
-        ContentLayout(device, statusBar, navigationBar, content)
+        ContentLayout(device, settings, statusBar, navigationBar, content)
 
         NavigationBarLayout(
-            device,
+            settings.navigationType,
             navigationBar,
             modifier = Modifier.align(Alignment.BottomCenter)
         )

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/Device.kt

@@ -13,14 +13,8 @@ class Device(
         end = DefaultStatusBarContentPaddingEnd
     ),
     val displayCutout: DisplayCutout? = null,
-    val navigationType: NavigationType = NavigationType.ThreeButtons()
 )
 
-sealed class NavigationType(val size: Dp) {
-    class ThreeButtons : NavigationType(size = DefaultNavigationBarSizeThreeButtons)
-    class Gesture : NavigationType(size = DefaultNavigationBarSizeGesture)
-}
-
 sealed class DisplayCutout(
     val width: Dp,
     val height: Dp,
@@ -50,7 +44,4 @@ private val DefaultScreenHeight = 874.dp
 private val DefaultStatusBarSize = 24.dp
 
 private val DefaultStatusBarContentPaddingStart = 8.dp
-private val DefaultStatusBarContentPaddingEnd = 4.dp
-
-private val DefaultNavigationBarSizeThreeButtons = 48.dp
-private val DefaultNavigationBarSizeGesture = 16.dp
+private val DefaultStatusBarContentPaddingEnd = 4.dp

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/Devices.kt

@@ -0,0 +1,78 @@
+package com.mobnetic.compose.advancedpreview
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.ui.unit.dp
+import com.mobnetic.compose.advancedpreview.DisplayCutout.Position
+
+object Devices {
+
+    object Pixel6 {
+        const val widthDp = 420
+        const val heightDp = 934
+
+        operator fun invoke() = Device(
+            screenWidth = widthDp.dp,
+            screenHeight = heightDp.dp,
+            statusBarSize = 48.dp,
+            statusBarContentPadding = PaddingValues(start = 19.dp, top = 1.dp, end = 29.dp),
+            displayCutout = DisplayCutout.O(
+                size = 25.dp,
+                topMargin = 11.5.dp,
+                position = Position.Center
+            ),
+        )
+    }
+
+    object Pixel6Pro {
+        const val widthDp = 450
+        const val heightDp = 975
+
+        operator fun invoke() = Device(
+            screenWidth = widthDp.dp,
+            screenHeight = heightDp.dp,
+            statusBarSize = 45.dp,
+            statusBarContentPadding = PaddingValues(start = 25.dp, top = 1.dp, end = 32.dp),
+            displayCutout = DisplayCutout.O(
+                size = 26.dp,
+                topMargin = 9.5.dp,
+                position = Position.Center
+            ),
+        )
+    }
+
+    object Pixel5 {
+        const val widthDp = 402
+        const val heightDp = 871
+
+        operator fun invoke() = Device(
+            screenWidth = widthDp.dp,
+            screenHeight = heightDp.dp,
+            statusBarSize = 54.dp,
+            statusBarContentPadding = PaddingValues(start = 16.dp, top = 2.dp, end = 27.dp),
+            displayCutout = DisplayCutout.O(
+                size = 28.dp,
+                leftMargin = 13.dp,
+                topMargin = 13.dp,
+                position = Position.Left
+            ),
+        )
+    }
+
+    object Pixel4a {
+        const val widthDp = 389
+        const val heightDp = 843
+
+        operator fun invoke() = Device(
+            screenWidth = widthDp.dp,
+            screenHeight = heightDp.dp,
+            statusBarSize = 49.dp,
+            statusBarContentPadding = PaddingValues(start = 16.dp, top = 11.dp, end = 19.dp),
+            displayCutout = DisplayCutout.O(
+                size = 30.dp,
+                leftMargin = 15.dp,
+                topMargin = 15.dp,
+                position = Position.Left
+            ),
+        )
+    }
+}

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/Settings.kt

@@ -1,8 +1,12 @@
 package com.mobnetic.compose.advancedpreview
 
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
 data class Settings(
     val time: StatusBarTime = StatusBarTime.Default,
     val showDisplayCutoutDecoration: Boolean = false,
+    val navigationType: NavigationType = NavigationType.ThreeButtons()
 )
 
 @JvmInline
@@ -20,4 +24,12 @@ fun StatusBarTime(hours: Int, minutes: Int): StatusBarTime {
     require(hours in 0..23) { "Hours should be in 0..23" }
     require(minutes in 0..59) { "Minutes should be in 0..59" }
     return StatusBarTime(secondsOfDay = hours * 3600 + minutes * 60)
-}
+}
+
+sealed class NavigationType(val size: Dp) {
+    class ThreeButtons : NavigationType(size = DefaultNavigationBarSizeThreeButtons)
+    class Gesture : NavigationType(size = DefaultNavigationBarSizeGesture)
+}
+
+private val DefaultNavigationBarSizeThreeButtons = 48.dp
+private val DefaultNavigationBarSizeGesture = 16.dp

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/ui/ContentLayout.kt

@@ -9,22 +9,24 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.mobnetic.compose.advancedpreview.Device
 import com.mobnetic.compose.advancedpreview.NavigationBar
+import com.mobnetic.compose.advancedpreview.Settings
 import com.mobnetic.compose.advancedpreview.StatusBar
 import com.mobnetic.compose.advancedpreview.SystemBar
 
 @Composable
 internal fun ContentLayout(
     device: Device,
+    settings: Settings,
     statusBar: StatusBar,
     navigationBar: NavigationBar,
     content: @Composable () -> Unit
 ) {
     val contentPadding = PaddingValues(
         top = statusBar.getContentPadding(device.statusBarSize),
-        bottom = navigationBar.getContentPadding(device.navigationType.size)
+        bottom = navigationBar.getContentPadding(settings.navigationType.size)
     )
     Box(modifier = Modifier.padding(contentPadding)) {
-        ProvideWindowInsets(device, content = content)
+        ProvideWindowInsets(device, settings, content = content)
     }
 }
 

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/ui/NavigationBarLayout.kt

@@ -21,7 +21,6 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
-import com.mobnetic.compose.advancedpreview.Device
 import com.mobnetic.compose.advancedpreview.NavigationBar
 import com.mobnetic.compose.advancedpreview.NavigationType
 import com.mobnetic.compose.advancedpreview.NavigationType.Gesture
@@ -30,7 +29,7 @@ import com.mobnetic.compose.advancedpreview.R
 
 @Composable
 internal fun NavigationBarLayout(
-    device: Device,
+    navigationType: NavigationType,
     navigationBar: NavigationBar,
     modifier: Modifier
 ) {
@@ -39,13 +38,13 @@ internal fun NavigationBarLayout(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
             .fillMaxWidth()
-            .height(device.navigationType.size)
+            .height(navigationType.size)
             .background(navigationBar.color)
             .padding(horizontal = PaddingHorizontal)
             .zIndex(100f)
     ) {
         SystemBarContent(navigationBar) {
-            device.navigationType.Content()
+            navigationType.Content()
         }
     }
 }

advancedpreview/src/main/java/com/mobnetic/compose/advancedpreview/ui/WindowInsets.kt

@@ -8,21 +8,29 @@ import com.google.accompanist.insets.Insets.Companion.Insets
 import com.google.accompanist.insets.LocalWindowInsets
 import com.google.accompanist.insets.WindowInsets
 import com.mobnetic.compose.advancedpreview.Device
+import com.mobnetic.compose.advancedpreview.Settings
 
 @Composable
-internal fun ProvideWindowInsets(device: Device, content: @Composable () -> Unit) {
-    val insets = calculateWindowInsets(device)
+internal fun ProvideWindowInsets(
+    device: Device,
+    settings: Settings,
+    content: @Composable () -> Unit
+) {
+    val insets = calculateWindowInsets(device, settings)
     CompositionLocalProvider(LocalWindowInsets provides insets, content = content)
 }
 
 @Composable
-private fun calculateWindowInsets(device: Device) = with(LocalDensity.current) {
+private fun calculateWindowInsets(
+    device: Device,
+    settings: Settings,
+) = with(LocalDensity.current) {
     WindowInsets.Empty.copy(
         statusBars = StaticWindowInsetsType(
             Insets(top = device.statusBarSize.roundToPx())
         ),
         navigationBars = StaticWindowInsetsType(
-            Insets(bottom = device.navigationType.size.roundToPx())
+            Insets(bottom = settings.navigationType.size.roundToPx())
         )
     )
 }

sample/src/main/java/com/mobnetic/compose/advancedpreview/sample/Sample2.kt

@@ -17,17 +17,23 @@ import androidx.compose.ui.unit.dp
 import com.google.accompanist.insets.navigationBarsPadding
 import com.google.accompanist.insets.statusBarsPadding
 import com.mobnetic.compose.advancedpreview.AdvancedPreview
+import com.mobnetic.compose.advancedpreview.Devices
 import com.mobnetic.compose.advancedpreview.NavigationBar
+import com.mobnetic.compose.advancedpreview.Settings
 import com.mobnetic.compose.advancedpreview.StatusBar
 import com.mobnetic.compose.advancedpreview.ui.CloseButton
 import com.mobnetic.compose.advancedpreview.ui.LoremIpsumText
 
-@Preview
+@Preview(widthDp = Devices.Pixel6.widthDp, heightDp = Devices.Pixel6.heightDp)
 @Composable
 private fun Sample2AdvancedPreview() {
     val systemBarsColor = Color.Black.copy(alpha = 0.3f)
     MaterialTheme {
         AdvancedPreview(
+            device = Devices.Pixel6(),
+            settings = Settings(
+                showDisplayCutoutDecoration = true
+            ),
             statusBar = StatusBar.default(
                 color = systemBarsColor,
                 overlaysContent = true

sample/src/main/java/com/mobnetic/compose/advancedpreview/sample/Sample3.kt

@@ -16,6 +16,7 @@ import com.mobnetic.compose.advancedpreview.AdvancedPreview
 import com.mobnetic.compose.advancedpreview.Device
 import com.mobnetic.compose.advancedpreview.NavigationBar
 import com.mobnetic.compose.advancedpreview.NavigationType
+import com.mobnetic.compose.advancedpreview.Settings
 import com.mobnetic.compose.advancedpreview.StatusBar
 import com.mobnetic.compose.advancedpreview.ui.CloseButton
 import com.mobnetic.compose.advancedpreview.ui.LoremIpsumText
@@ -27,6 +28,8 @@ private fun Sample3AdvancedPreview() {
         AdvancedPreview(
             device = Device(
                 statusBarSize = 48.dp,
+            ),
+            settings = Settings(
                 navigationType = NavigationType.Gesture()
             ),
             statusBar = StatusBar.default(