Why is adaptive layout a nightmare?

Dive into the captivating realm of Android UI development in this session where we will share in-depth expertise on designing versatile user interfaces. Together, we will explore the complex challenges of organizing and building UI components, providing unique insights into crafting seamless user experiences across a variety of devices such as phones, foldables, and tablets.

While Google advocates for the use of adaptive layout, we will unveil the often underestimated nuances, shed practical light on overcoming obstacles you’ll meet down the road and help you create truly adaptive Android applications.

Transcript

1. @GerardPaligot @Smoochibi WHY IS ADAPTIVE LAYOUT A NIGHTMARE?
4. WHAT’S THE ISSUE?
5. app main navigation Feature1ScreenVM Feature2ScreenVM organism comp. organism comp. organism comp. organism comp. organism comp. organism comp. Feature1Screen Feature2Screen molecule comp. molecule comp. molecule comp. molecule comp. molecule comp. molecule comp.
6. organism organism organism organism organism organism molecule molecule molecule molecule molecule molecule FeatureTabletScreen app main navigation Feature1ScreenVM Feature2ScreenVM Feature1Screen Feature2Screen 9:30
7. 9:30 app main navigation Feature1ScreenVM Feature2ScreenVM organism organism organism organism organism organism Feature1Screen Feature2Screen molecule molecule molecule molecule molecule molecule NavigationLayout
8. STATE OF THE ART
9. THE COMPONENT LEVELS
10. UI COMPONENT
11. SCREEN COMPONENT
12. APP COMPONENT
13. APP COMPONENT
14. ADAPTIVE LAYOUTS
15. WindowInset WindowManager 9:30
16. 9:30 9:30 9:30 Compact Medium Expanded WINDOWSIZECLASS
17. 9:30 TWOPANE LAYOUT
18. NEW SCAFFOLD COMPONENTS: LISTDETAILS AND SUPPORTING SCAFFOLDS 9:30 9:30
19. NEW SCAFFOLD COMPONENTS: NAVIGATIONSUITESCAFFOLD 9:30 9:30 9:30 9:30
20. IMPLEMENTATION IN REAL LIFE APPLICATION
22. REWORK YOUR COMPONENT ARCHITECTURE
23. app shared shared-di models style schedules speakers partners networking infos event-list Android App Feature module Core modules feature ui di main Main navigation di
24. :schedules :schedules :speakers :speakers
25. app shared shared-di models style schedules speakers partners networking infos event-list Android App Feature module Core modules feature panes ui main di schedules speakers partners … UI components Main navigation di
26. START WORKING ON THE LANDSCAPE MODE
27. START WORKING ON THE LANDSCAPE MODE ▸ Size variants
29. @Composable fun SmallScheduleCard( title: String, speakersUrls: ImmutableList<String>, speakersLabel: String, contentDescription: String?, onClick: () !" Unit, modifier: Modifier = Modifier, isFavorite: Boolean = false, colors: ScheduleCardColors = ScheduleCardDefaults.cardColors(), style: TextStyle = ScheduleCardDefaults.smallTextStyle, shape: Shape = ScheduleCardDefaults.smallShape, onFavoriteClick: (() !" Unit)? = null, bottomBar: (@Composable FlowRowScope.() !" Unit)? = null ) :styles:schedules
30. @Composable fun MediumScheduleCard( title: String, speakersUrls: ImmutableList<String>, speakersLabel: String, contentDescription: String?, onClick: () !" Unit, modifier: Modifier = Modifier, isFavorite: Boolean = false, colors: ScheduleCardColors = ScheduleCardDefaults.cardColors(), style: TextStyle = ScheduleCardDefaults.mediumTextStyle, shape: Shape = ScheduleCardDefaults.mediumShape, onFavoriteClick: (() !" Unit)? = null, topBar: (@Composable RowScope.() !" Unit)? = null, bottomBar: (@Composable RowScope.() !" Unit)? = null ) :styles:schedules
32. START WORKING ON THE LANDSCAPE MODE ▸ Size variants ▸ Adapts UI based on the window configuration
34. :schedules:screens @Composable fun AgendaFiltersCompactVM( filtersUi: FiltersUi, onFavoriteClick: (selected: Boolean) !" Unit, onCategoryClick: (categoryUi: CategoryUi, selected: Boolean) !" Unit, onFormatClick: (formatUi: FormatUi, selected: Boolean) !" Unit, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.background, navigationIcon: @Composable (AppBarIcons.() !" Unit)? = null )
35. :schedules:feature @Composable fun ScheduleGridVM( onFilterClicked: () !" Unit, onTalkClicked: (id: String) !" Unit, showFilterIcon: Boolean, modifier: Modifier = Modifier, isSmallSize: Boolean = false, viewModel: ScheduleGridViewModel = koinViewModel() )
36. if (configuration.orientation !# Configuration.ORIENTATION_LANDSCAPE) { Row { ScheduleGridVM( !$ parameters !% modifier = Modifier.weight(1f), showFilterIcon = false, onFilterClicked = { !$ never triggered !% } ) AgendaFiltersCompactVM( !$ parameters !% modifier = Modifier.weight(1f), ) } } else { ScheduleGridVM( !$ parameters !% showFilterIcon = true, onFilterClicked = onFilterClicked !& will open a new screen ) }
37. USE ADAPTIVE LAYOUTS
38. USE ADAPTIVE LAYOUTS ▸ NavigationSuiteScaffold
40. @Composable fun NavigationSuiteScaffold( navigationSuiteItems: NavigationSuiteScope.() !" Unit, modifier: Modifier = Modifier, layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault), navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(), containerColor: Color = NavigationSuiteScaffoldDefaults.containerColor, contentColor: Color = NavigationSuiteScaffoldDefaults.contentColor, content: @Composable () !" Unit = {}, )
41. @Composable fun AppNavigation( routeSelected: String, modifier: Modifier = Modifier, navController: NavHostController = rememberNavController(), ) { NavigationSuiteScaffold( modifier = modifier, navigationSuiteItems = { navActions.forEach { action !" val selected = action.route !# routeSelected item( selected = selected, icon = { Icon( imageVector = if (selected) action.iconSelected else action.icon, contentDescription = action.contentDescription ) }, onClick = { !& handle navigation } ) } } ) { NavHost( navController = navController, startDestination = "agenda", builder = { !& composables } ) } } :main:navigation
42. USE ADAPTIVE LAYOUTS ▸ NavigationSuiteScaffold ▸ Canonical layouts
45. @Composable fun SupportingPaneScaffold( directive: PaneScaffoldDirective, value: ThreePaneScaffoldValue, mainPane: @Composable ThreePaneScaffoldScope.() !" Unit, supportingPane: @Composable ThreePaneScaffoldScope.() !" Unit, modifier: Modifier = Modifier, extraPane: (@Composable ThreePaneScaffoldScope.() !" Unit)? = null, )
46. @Composable fun ScheduleGridAdaptive( onFilterClicked: () !" Unit, onTalkClicked: (id: String) !" Unit, showFilterIcon: Boolean, modifier: Modifier = Modifier, isSmallSize: Boolean = false, ) { val navigator = rememberSupportingPaneScaffoldNavigator() SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, modifier = modifier, mainPane = { ScheduleGridVM( onFilterClicked = onFilterClicked, onTalkClicked = onTalkClicked, showFilterIcon = showFilterIcon, isSmallSize = isSmallSize ) }, supportingPane = { AgendaFiltersCompactVM( containerColor = if (showFilterIcon) MaterialTheme.colorScheme.background else MaterialTheme.colorScheme.surfaceContainerHigh ) } ) } :schedules:feature
47. @Composable fun ListDetailPaneScaffold( directive: PaneScaffoldDirective, value: ThreePaneScaffoldValue, listPane: @Composable ThreePaneScaffoldScope.() !" Unit, detailPane: @Composable ThreePaneScaffoldScope.() !" Unit, modifier: Modifier = Modifier, extraPane: (@Composable ThreePaneScaffoldScope.() !" Unit)? = null, )
48. @Composable fun SpeakerAdaptive( showBackInDetail: Boolean, onTalkClicked: (id: String) !" Unit, onLinkClicked: (url: String) !" Unit, modifier: Modifier = Modifier, state: LazyGridState = rememberLazyGridState() ) { val navigator = rememberListDetailPaneScaffoldNavigator<String>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, modifier = modifier, listPane = { !& list declaration }, detailPane = { !& detail declaration } ) } :speakers:feature
49. @Composable fun SpeakerAdaptive( showBackInDetail: Boolean, onTalkClicked: (id: String) !" Unit, onLinkClicked: (url: String) !" Unit, modifier: Modifier = Modifier, state: LazyGridState = rememberLazyGridState() ) { val navigator = rememberListDetailPaneScaffoldNavigator<String>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, modifier = modifier, listPane = { AnimatedPane { SpeakersGridVM( onSpeakerClicked = { navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, content = it) }, state = state ) } }, detailPane = { !& detail declaration } ) } :speakers:feature
50. @Composable fun SpeakerAdaptive( !$ parameters !% ) { val navigator = rememberListDetailPaneScaffoldNavigator<String>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, modifier = modifier, listPane = { !& list declaration }, detailPane = { navigator.currentDestination!'content!'let { AnimatedPane { SpeakerDetailVM( speakerId = it, onTalkClicked = onTalkClicked, onLinkClicked = onLinkClicked, navigationIcon = if (showBackInDetail) { @Composable { Back { if (navigator.canNavigateBack()) { navigator.navigateBack() } } } } else { null } ) } } } :speakers:feature
51. FRICTION POINTS
52. FRICTION POINTS ▸ Conflicts in Material Design specifications
54. 9:30 9:30 Compact Medium Expanded 9:30
55. 16dp 16dp
56. 16dp 16dp 16dp 16dp
58. FRICTION POINTS ▸ Conflict in Material Design specifications ▸ Floating Action Button
59. app shared shared-di models style schedules speakers partners networking infos event-list main schedules speakers partners … FloatingActionButton declaration Screen Level
60. app shared shared-di models style schedules speakers partners networking infos event-list main schedules speakers partners … FloatingActionButton declaration App Level
62. 9:30 ?
64. FRICTION POINTS ▸ Conflict in Material Design specifications ▸ Floating Action Button ▸ WindowSizeClass not available for sub-components
66. CONCLUSION
67. First presentation February 22th 1.0.0 A lpha 07 February 21th 1.0.0 Beta 01 M ay 1st 1.0.0 rc 01 A ugust 21th 1.0.0 Septem ber 4th
69. REFERENCES ▸ Material 3 - Understanding layout https://m3.material.io/foundations/layout/ understanding-layout/overview ▸ Material 3 - Applying layout https://m3.material.io/foundations/layout/ applying-layout/window-size-classes ▸ Material 3 - Canonical layouts https://m3.material.io/foundations/layout/ canonical-layouts/overview ▸ Large screens gallery https://developer.android.com/large-screens/gallery/ ▸ Now in Android https://github.com/android/nowinandroid ▸ Confily https://github.com/GerardPaligot/confily
70. THANK YOU! @GerardPaligot @Smoochibi