A Snapshot Preview of Paparazzi 2.0 (droidcon NYC 2024)

Since last Droidcon NYC, Paparazzi has seen continued increased adoption across the Android community!

In this session, we'll discuss:
* why pixel perfection is challenging af
* why Google's publishing of layoutlib is great for the community
* why we chose APNG for animations
* ...and more!

We'll also give a sneak peek to what's coming in 2.0, as well as why we're excited about it and you should be too!

Video: coming soon!

Transcript

1. A Snapshot Preview of Paparazzi 2.0 📸 John Rodriguez
2. Recap: DCNYC 2023
4. src/main/res src/debug/res appcompat.aar:/res build/intermediates/res/merged/debug
5. AppResourceRepository ModuleResourceRepository ProjectResourceRepository ResourceFolderResourceRepository AarResourceRepository
6. RFRR (src/main/res) RFRR (src/debug/res) RFRR (resValues) MRR (feature1:views) RFRR (src/main/res) RFRR (src/debug/res) RFRR (resValues) MRR (feature2:views) PRR (main app) AppRR (main repo) AarRR (./gradle/transforms/res/)
7. • Initial pro fi ling shows heap usage drops from about ~52.9MB to ~1.7MB! • Now supports application and dynamic feature modules! • Various bugs around string resources also fi xed! • “Easier” to migrate to another build system
8. • Initial pro fi ling shows heap usage drops from about ~52.9MB to ~1.7MB! • Now supports application and dynamic feature modules! • Various bugs around string resources also fi xed! • “Easier” to migrate to another build system
12. class ValidateAccessibilityTest { @get:Rule val paparazzi = Paparazzi(validateAccessibility = true) @Test fun validateTextContrast() { paparazzi.snapshot( TextView(paparazzi.context).apply { textA= "Low Contrast" setTextColor(Color.WHITE) setBackgroundColor(Color.WHITE) } ) } } Accessibility issue of type LOW_CONTRAST on no-id: The item's text contrast ratio is 1.00. This ratio is based on a text color of #FFFFFF and background color of #FFFFFF. Consider increasing this item's text contrast ratio to 4.50 or greater.
13. class ComposeTest { @get:Rule val paparazzi = Paparazzi( deviceConfig = DeviceConfig.WEAR_OS_SMALL_ROUND, ) @Test fun compose() { paparazzi.snapshot { HelloPaparazzi() } } }
35. :feature:ui compose:ui-android:1.7.2@aar implementation apply plugin: 'com.android.library' apply plugin: 'org.jetbrains.kotlin.android'
36. :paparazzi apply plugin: ‘org.jetbrains.kotlin.jvm' compose:ui-android:1.7.2@aar
37. jar +--- META-INF | +--- services | \--- ... +--- app | +--- cash | \--- Paparazzi.class | \--- ... ... aar +--- META-INF | +--- services | \--- ... +--- AndroidManifest.xml +--- assets | \--- ... +--- baseline-profile.txt +--- classes.jar +--- jni | \--- ... +--- lint.jar +--- proguard.txt +--- public.txt +--- R.txt \--- res +--- values \--- values.xml
38. jar +--- META-INF | +--- services | \--- ... +--- app | +--- cash | \--- Paparazzi.class | \--- ... ... aar +--- META-INF | +--- services | \--- ... +--- AndroidManifest.xml +--- assets | \--- ... +--- baseline-profile.txt +--- classes.jar +--- jni | \--- ... +--- lint.jar +--- proguard.txt +--- public.txt +--- R.txt \--- res +--- values \--- values.xml
39. dependencies.registerTransform(IdentityTransform :: class.java) { it.from.attribute(AndroidArtifacts.ARTIFACT_TYPE, "jar") it.to.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aarAsJar") }
40. dependencies.registerTransform(IdentityTransform :: class.java) { it.from.attribute(AndroidArtifacts.ARTIFACT_TYPE, "jar") it.to.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aarAsJar") } jar IdentityTransform aarAsJar(jar)
41. dependencies.registerTransform(ExtractClassesTransform :: class.java) { it.from.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aar") it.to.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aarAsJar") }
42. dependencies.registerTransform(ExtractClassesTransform :: class.java) { it.from.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aar") it.to.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aarAsJar") } aar ExtractClassesTransform aarAsJar(classes.jar)
43. val aarAsJar = project.configurations .resolvable("implementatio n​ AarAsJar") a {a it.attributes.attribute(AndroidArtifacts.ARTIFACT_TYPE, "release") it.attributes.attribut e​​(​​​ Usage.USAGE_ATTRIBUTE, project.objects.named(Usage :: class.java, Usage.JAVA_API) ) } .incoming .artifactViewa{a it.attributes.attribute(AndroidArtifacts.ARTIFACT_TYPE, "aarAsJar") a }a .files
44. project.configurations .getByName("implementatio n​ ") .dependencies .add(project.dependencies.create (​ aarAsJar))
45. project.configurations .getByName("implementatio n​ ") .dependencies .add(project.dependencies.create (​ aarAsJar)) // paparazzi/build.gradle apply plugin: 'aar2jar' dependencies { implementationAarAsJar libs.androidx.compose.ui.android implementationAarAsJar libs.androidx.activity }
46. public fun snapshot( name: String? = null, composable: @Composable () -> Unit ) { createFrameHandler(name).use { handler -> frameHandler = handler sdk.snapshot(composable) } } @Test fun compose() { paparazzi.snapshot { HelloPaparazzi() } }
47. public fun snapshot( name: String? = null, composable: @Composable () -> Unit ) { createFrameHandler(name).use { handler -> frameHandler = handler sdk.snapshot(composable) } } @Test fun compose() { paparazzi.snapshot { HelloPaparazzi() } }
51. Jan 2024
52. Mar 2024
53. May 2024
57. =
61. package sun.java2d; public final class SunGraphics2D extends Graphics2D implements ConstrainableGraphics, Cloneable, DestSurfaceProvider { // cached state for various draw[String,Char,Byte] optimizations public FontInfo checkFontInfo(FontInfo info, Font font, FontRenderContext frc) { ... } }
62. package sun.java2d; public final class SunGraphics2D extends Graphics2D implements ConstrainableGraphics, Cloneable, DestSurfaceProvider { // cached state for various draw[String,Char,Byte] optimizations public FontInfo checkFontInfo(FontInfo info, Font font, FontRenderContext frc) { ... if (FontUtilities.isMacOSX14 && (aahint == SunHints.INTVAL_TEXT_ANTIALIAS_OFF)) { aahint = SunHints.INTVAL_TEXT_ANTIALIAS_ON; } ... } }
63. package sun.java2d; public final class SunGraphics2D extends Graphics2D implements ConstrainableGraphics, Cloneable, DestSurfaceProvider { // cached state for various draw[String,Char,Byte] optimizations public FontInfo checkFontInfo(FontInfo info, Font font, FontRenderContext frc) { ... if (FontUtilities.isMacOSX14 && (aahint == SunHints.INTVAL_TEXT_ANTIALIAS_OFF)) { aahint = SunHints.INTVAL_TEXT_ANTIALIAS_ON; } ... } }
70. https://www.w3.org/TR/png/#apng-frame-based-animation
71. class LottieTest { @get:Rule val paparazzi = Paparazzi() @Test fun lottie() { val composition = LottieCompositionFactory.fromRawResSync( paparazzi.context, R.raw.lottie_logo ).value !! val view = LottieAnimationView(paparazzi.context) view.setComposition(composition) view.playAnimation() } }
72. class LottieTest { @get:Rule val paparazzi = Paparazzi() @Test fun lottie() { val composition = LottieCompositionFactory.fromRawResSync( paparazzi.context, R.raw.lottie_logo ).value !! val view = LottieAnimationView(paparazzi.context) view.setComposition(composition) view.playAnimation() paparazzi.gif(view, "lottie", start = 0L, end = 5000L, fps = 60) } }
76. src/main/res src/debug/res appcompat.aar:/res build/intermediates/res/merged/debug
77. RFRR (src/main/res) RFRR (src/debug/res) RFRR (resValues) MRR (feature1:views) RFRR (src/main/res) RFRR (src/debug/res) RFRR (resValues) MRR (feature2:views) PRR (main app) AppRR (main repo) AarRR (./gradle/transforms/res/)
78. // com.android.ide.common.resources.ResourceTable Table< ResourceNamespace, ResourceType, ListMultimap<String, ResourceItem> > delegate: = Tables.newCustomTable( new HashMap <> (), () -> Maps.newEnumMap(ResourceType.class) );
79. // com.android.ide.common.resources.ResourceTable Table< ResourceNamespace, ResourceType, ListMultimap<String, ResourceItem> > delegate: = Tables.newCustomTable( new HashMap <> (), () -> Maps.newEnumMap(ResourceType.class) ); R.string.title
80. // com.android.ide.common.resources.ResourceTable Table< ResourceNamespace, ResourceType, ListMultimap<String, ResourceItem> > delegate: = Tables.newCustomTable( new HashMap <> (), () -> Maps.newEnumMap(ResourceType.class) ); ResourceNamespace = ResourceNamespace.RES_AUTO ResourceType = ResourceType.STRING key = "title" ResourceItem = module/src/main/res/values.xml@title="Hello world" R.string.title
81. R.string.title But how do we get: ?
82. // com/sample/R.jar public final class R { class string { public static final int title = 0x22012; ... } ... }
85. public fun main() { val me = "/Users/jrod" System.setProperty("paparazzi.project.dir", ".") System.setProperty("paparazzi.build.dir", "build") System.setProperty("paparazzi.artifacts.cache.dir", "$me/.gradle/caches") System.setProperty("paparazzi.test.resources", "$me/Development/paparazzi/sample/build/intermediates/paparazzi/debug/resources.json") System.setProperty("paparazzi.platform.data.root", "$me/.gradle/caches/transforms-4/ ... /layoutlib-native-macarm-2023.2.1-6c7316c") val output = File("test.png") val sdk = PaparazziSdk( onNewFrame = { image -> ImageIO.write(image, "PNG", output) } ) sdk.setup() sdk.prepare() sdk.snapshot(buildView(sdk.context)) sdk.teardown() println("Done!") }
87. .com/cashapp/paparazzi
88. A Snapshot Preview of Paparazzi 2.0 📸 @jrodbx