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. app main navigation Feature1ScreenVM Feature2ScreenVM organism organism organism organism organism organism Feature1Screen Feature2Screen molecule molecule molecule molecule molecule molecule FeatureTabletScreen
7. 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. APP COMPONENT
15. ADAPTIVE LAYOUTS
16. WindowInset WindowManager 9:30
17. 9:30 9:30 9:30 Compact Medium Expanded WINDOWSIZECLASS
18. 9:30 TWOPANE LAYOUT
19. NEW SCAFFOLD COMPONENTS: LISTDETAILS AND SUPPORTING SCAFFOLDS 9:30 9:30
20. NEW SCAFFOLD COMPONENTS: NAVIGATIONSUITESCAFFOLD 9:30 9:30 9:30 9:30
21. IMPLEMENTATION IN REAL LIFE APPLICATION
23. REWORK YOUR COMPONENT ARCHITECTURE
24. 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
25. :schedules :schedules :speakers :speakers
26. app shared shared-di models style schedules speakers partners networking infos event-list Android App Feature module Core modules feature screens ui main di schedules speakers partners … UI components Main navigation di
27. START WORKING ON THE LANDSCAPE MODE
28. START WORKING ON THE LANDSCAPE MODE ▸ Size variants
30. @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
31. @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
33. START WORKING ON THE LANDSCAPE MODE ▸ Size variants ▸ Adapts UI based on the window configuration
35. :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 )
36. :schedules:feature @Composable fun ScheduleGridVM( onFilterClicked: () !" Unit, onTalkClicked: (id: String) !" Unit, showFilterIcon: Boolean, modifier: Modifier = Modifier, isSmallSize: Boolean = false, viewModel: ScheduleGridViewModel = koinViewModel() )
37. 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 ) }
38. USE ADAPTIVE LAYOUTS
39. USE ADAPTIVE LAYOUTS ▸ NavigationSuiteScaffold
41. @Composable fun NavigationSuiteScaffold( navigationSuiteItems: NavigationSuiteScope.() !" Unit, modifier: Modifier = Modifier, layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault), navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(), containerColor: Color = MaterialTheme.colorScheme.background, contentColor: Color = contentColorFor(containerColor), content: @Composable () !" Unit = {}, )
42. @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
43. USE ADAPTIVE LAYOUTS ▸ NavigationSuiteScaffold ▸ Canonical layouts
46. @Composable fun SupportingPaneScaffold( supportingPane: @Composable ThreePaneScaffoldScope.() !" Unit, modifier: Modifier = Modifier, scaffoldState: ThreePaneScaffoldState = calculateSupportingPaneScaffoldState(), windowInsets: WindowInsets = SupportingPaneScaffoldDefaults.windowInsets, extraPane: (@Composable ThreePaneScaffoldScope.() !" Unit)? = null, mainPane: @Composable ThreePaneScaffoldScope.() !" Unit )
47. @Composable fun ScheduleGridAdaptive( onFilterClicked: () !" Unit, onTalkClicked: (id: String) !" Unit, showFilterIcon: Boolean, modifier: Modifier = Modifier, isSmallSize: Boolean = false, ) { SupportingPaneScaffold( 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
48. @Composable fun ListDetailPaneScaffold( listPane: @Composable ThreePaneScaffoldScope.() !" Unit, modifier: Modifier = Modifier, scaffoldState: ThreePaneScaffoldState = calculateListDetailPaneScaffoldState(), windowInsets: WindowInsets = ListDetailPaneScaffoldDefaults.windowInsets, extraPane: (@Composable ThreePaneScaffoldScope.() !" Unit)? = null, detailPane: @Composable ThreePaneScaffoldScope.() !" Unit )
49. @Composable fun SpeakerAdaptive( showBackInDetail: Boolean, onTalkClicked: (id: String) !" Unit, onLinkClicked: (url: String) !" Unit, modifier: Modifier = Modifier ) { val navigator = rememberListDetailPaneScaffoldNavigator() var selectedItem: String? by rememberSaveable { mutableStateOf(null) } ListDetailPaneScaffold( scaffoldState = navigator.scaffoldState, modifier = modifier, listPane = { !& list declaration }, detailPane = { !& detail declaration } ) } :speakers:feature
50. @Composable fun SpeakerAdaptive( showBackInDetail: Boolean, onTalkClicked: (id: String) !" Unit, onLinkClicked: (url: String) !" Unit, modifier: Modifier = Modifier ) { val navigator = rememberListDetailPaneScaffoldNavigator() var selectedItem: String? by rememberSaveable { mutableStateOf(null) } ListDetailPaneScaffold( scaffoldState = navigator.scaffoldState, modifier = modifier, listPane = { SpeakersListCompactVM( onSpeakerClicked = { selectedItem = it navigator.navigateTo(ListDetailPaneScaffoldRole.Detail) } ) }, detailPane = { !& detail implementation } ) } :speakers:feature
51. @Composable fun SpeakerAdaptive( showBackInDetail: Boolean, onTalkClicked: (id: String) !" Unit, onLinkClicked: (url: String) !" Unit, modifier: Modifier = Modifier ) { val navigator = rememberListDetailPaneScaffoldNavigator() var selectedItem: String? by rememberSaveable { mutableStateOf(null) } ListDetailPaneScaffold( scaffoldState = navigator.scaffoldState, modifier = modifier, listPane = { !& list implementation }, detailPane = { AnimatedPane(modifier = Modifier) { selectedItem!'let { item !" SpeakerDetailOrientableVM( speakerId = item, onTalkClicked = onTalkClicked, onLinkClicked = onLinkClicked, navigationIcon = if (showBackInDetail) { @Composable { Back { if (navigator.canNavigateBack()) { navigator.navigateBack() } } } } else null ) } } } ) } :speakers:feature
52. FRICTION POINTS
53. FRICTION POINTS ▸ Conflicts in Material Design specifications
55. 9:30 9:30 Compact Medium Expanded 9:30
56. 16dp 16dp
57. 16dp 16dp 16dp 16dp
59. FRICTION POINTS ▸ Conflict in Material Design specifications ▸ Floating Action Button
60. app shared shared-di models style schedules speakers partners networking infos event-list main schedules speakers partners … FloatingActionButton declaration Screen Level
61. app shared shared-di models style schedules speakers partners networking infos event-list main schedules speakers partners … FloatingActionButton declaration App Level
63. 9:30 ?
65. FRICTION POINTS ▸ Conflict in Material Design specifications ▸ Floating Action Button ▸ WindowSizeClass not available for sub-components
67. CONCLUSION
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 ▸ Conferences4Hall https://github.com/GerardPaligot/conferences4hall
70. WANT TO JOIN US?
71. THANK YOU! @GerardPaligot @Smoochibi