Compose Previews as a Power User

Transcript

1. Compose Previews as a Power User Chennai Subhrajyoti Sen Motive
2. Simple Previews
3. @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id = 0, itemName = "XBox Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
4. @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id = 0, itemName = "XBox Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
5. @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id = 0, itemName = "XBoz Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
7. Available Arguments • name • group • uiMode • locale • showSystemUi • showBackground • device • apiLevel
8. Dark Mode
9. @Preview(uiMode = UI_MODE_NIGHT_YES) @Composable fun BorrowedItemRowDevicePreview() { BorrowTheme { BorrowedItemRow( item = //.. ) } }
11. Multi Preview Annotation
12. @Preview(uiMode = UI_MODE_NIGHT_NO) @Preview(uiMode = UI_MODE_NIGHT_YES) @Composable fun BorrowedItemRowDevicePreview() { BorrowTheme { BorrowedItemRow( item = //.. ) } }
13. @Preview(uiMode = UI_MODE_NIGHT_NO) @Preview(uiMode = UI_MODE_NIGHT_YES) annotation class LightDarkThemePreview
14. @LightDarkThemePreview @Composable fun BorrowedItemRowDevicePreview() { BorrowTheme { BorrowedItemRow( item = //.. ) } }
15. @LightDarkThemePreview @Composable fun BorrowedItemRowDevicePreview() { BorrowTheme { BorrowedItemRow( item = //.. ) } }
17. @Preview( showSystemUi = true, device = Devices.NEXUS_5X ) @Preview( showSystemUi = true, device = Devices.NEXUS_10 ) annotation class MultiDevicePreview
18. @Preview( showSystemUi = true, device = Devices.NEXUS_5X ) @Preview( showSystemUi = true, device = Devices.NEXUS_10 ) annotation class MultiDevicePreview
19. @Preview(locale = "en") @Preview(locale = "fr-rCA") @Preview(locale = "es-rUS") annotation class MultiLocalePreview Valid locale format: https://developer.android.com/guide/topics/resources/provid ing-resources#LocaleQualifier
20. @LightDarkThemePreview @MultiLocalePreview annotation class MultiLocaleLightDarkPreview
21. Dataset Driven Preview
23. @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id = 0, itemName = "XBox Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) } @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id = 0, itemName = "PlayStation", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
24. class BorrowItemsProvider : PreviewParameterProvider<BorrowItem> { override val values = sequenceOf( BorrowItem( id = 0, itemName = "PlayStation", borrowerName = "Steve", borrowDate = "2-11-2022" ), BorrowItem( id = 0, itemName = "XBox", borrowerName = "Steve", borrowDate = "2-11-2022" ) ) }
25. class BorrowItemsProvider : PreviewParameterProvider<BorrowItem> { override val values = sequenceOf( BorrowItem( id = 0, itemName = "PlayStation", borrowerName = "Steve", borrowDate = "2-11-2022" ), BorrowItem( id = 0, itemName = "XBox", borrowerName = "Steve", borrowDate = "2-11-2022" ) ) }
26. @Preview @Composable fun BorrowedItemRowPreview( @PreviewParameter(BorrowItemsProvider::class) item: BorrowItem ) { BorrowedItemRow( item ) }
27. @Preview @Composable fun BorrowedItemRowPreview( @PreviewParameter(BorrowItemsProvider::class) item: BorrowItem ) { BorrowedItemRow( item ) }
28. Declutter using Groups
29. @MultiLocaleLightDarkPreview @Composable fun BorrowedItemRowDevicePreview() { BorrowTheme { BorrowedItemRow( item = //.. ) } }
31. @Preview(locale = "en", group = "English") @Preview(locale = "fr-rCA", group = "Canadian French") @Preview(locale = "es-rUS", group = "US Spanish") annotation class MultiLocalePreview
33. Local Inspection
35. @Composable fun BorrowedItemRow(item: BorrowItem) { var expanded by remember { mutableStateOf(false) } // this will only affect previews if (LocalInspectionMode.current) { expanded = true } //.. }
36. @Composable fun BorrowedItemRow(item: BorrowItem) { var expanded by remember { mutableStateOf(false) } // this will only affect previews if (LocalInspectionMode.current) { expanded = true } //.. }
37. Showkase
39. @ShowkaseComposable(group = "Individual rows") @Preview @Composable fun BorrowedItemRowExpandedPreview() { BorrowTheme { BorrowedItemRow( //.. ) } }
40. @ShowkaseComposable(group = "Individual rows") @Preview @Composable fun BorrowedItemRowExpandedPreview() { BorrowTheme { BorrowedItemRow( //.. ) } }
41. @ShowkaseComposable(group = "Individual rows") @Composable @Preview fun BorrowedItemRowCollapsedPreview() { CompositionLocalProvider(LocalInspectionMode provides false) { BorrowTheme { BorrowedItemRow( //.. ) } } }
45. Animation Previews
48. updateTransition Supported Animations AnimatedVisibility animate*AsState rememberInfiniteTransition CrossFade AnimatedContent
49. Screenshot Testing
50. Available Options
51. Paparazzi Available Options
52. Paparazzi Roborazzi Available Options
53. Paparazzi Roborazzi Compose Preview Available Options
54. Paparazzi
55. Works on JVM Paparazzi
56. Works on JVM Based on Layoutlib Paparazzi
57. Works on JVM Based on Layoutlib Needs JUnit tests Paparazzi
58. Works on JVM Based on Layoutlib Needs JUnit tests Paparazzi Supports Views
59. Works on JVM Based on Layoutlib Needs JUnit tests Paparazzi Supports Views Emulates Production
60. class PaparazziTests { @get:Rule val paparazzi = Paparazzi( deviceConfig = PIXEL_5.copy(nightMode = NightMode.NIGHT), renderingMode = RenderingMode.SHRINK ) }
61. class PaparazziTests { @get:Rule val paparazzi = Paparazzi( deviceConfig = PIXEL_5.copy(nightMode = NightMode.NIGHT), renderingMode = RenderingMode.SHRINK ) }
62. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot { BorrowTheme { BorrowedItemRow( item = //.. ) } } } }
63. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot { CompositionLocalProvider(LocalInspectionMode provides true) { BorrowTheme { BorrowedItemRow( item = //.. ) } } } } }
64. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot { CompositionLocalProvider(LocalInspectionMode provides true) { BorrowTheme { BorrowedItemRow( item = //.. ) } } } } }
65. Baseline
66. After changes
67. Failure Comparison
68. Compose Preview Screenshot
69. Works on JVM Compose Preview Screenshot
70. Works on JVM Based on Layoutlib Compose Preview Screenshot
71. Works on JVM Based on Layoutlib Fully Automated Compose Preview Screenshot
72. Works on JVM Based on Layoutlib Fully Automated Compose Preview Screenshot Needs a special directory
73. Works on JVM Based on Layoutlib Fully Automated Compose Preview Screenshot Needs a special directory Emulates Debug
74. Compose Preview Screenshot - Source
75. Compose Preview Screenshot - Source @LightDarkThemePreview @Composable fun BorrowedItemRowPreview( @PreviewParameter(BorrowItemsProvider::class) item: BorrowItem ) { BorrowedItemRow( item ) }
76. Compose Preview Screenshot - Destination
77. Screen Comparison
78. Screen Comparison
79. Can’t decide? sergio-sastre/ComposablePreviewScanner
80. Further Exploration https://github.com/takahirom/roborazzi Composable Preview Driven Development: TDD-fying your UI with ease!
81. Questions?
82. Thank You! Chennai