DevFest 2023 - Building adaptive layouts on Android

The Android development world has changed, and devices no longer fit into specific buckets like they used to - where mobile devices were phones or tablets. It is now possible for the same device to look like both, especially with the onset of foldable devices. We now have many other form factors like watches, TVs, and even car entertainment systems supporting Android. Now is the time to build smarter and increase productivity.

In this talk, we will go through how to support multiple form factors using powerful APIs introduced by Google. APIs like window size class and Jetpack Compose. We will examine how Jetpack Compose simplifies building adaptive layouts that improve user experience across Android devices.
From tablets to foldable devices to TVs, we will also talk about canonical patterns for supporting adaptive layouts and examples from the Accompanyist library that we can use to achieve them.

At the end of the talk, you will learn practical steps you can take to support adaptive layouts in your app and ultimately deliver a top-class experience for your users.

Links used in the presentation:

1. https://m3.material.io/foundations/layout/canonical-layouts/list-detail
2. https://developer.android.com/reference/androidx/window/layout/DisplayFeature
3. https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts
4. https://developer.android.com/jetpack/compose/layouts/adaptive
5. https://android-developers.googleblog.com/2023/05/optimizing-your-android-app-for-large-screens.html
6. https://developer.android.com/develop/ui/views/layout/twopane
7. https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views
8. https://developer.android.com/docs/quality-guidelines/large-screen-app-quality

Transcript

1. Building adaptive layouts on Android with Jetpack Compose. Segun Famisa Android GDE @segunfamisa
2. Introduction
3. Introduction • Historical context of Android form factors • Current state of Android form factors • Adaptive layouts • Canonical examples • How to implement
4. Some historical context
5. Supporting multiple screen sizes Most devices were either phones or tablets in the earlier Android days. Historical context
6. Historical Context Resource size qualifiers were used to determine whether a device was phone or tablet Source: stackoverflow.com Supporting multiple screen sizes
7. Historical Context Fragments were used for reusable UI components on various screen sizes Source: developer.android.com Supporting multiple screen sizes
8. Android devices today Multiple form factors and screen configurations
9. Android devices today …more form factors Nowadays, devices come in way more form factors than they used to, historically. Tablets Phones Watches Chromebook ..and Foldables
10. …even more screen configurations Tablet in Landscape Tablet in Portrait Tablet in split window mode Android devices today
11. …even more screen configurations Android devices today
12. How to handle all of these screen configurations?
13. Canonical layouts “large screens” Shift in how we think about device screen configurations
14. Large screens What are those? Same device can be run in different modes with different screen configurations. Devices no longer fall into specific buckets based on form factor. Many app designs leave out other configs that are not portrait phone, leaving out all the other possible configurations. So we just call them “large screen” devices.
15. Canonical layouts “canonical layouts”
16. Canonical Layouts What are those? Canonical layouts are tested and proven styles or paradigms of layouts for different kinds of contents in applications that help deliver great user experience.
17. Canonical Layouts List-Detail
18. Canonical Layouts List-Detail
19. Canonical Layouts Supporting pane
20. Canonical Layouts Supporting pane
21. Canonical Layouts Feed
22. How to build adaptive layouts
23. WindowSizeClass
24. WindowSizeClass What are those? • Categorizations of viewport available to the app. • Device-agnostic categorization • Buckets of available display space, and not device type or screen size.
25. WindowSizeClass - Width
26. WindowSizeClass - Height
27. most apps can build responsive UI using only the width class WindowSizeClass https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes#window_size_classes
28. Example - my playground app
29. // Create an app state to hold the window size class data class AppState(val windowWidthSizeClass: WindowWidthSizeClass)
30. // Derive window style from the window size class data class AppState(val windowWidthSizeClass: WindowWidthSizeClass) { val windowStyle: WindowStyle get() = when (windowWidthSizeClass) { WindowWidthSizeClass.Compact -> WindowStyle.OnePane WindowWidthSizeClass.Medium -> WindowStyle.TwoPane else -> WindowStyle.ThreePane } ... } value class WindowStyle(...)
31. // Calculate the window size
32. // Calculate the window size fun onCreate(...) { ... setContent { AppTheme { val windowSizeClass = calculateWindowSizeClass(this) App(appState = rememberAppState(windowSizeClass)) } } }
33. // Calculate the window size fun onCreate(...) { ... setContent { AppTheme { val windowSizeClass = calculateWindowSizeClass(this) App(appState = rememberAppState(windowSizeClass)) } } } implementation("androidx.compose.material3:material3-window-size-class:<version>")
34. // Use WindowStyle to determine number of columns
35. // Use WindowStyle to determine number of columns @Composable fun NewsArticles( newsItems: List<NewsUiItem>, windowStyle: WindowStyle, ) { LazyVerticalStaggeredGrid( columns = StaggeredGridCells.Fixed(windowStyle.columns), content = { items(newsItems) { NewsCard(...) } }, ... ) }
36. // Use WindowStyle to determine number of columns @Composable fun NewsArticles( newsItems: List<NewsUiItem>, windowStyle: WindowStyle, ) { LazyVerticalStaggeredGrid( columns = StaggeredGridCells.Fixed(windowStyle.columns), content = { items(newsItems) { NewsCard(...) } }, ... ) }
37. // Use WindowStyle to determine number of columns @Composable fun NewsArticles( newsItems: List<NewsUiItem>, windowStyle: WindowStyle, ) { LazyVerticalStaggeredGrid( columns = StaggeredGridCells.Fixed(windowStyle.columns), content = { items(newsItems) { NewsCard(...) } }, ... ) }
38. DisplayFeatures
39. DisplayFeature • Tells us more about the physical attributes of the display • Currently, the only implementation of the interface is `FoldingFeature` • FoldingFeature tells us: ◦ State/posture of the fold - flat or half-opened ◦ Whether or not there is a physically-visible hinge ◦ Folding direction/orientation
40. Accompanist `adaptive` APIs FoldAwareColumn TwoPane implementation("com.google.accompanist:accompanist-adaptive:<version>")
41. Accompanist `adaptive` APIs • TwoPane ◦ Allows us place contents in the form of two panes ◦ When there are hinges that separate the two displays, TwoPane avoids the screen separation when laying out the panes. • FoldAwareColumn ◦ As the name implies, simplified column that is aware of the folding properties ◦ It lays out the children of the column such that any hinge separations are avoided
42. Example - adaptive APIs Foldable - Flat Foldable - Half open
43. // MainActivity.kt ... val displayFeatures = rememberDisplayFeatures(this)
44. // MainActivity.kt ... val displayFeatures = rememberDisplayFeatures(this) val defaultStrategy = VerticalTwoPaneStrategy(splitFraction = 0.5f) TwoPane( first = { GreenBox() }, second = { RedBox() }, strategy = displayFeatures.filterIsInstance<FoldingFeature>() .firstOrNull() ?.let { if (it.state == FoldingFeature.State.FLAT) { VerticalTwoPaneStrategy(splitFraction = 0.25f) } else { VerticalTwoPaneStrategy(splitFraction = 0.5f) } } ?: defaultStrategy, displayFeatures = displayFeatures )
45. // MainActivity.kt ... val displayFeatures = rememberDisplayFeatures(this) val defaultStrategy = VerticalTwoPaneStrategy(splitFraction = 0.5f) TwoPane( first = { GreenBox() }, second = { RedBox() }, strategy = displayFeatures.filterIsInstance<FoldingFeature>() .firstOrNull() ?.let { if (it.state == FoldingFeature.State.FLAT) { VerticalTwoPaneStrategy(splitFraction = 0.25f) } else { VerticalTwoPaneStrategy(splitFraction = 0.5f) } } ?: defaultStrategy, displayFeatures = displayFeatures )
46. // MainActivity.kt ... val displayFeatures = rememberDisplayFeatures(this) val defaultStrategy = VerticalTwoPaneStrategy(splitFraction = 0.5f) TwoPane( first = { GreenBox() }, second = { RedBox() }, strategy = displayFeatures.filterIsInstance<FoldingFeature>() .firstOrNull() ?.let { if (it.state == FoldingFeature.State.FLAT) { VerticalTwoPaneStrategy(splitFraction = 0.25f) } else { VerticalTwoPaneStrategy(splitFraction = 0.5f) } } ?: defaultStrategy, displayFeatures = displayFeatures )
47. General tips
48. General tips • Avoid device type booleans e.g “is_tablet” • Prepare for dynamic aspect ratios • Adopt one of the canonical layouts as applicable to your app • Write compose unit tests for the screen configurations • https://android-developers.googleblog.com/2023/05/optimizing-your-android-app-for-lar ge-screens.html for more
49. What about View system? Yes, all this is also possible, but the APIs is not as simple to use as the compose equivalent. Useful APIs and resources are: • https://developer.android.com/develop/ui/views/layout/twopane • https://developer.android.com/develop/ui/views/layout/responsive-adaptive -design-with-views
50. Evaluating large screen readiness
51. Evaluating large screen readiness Tier 3 (Basic) - “Large screen ready” Tier 2 (Better) - “Large screen optimized” Tier 1 (Best) - “Large screen differentiated” Users can complete critical flows but with a less than optimal user experience. Your app runs full screen (or full window in multi-window mode), but app layout might not be ideal. The app is not letterboxed; it does not run in compatibility mode. The app provides basic support for external input devices, including keyboard, mouse, and trackpad. Your app implements layout optimizations for all screen sizes and device configurations along with enhanced support for external input devices. Your app provides a user experience designed for tablets, foldables, and ChromeOS devices. Where applicable, the app supports multitasking, foldable postures, drag and drop, and stylus input. https://developer.android.com/docs/quality-guidelines/large-screen-app-quality
52. Resources • https://m3.material.io/foundations/layout/canonical-layouts/list-detail • https://developer.android.com/reference/androidx/window/layout/DisplayFeature • https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts • https://developer.android.com/jetpack/compose/layouts/adaptive
53. Thank You! Segun Famisa Android GDE @segunfamisa