Mastering Adaptive Layouts: Visual Testing for Every Screen

Android’s device ecosystem has expanded beyond phones - from foldable devices and tablets to Android TVs. Building truly adaptive layouts needs more than responsive design. It requires comprehensive visual testing to ensure that the UI works on every screen.

In this talk, we will discover how to build visual test suites that automatically validate your layouts across different screen sizes, densities, and aspect ratios. We will also discuss how frameworks for screenshot tests differ from each other and which tools can improve the visual testing process.

Transcript

1. @alex_zhukovich https://alexzh.com/ ADAPTIVE LAYOUTS VISUAL TESTING FOR EVERY SCREEN
2. Samsung Z Fold 5 Samsung Z Fold 7 Pixel 9 Fold
4. VISUAL TESTING
5. Reference images Current state of UI component/screen
6. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi
7. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi
8. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi
9. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi
10. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi
11. Misaligned components & spacing inconsistencies Incorrect colors for color modes & custom themes Broken layouts for different devices Localization problems Accessibility issues related to displaying content Unexpected rendering problems in speci fi c scenarios
12. Visual Testing Manual Testing
14. WHAT TO TEST WITH VISUAL TESTS
15. DO I NEED A DEVICE FOR VISUAL TESTING Device/Emulator JVM
16. RENDERING METHOD TYPE OF TESTS COMPOSE PREVIEW SCREENSHOT TESTING ANDROID TESTIFY DROPSHOTS ROBORAZZI PAPARAZZI SHOT INSTRUMENTATION DEVICE NATIVE RENDERING DEVICE NATIVE RENDERING DEVICE NATIVE RENDERING INSTRUMENTATION INSTRUMENTATION
17. RENDERING METHOD TYPE OF TESTS COMPOSE PREVIEW SCREENSHOT TESTING ANDROID TESTIFY DROPSHOTS ROBORAZZI PAPARAZZI SHOT INSTRUMENTATION LAYOUTLIB LOCAL DEVICE NATIVE RENDERING LAYOUTLIB DEVICE NATIVE RENDERING DEVICE NATIVE RENDERING INSTRUMENTATION LOCAL INSTRUMENTATION
18. RENDERING METHOD TYPE OF TESTS COMPOSE PREVIEW SCREENSHOT TESTING ANDROID TESTIFY DROPSHOTS ROBORAZZI PAPARAZZI SHOT INSTRUMENTATION LAYOUTLIB LOCAL DEVICE NATIVE RENDERING LAYOUTLIB ROBOLECTRIC NATIVE GRAPHICS DEVICE NATIVE RENDERING DEVICE NATIVE RENDERING INSTRUMENTATION LOCAL LOCAL INSTRUMENTATION
19. RENDERING METHOD CAN INTERACT WITH UI COMPOSE PREVIEW SCREENSHOT TESTING ANDROID TESTIFY DROPSHOTS ROBORAZZI PAPARAZZI SHOT YES LAYOUTLIB DEVICE NATIVE RENDERING LAYOUTLIB ROBOLECTRIC NATIVE GRAPHICS DEVICE NATIVE RENDERING DEVICE NATIVE RENDERING YES YES YES
20. SUPPORT JETPACK COMPOSE SUPPORT VIEW COMPOSE PREVIEW SCREENSHOT TESTING ANDROID TESTIFY DROPSHOTS ROBORAZZI PAPARAZZI SHOT YES YES YES YES YES YES YES YES YES YES YES
21. Find previews in the entire project Support all rendering methods Previews should be located in the “screenshotTest” source set Use “layoutlib” COMPOSE PREVIEW SCREENSHOT TESTING COMPOSE PREVIEW SCANNER
22. RECORD VS VERIFY
23. COMPOSE PREVIEW SCREENSHOT TESTING @Preview @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } }
24. ROBORAZZI @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
25. SHOT class MoodListItemScreenshotTest : ScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } compareScreenshot(composeTestRule) } }
26. Color Modes, Themes Font Sizes Locales Device Types
27. ROBORAZZI COMPOSE PREVIEW COLOR MODES @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(qualifiers = "night") fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
28. ROBORAZZI COMPOSE PREVIEW COLOR MODES @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(qualifiers = "night") fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
29. ROBORAZZI COMPOSE PREVIEW FONT SIZES @Preview(fontScale = 1.3f) @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(fontScale = 0.85f) fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
30. ROBORAZZI COMPOSE PREVIEW FONT SIZES @Preview(fontScale = 1.3f) @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(fontScale = 0.85f) fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
31. ROBORAZZI COMPOSE PREVIEW LOCALES @Preview(locale = "ar") @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(qualifiers = "ar") fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
32. ROBORAZZI COMPOSE PREVIEW LOCALES @Preview(locale = "ar") @Composable fun MoodListItemPreview() { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(qualifiers = "ar") fun moodItemList_happy_withActivityAndNote() { composeTestRule.setContent { AppTheme { MoodListItem( mood = Mood.HAPPY, time = LocalTime.of(13, 15), activities = "Study", note = "Super important note", onClick = {} ) } } composeTestRule .onRoot() .captureRoboImage() } }
33. ROBORAZZI DEVICE TYPES @RunWith(RobolectricTestRunner::class) @GraphicsMode(GraphicsMode.Mode.NATIVE) class MoodListItemScreenshotTest { @get:Rule val composeTestRule = createComposeRule() @Test @Config(qualifiers = "w1024dp-h600dp-land-xhdpi") fun manageCategories_tablet_landscape() { val uiState = ActionCategoriesScreenUiState(...) composeTestRule.setContent { AppTheme { ActionCategoriesAdaptiveScreenContent( uiState = uiState, onNavigateUp = {}, ... ) } } composeTestRule .onRoot() .captureRoboImage() } }
34. PARAMETERIZED TESTS class DateRangeSelectorScreenshotTest : ScreenshotTest { @get:Rule val composeTestRule = createEmptyComposeRule() @Test fun dateRangeSelector_selectedTodayDate() { val date = LocalDate.of(2025, 1, 15) val activityScenario = ActivityScenarioConfigurator.ForComposable() .setUiMode(UiMode.NIGHT) .setFontSize(FontSize.LARGE) .launchConfiguredActivity() .onActivity { it.setContent { val state = rememberDateRangeSelectorState( currentDate = date, selectedDate = date, daysCount = 7 ) AppTheme { DateRangeSelector(state = state) } } } activityScenario.waitForActivity() compareScreenshot( rule = composeTestRule, name = "dateRangeSelector_night_large" ) activityScenario.close() } }
35. PARAMETERIZED TESTS @RunWith(TestParameterInjector::class) class DateRangeSelectorScreenshotTest : ScreenshotTest { @get:Rule val composeTestRule = createEmptyComposeRule() @Test fun dateRangeSelector_selectedTodayDate( @TestParameter uiMode: UiMode, @TestParameter fontSize: FontSize ) { val date = LocalDate.of(2025, 1, 15) val activityScenario = ActivityScenarioConfigurator.ForComposable() .setUiMode(uiMode) .setFontSize(fontSize) .launchConfiguredActivity() .onActivity { it.setContent { val state = rememberDateRangeSelectorState( currentDate = date, selectedDate = date, daysCount = 7 ) AppTheme { DateRangeSelector(state = state) } } } activityScenario.waitForActivity() compareScreenshot( rule = composeTestRule, name = "dateRangeSelector_${uiMode.name.lowercase()}_${fontSize.name.lowercase()}" ) activityScenario.close() } }
36. BEST PRACTICES
37. WHERE TO STORE SCREENSHOTS Repository Git LFS External Services
38. WHAT TO TEST FIRST UI Components & Design System Core Feature Non-Core Features
39. HOW TO AVOID OVER-TESTING Focus on Important Scenarios Use Analytics Iterate Based on User Data
40. GENERATE SCREENSHOTS ON CI
41. HOW TO HANDLE FLAKINESS IN VISUAL TESTS Use Static Data Avoid Data Sources (Network, DB) Avoid tolerance when possible
42. Explore More Visual Testing @alex_zhukovich https://alexzh.com/