Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Previews as a Power User

Compose Previews as a Power User

Subhrajyoti Sen

October 06, 2024
Tweet

More Decks by Subhrajyoti Sen

Other Decks in Programming

Transcript

  1. @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id =

    0, itemName = "XBox Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
  2. @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id

    = 0, itemName = "XBox Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
  3. @Preview @Composable fun BorrowedItemRowPreview() { BorrowedItemRow( item = BorrowItem( id

    = 0, itemName = "XBoz Series X", borrowerName = "Steve", borrowDate = "2-11-2023" ) ) }
  4. Available Arguments • name • group • uiMode • locale

    • showSystemUi • showBackground • device • apiLevel
  5. @Preview( showSystemUi = true, device = Devices.NEXUS_5X ) @Preview( showSystemUi

    = true, device = Devices.NEXUS_10 ) annotation class MultiDevicePreview
  6. @Preview( showSystemUi = true, device = Devices.NEXUS_5X ) @Preview( showSystemUi

    = true, device = Devices.NEXUS_10 ) annotation class MultiDevicePreview
  7. @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
  8. @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" ) ) }
  9. 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" ) ) }
  10. 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" ) ) }
  11. @Preview(locale = "en", group = "English") @Preview(locale = "fr-rCA", group

    = "Canadian French") @Preview(locale = "es-rUS", group = "US Spanish") annotation class MultiLocalePreview
  12. @Composable fun BorrowedItemRow(item: BorrowItem) { var expanded by remember {

    mutableStateOf(false) } // this will only affect previews if (LocalInspectionMode.current) { expanded = true } //.. }
  13. @Composable fun BorrowedItemRow(item: BorrowItem) { var expanded by remember {

    mutableStateOf(false) } // this will only affect previews if (LocalInspectionMode.current) { expanded = true } //.. }
  14. class PaparazziTests { @get:Rule val paparazzi = Paparazzi( deviceConfig =

    PIXEL_5.copy(nightMode = NightMode.NIGHT), renderingMode = RenderingMode.SHRINK ) }
  15. class PaparazziTests { @get:Rule val paparazzi = Paparazzi( deviceConfig =

    PIXEL_5.copy(nightMode = NightMode.NIGHT), renderingMode = RenderingMode.SHRINK ) }
  16. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot {

    BorrowTheme { BorrowedItemRow( item = //.. ) } } } }
  17. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot {

    CompositionLocalProvider(LocalInspectionMode provides true) { BorrowTheme { BorrowedItemRow( item = //.. ) } } } } }
  18. class PaparazziTests { //.. @Test fun launchComposable() { paparazzi.snapshot {

    CompositionLocalProvider(LocalInspectionMode provides true) { BorrowTheme { BorrowedItemRow( item = //.. ) } } } } }
  19. Works on JVM Based on Layoutlib Fully Automated Compose Preview

    Screenshot Needs a special directory Emulates Debug