What's new in Adaptive Android development

2025년 07월 26일 (토) Google I/O Extended Incheon 2025 발표자료입니다.
"What's new in Adaptive Android development"
https://www.ticketa.co/events/7

Transcript

1. What’s new in Adaptive Android development Sungyong An NAVER WEBTOON / Android GDE
2. Sungyong An NAVER WEBTOON GDE @fornewid Link: h tt ps://speakerdeck.com/fornewid
3. Adaptive App Recap Link: h tt ps://developer.android.com/adaptive-apps
4. Google I/O Extended 25 Adaptive Apps? Link: h tt ps://developer.android.com/develop/ui/compose/build-adaptive-apps ׮নೠ ചݶ ௼ӝী ߈਽ೞৈ, ୭੸ചػ ࢎਊ੗ ҃೷ਸ ઁҕೞח জ ৘द) ോ؀ಪীࢲח bottom navigation bar ಴द ؀ഋ ചݶীࢲח navigation rail ಴द
5. Google I/O Extended 25 • Multi-window mode • Split-screen • Picture-in-picture • Desktop windowing Why build adaptive UIs? Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -multi-window-mode
6. Google I/O Extended 25 Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -desktop-windowing Desktop windowing
7. Google I/O Extended 25 Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -desktop-windowing Freeform windows
8. Minimum window size 386dp x 352dp
9. Google I/O Extended 25 • Multi-window mode • Form Factors • Phone, Foldable, Tablet, Desktop, TV • Car, XR Why build adaptive UIs? Link: h tt ps://developer.android.com/develop#devices
10. Google I/O Extended 25 3x usage 3x usage time for tablet and phone users vs phone-only users. Aggregated across 6 of the major streaming apps in the US.
11. Google I/O Extended 25 Link: h tt ps://developer.android.com/training/cars/pla tf orms/automotive-os/compatibility-mode Compatibility mode for Car Ready Apps Car
12. Google I/O Extended 25 Link: h tt ps://developer.android.com/develop/xr XR Most Android apps are compatible
13. Google I/O Extended 25 including foldables, tablets, Chromebooks, and mobile-app capable cars 500m+ devices
15. Google I/O Extended 25 • Multi-window mode • Form Factors • Google Play • Large screen app quality guidelines • TIER 3: ready • TIER 2: optimized • TIER 1: differentiated Why build adaptive UIs? Link: h tt ps://developer.android.com/docs/quality-guidelines/large-screen-app-quality
16. Google I/O Extended 25 • Multi-window mode • Form Factors • Google Play • Android 16 • Ignore orientation, resizability, and aspect ratio restrictions • Connected displays Why build adaptive UIs? Link: h tt ps://developer.android.com/about/versions/16/behavior-changes-16#adaptive-layouts
17. Phone
18. Tablet
19. New form-factors Multiple devices What’s next
20. Google I/O Extended 25 Adaptive Apps “Build Once, Run Everywhere”
21. Android View Link: h tt ps://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views
22. Google I/O Extended 25 Responsive design Link: h tt ps://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views • Responsive width and height • match_parent • wrap_content • layout_weight • ConstraintLayout View
23. Google I/O Extended 25 Link: h tt ps://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8 Responsive design vs Adaptive design Responsive design (߈਽ഋ জ) • ࢎਊ оמೠ ҕрী ݏ୾ ٣੗ੋ ਃࣗ੄ ߓ஖ܳ ઑ੿ೠ׮ Adaptive design (੸਽ഋ জ) • ࢎਊ оמೠ ҕрী ݏ୾ ੸੺ೠ ۨ੉ইਓਸ ࢶఖೠ׮
24. Google I/O Extended 25 Adaptive design Link: h tt ps://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views • Alternative layout resources res/layout/ res/layout-sw600dp/ res/layout-w600dp/ View
25. Google I/O Extended 25 Adaptive design Link: h tt ps://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views • Alternative layout resources • Smallest width qualifier • ӝӝ੄ അ੤ ߑೱী ҙ҅হ੉ زੌ res/layout-sw600dp/ • Available width qualifier • ӝӝ ߑೱী ٮۄ ߸҃ؼ ࣻ ੓਺ res/layout-w600dp/ w sw View
26. Google I/O Extended 25 Adaptive design Link: h tt ps://developer.android.com/develop/ui/views/layout/twopane • SlidingPaneLayout • View, Fragment • ௾ ചݶীࢲח ݾ۾ ହҗ ࣁࠗ੿ࠁ ହ੉ աۆ൤ ಴द • (ց࠺о ୽࠙ೞ૑ ঋ਷) ੘਷ ചݶীࢲח ف ହ੉ Ҁ୛ࢲ ಴द View
27. <androidx.slidingpanelayout.widget.SlidingPaneLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="280dp" android:layout_height="match_parent" android:layout_gravity="start" /> <androidx.fragment.app.FragmentContainerView android:id="@+id/nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="300dp" android:layout_height="match_parent" android:layout_weight="1" app:defaultNavHost="true" app:navGraph="@navigation/item_navigation" /> </androidx.slidingpanelayout.widget.SlidingPaneLayout>
28. Google I/O Extended 25 Adaptive design • Window Size Classes • Width Breakpoints • Compact: w < 600dp • Medium: 600dp ≤ w < 840dp • Expanded: 840dp ≤ w Link: h tt ps://developer.android.com/develop/ui/views/layout/use-window-size-classes View
29. Google I/O Extended 25 Adaptive design • Window Size Classes • Height Breakpoints • Compact: h < 480dp • Medium: 480dp ≤ h < 900dp • Expanded: h ≥ 900dp Link: h tt ps://developer.android.com/develop/ui/views/layout/use-window-size-classes View
30. private fun computeWindowSizeClasses() { val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this) val width = metrics.bounds.width() val height = metrics.bounds.height() val density = resources.displayMetrics.density val windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass // COMPACT, MEDIUM, or EXPANDED val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass // Use widthWindowSizeClass and heightWindowSizeClass. }
31. class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val container: ViewGroup = binding.container container.addView(object : View(this) { override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) computeWindowSizeClasses() } }) computeWindowSizeClasses() } }
32. Google I/O Extended 25 Adaptive design Link: h tt ps://developer.android.com/develop/ui/views/layout/activity-embedding • Activity embedding • Activities • Android 12L+ • Jetpack WindowManager View
33. AndroidManifest.xml <manifest> <application> <property android:name="android.window.PROPERTY_ACTIVITY_EMBEDDING_SPLITS_ENABLED" android:value="true" /> </application> </manifest>
34. res/xml/split_config.xml <resources> <SplitPairRule window:splitRatio="0.3" window:splitMinWidthDp="600" window:finishPrimaryWithSecondary="adjacent" window:finishSecondaryWithPrimary="always"> <SplitPairFilter window:primaryActivityName=".ListActivity" window:secondaryActivityName=".DetailActivity"/> </SplitPairRule> ...
35. SplitInitializer.kt (+ androidx.startup) class SplitInitializer : Initializer<RuleController> { override fun create(context: Context): RuleController { return RuleController.getInstance(context).apply { setRules(RuleController.parseRules(context, R.xml.split_config)) } } ... }
36. Jetpack Compose Link: h tt ps://developer.android.com/develop/ui/compose/build-adaptive-apps
37. Google I/O Extended 25 Adaptive design • BoxWithConstraints • minWidth • maxWidth • minHeight • maxHeight Compose @Composable fun AdaptivePane() { BoxWithConstraints { if (maxWidth < 400.dp) { OnePane(/* ... */) } else { TwoPane(/* ... */) } } }
38. Google I/O Extended 25 Adaptive design • Window Size Classes • Width/Height Breakpoints Compose Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes
39. @Composable fun AdaptivePane( windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass ) { when (windowSizeClass.widthSizeClass) { WindowWidthSizeClass.Compact -> ... WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> ... } }
40. @Composable fun AdaptivePane( windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass ) { when (windowSizeClass.widthSizeClass) { // Deprecated WindowWidthSizeClass.Compact -> ... WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> ... } } Deprecated
41. val windowDpSize = with(LocalDensity.current) { LocalWindowInfo.current.containerSize.toSize().toDpSize() } val windowSizeClass = WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass( windowDpSize.width.value, windowDpSize.height.value)
42. val windowDpSize = with(LocalDensity.current) { LocalWindowInfo.current.containerSize.toSize().toDpSize() } val windowSizeClass = WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass( windowDpSize.width.value, windowDpSize.height.value) if (windowSizeClass.isWidthAtLeastBreakpoint( WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND)) { // 840dp => Expanded width } else if (windowSizeClass.isWidthAtLeastBreakpoint( WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)) { // 600dp => Medium width } else { // Compact width }
43. Google I/O Extended 25 Adaptive design • Compose Material3 Adaptive • Navigation Suite • NavigationSuiteScaffold • NavigationBar • NavigationRail Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/build-adaptive-navigation
44. Google I/O Extended 25 Adaptive design • Compose Material3 Adaptive • Navigation Suite • NavigationSuiteScaffold • Layout • ListDetailPaneScaffold Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/list-detail List Detail Detail
45. ListDetailPaneScaffold( ... listPane = { AnimatedPane { ... } }, detailPane = { AnimatedPane { ... } }, )
46. Google I/O Extended 25 Adaptive design • Compose Material3 Adaptive • Navigation Suite • NavigationSuiteScaffold • Layout • ListDetailPaneScaffold • SupportingPaneScaffold Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/build-a-suppo rt ing-pane-layout Main Suppo rt ing
47. SupportingPaneScaffold( ... mainPane = { AnimatedPane { ... } }, supportingPane = { AnimatedPane { ... } }, )
48. NavigationSuiteSca ff old ListDetailPaneSca ff old Suppo rt ingPaneSca ff old Adaptive library dependency graph Blog: Jetpack Compose APIs for building adaptive layouts using Material guidance now stable
49. Canonical Layouts Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/canonical-layouts Feed List-detail Supporting pane
50. Use the Window Size Classes Opinionated breakpoints to guide your layout decisions. Canonical Layouts Proven, versatile layouts that provide an optimal user experience on different form factors. Adaptive apps Don’t reinvent the wheel! Leverage Jetpack libraries like Compose Material Adaptive.
51. What’s new 2025 Link: h tt ps://android-developers.googleblog.com/2025/05/adaptiveapps-io25.html
52. Google I/O Extended 25 Window Size Classes Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes • Width Breakpoints • Large • Extra Large Window 1.5
53. val windowDpSize = with(LocalDensity.current) { LocalWindowInfo.current.containerSize.toSize().toDpSize() } val windowSizeClass = WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass( windowDpSize.width.value, windowDpSize.height.value) val panes = if (windowSizeClass.isWidthAtLeastBreakpoint( WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND)) { 2 } // 840dp else { 1 }
54. val windowDpSize = with(LocalDensity.current) { LocalWindowInfo.current.containerSize.toSize().toDpSize() } val windowSizeClass = WindowSizeClass.BREAKPOINTS_V2.computeWindowSizeClass( windowDpSize.width.value, windowDpSize.height.value) val panes = if (windowSizeClass.isWidthAtLeastBreakpoint( WindowSizeClass.WIDTH_DP_EXTRA_LARGE_LOWER_BOUND)) { 3 } // 1600dp else if (windowSizeClass.isWidthAtLeastBreakpoint( WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND)) { 2 } // 840dp else { 1 }
55. Google I/O Extended 25 Compose Material3 Adaptive Link: androidx/compose/material3/adaptive/layout/PaneExpansionState • Pane expansion & resizing • PaneExpansionState Adaptive 1.1
56. ListDetailPaneScaffold( ... // Drag handle/pane expansion code paneExpansionState = rememberPaneExpansionState(navigator.scaffoldValue), paneExpansionDragHandle = { state -> val interactionSource = remember { MutableInteractionSource() } VerticalDragHandle( modifier = Modifier.paneExpansionDraggable( state, LocalMinimumInteractiveComponentSize.current, interactionSource ), interactionSource = interactionSource ) } ) Example
57. Google I/O Extended 25 Compose Material3 Adaptive • Pane adaptation strategy • Levitate • floating or docked Link: h tt ps://m3.material.io/foundations/layout/applying-layout/pane-layouts Adaptive 1.2
58. val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>( // Levitate into dialog window on smaller size classes adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies( extraPaneAdaptStrategy = AdaptStrategy.Levitate( strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly, alignment = Alignment.Center, scrim = Scrim(), ) ) )
59. val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>( // Levitate into dialog window on smaller size classes adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies( extraPaneAdaptStrategy = AdaptStrategy.Levitate( strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly, alignment = Alignment.Center, scrim = Scrim(), ) ) )
60. val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>( // Levitate into bottom sheet on smaller size classes adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies( extraPaneAdaptStrategy = AdaptStrategy.Levitate( strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly, alignment = Alignment.BottomCenter, scrim = null, ) ) )
61. val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>( // Levitate into bottom sheet on smaller size classes adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies( extraPaneAdaptStrategy = AdaptStrategy.Levitate( strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly, alignment = Alignment.BottomCenter, scrim = null, ) ) ) ListDetailPaneScaffold( extraPane = { AnimatedPane( modifier = Modifier.dragToResize( rememberDragToResizeState(dockedEdge = DockedEdge.Bottom)
62. Google I/O Extended 25 Compose Material3 Adaptive • Pane adaptation strategy! • Levitate • Reflow Link: h tt ps://m3.material.io/foundations/layout/applying-layout/pane-layouts Adaptive 1.2
63. val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>( // Reflow below Detail pane on smaller size classes adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies( extraPaneAdaptStrategy = AdaptStrategy.Reflow( targetPane = ListDetailPaneScaffoldRole.Detail ) ) ) ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, ...
64. Navigation 3 Link: goo.gle/nav3
65. Google I/O Extended 25 Navigation 3 • Designed to work with Compose • full control of the back stack • custom navigation behavior • smaller components Link: goo.gle/nav3 Alpha
66. Home List Detail Phone
67. Home List Detail Home List Detail Phone
68. Home List Detail Tablet
69. Home Home List Detail ? Tablet
70. Home Home List/ Detail Navigation Tablet
71. Home Home List/ Detail Row { List Detail } Navigation Tablet
72. Home Home List Detail Tablet Navigation 3
73. Home Home List Detail List Detail Tablet Navigation 3
74. Navigation NavHost(...) { composable<Route.ChatsList> { ChatList(...) } composable<Route.ChatThread> { ChatScreen(...) } ) Navigation 3 NavDisplay(...) { backStackKey -> when (backStackKey) { is Pane.ChatsList -> NavEntry( key = backStackKey, ) { ChatList(...) } is Pane.ChatThread -> NavEntry( key = backStackKey, ) { ChatScreen(...) } } )
75. Link: h tt ps://github.com/android/socialite/pull/175 Navigation 3 NavDisplay(...) { backStackKey -> when (backStackKey) { is Pane.ChatsList -> NavEntry( key = backStackKey, ) { ChatList(...) } is Pane.ChatThread -> NavEntry( key = backStackKey, ) { ChatScreen(...) } } )
76. Link: h tt ps://github.com/android/socialite/pull/175 Navigation 3 NavDisplay(...) { backStackKey -> when (backStackKey) { is Pane.ChatsList -> NavEntry( key = backStackKey, metadata = ListDetailSceneStrategy.listPane(), ) { ChatList(...) } is Pane.ChatThread -> NavEntry( key = backStackKey, metadata = ListDetailSceneStrategy.detailPane(), ) { ChatScreen(...) } } )
77. Link: h tt ps://github.com/android/socialite/pull/175 Navigation 3 NavDisplay(...) { backStackKey -> when (backStackKey) { is Pane.ChatsList -> NavEntry( key = backStackKey, metadata = ListDetailSceneStrategy.listPane(), ) { ChatList(...) } is Pane.ChatThread -> NavEntry( key = backStackKey, metadata = ListDetailSceneStrategy.detailPane(), ) { ChatScreen(...) } } )
78. Link: h tt ps://github.com/android/socialite/pull/175
79. Multi-instance Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -multi-window-mode#multi-instance
80. App UI Custom affordance with Intent flags. System UI Window controls, taskbar or launcher. New! Natural drag and drop interaction.
81. <activity android:name=".MainActivity" android:exported="true" android:label="@string/app_name" android:launchMode="singleInstancePerTask" android:resizeableActivity="true"> <property android:name="android.window.PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI" android:value="true"/> ... </activity>
82. <activity android:name=".MainActivity" android:exported="true" android:label="@string/app_name" android:launchMode="singleInstancePerTask" android:resizeableActivity="true"> <property android:name="android.window.PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI" android:value="true"/> ... </activity>
83. fun startActivityInNewInstance(activity: Activity) { val intent = Intent.makeMainActivity(activity.componentName) intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) intent.addFlags(Intent.FLAG_ACTIVITY_MULTIPLE_TASK) activity.startActivity(intent) }
84. fun startActivityInNewInstance(activity: Activity) { val intent = Intent.makeMainActivity(activity.componentName) intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) intent.addFlags(Intent.FLAG_ACTIVITY_MULTIPLE_TASK) activity.startActivity(intent) }
86. <activity android:name=".MainActivity" android:exported="true" android:label="@string/app_name" android:launchMode="singleInstancePerTask" android:resizeableActivity="true"> <property android:name="android.window.PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI" android:value="true"/> ... </activity>
89. modifier = Modifier .dragAndDropSource { _ -> DragAndDropTransferData( clipData = multiInstanceClipData(activity), flags = View.DRAG_FLAG_GLOBAL_SAME_APPLICATION or View.DRAG_FLAG_START_INTENT_SENDER_ON_UNHANDLED_DRAG ) }
90. modifier = Modifier .dragAndDropSource { _ -> DragAndDropTransferData( clipData = multiInstanceClipData(activity), flags = View.DRAG_FLAG_GLOBAL_SAME_APPLICATION or View.DRAG_FLAG_START_INTENT_SENDER_ON_UNHANDLED_DRAG ) }
91. modifier = Modifier .dragAndDropSource { _ -> DragAndDropTransferData( clipData = multiInstanceClipData(activity), flags = View.DRAG_FLAG_GLOBAL_SAME_APPLICATION or View.DRAG_FLAG_START_INTENT_SENDER_ON_UNHANDLED_DRAG ) }
92. fun multiInstanceClipData(activity: Activity): ClipData { val intent = Intent.makeMainActivity(activity.componentName) val pendingIntent = PendingIntent.getActivity( activity, 0, intent, PendingIntent.FLAG_IMMUTABLE ) return ClipData( "NewInstance", arrayOf(ClipDescription.MIMETYPE_TEXT_INTENT), ClipData.Item.Builder().setIntentSender(pendingIntent.intentSender).build() ) }
93. Bonus: Custom headers Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -desktop-windowing#customizable_header_insets
94. CaptionBar
95. setContent { window?.insetsController?.setSystemBarsAppearance( APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND, APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND ) // Your content }
96. Column { if (WindowInsets.isCaptionBarVisible) { Row(modifier = Modifier .windowInsetsTopHeight(WindowInsets.captionBar) .fillMaxWidth() .background(if (isSystemInDarkTheme()) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.secondaryContainer) ) { TabRow( selectedTabIndex = selectedTabIndex, modifier = Modifier.windowInsetsPadding(WindowInsets.captionBar.only(Horizontal)) ) { // Draw your tabs } } }
97. Column { if (WindowInsets.isCaptionBarVisible) { Row(modifier = Modifier .windowInsetsTopHeight(WindowInsets.captionBar) .fillMaxWidth() .background(if (isSystemInDarkTheme()) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.secondaryContainer) ) { TabRow( selectedTabIndex = selectedTabIndex, modifier = Modifier.windowInsetsPadding(WindowInsets.captionBar.only(Horizontal)) ) { // Draw your tabs } } }
98. Column { if (WindowInsets.isCaptionBarVisible) { Row(modifier = Modifier .windowInsetsTopHeight(WindowInsets.captionBar) .fillMaxWidth() .background(if (isSystemInDarkTheme()) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.secondaryContainer) ) { TabRow( selectedTabIndex = selectedTabIndex, modifier = Modifier.windowInsetsPadding(WindowInsets.captionBar.only(Horizontal)) ) { // Draw your tabs } } }
99. Column { if (WindowInsets.isCaptionBarVisible) { Row(modifier = Modifier .windowInsetsTopHeight(WindowInsets.captionBar) .fillMaxWidth() .background(if (isSystemInDarkTheme()) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.secondaryContainer) ) { TabRow( selectedTabIndex = selectedTabIndex, modifier = Modifier.windowInsetsPadding(WindowInsets.captionBar.only(Horizontal)) ) { // Draw your tabs } } }
100. Connected Displays Link: h tt ps://developer.android.com/develop/ui/compose/layouts/adaptive/suppo rt -connected-displays
101. Secondary Display
102. val displayManager = getSystemService(Context.DISPLAY_SERVICE) as DisplayManager val displays: Array<Display> = displayManager.displays
103. val targetDisplay = ... val intent = Intent(...) intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK) val options = ActivityOptions.makeBasic() options.setLaunchDisplayId(targetDisplay.displayId) startActivity(intent, options.toBundle())
104. val targetDisplay = ... val intent = Intent(...) intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK) val options = ActivityOptions.makeBasic() options.setLaunchDisplayId(targetDisplay.displayId) startActivity(intent, options.toBundle())
105. Android XR Link: h tt ps://developer.android.com/develop/xr
106. Google I/O Extended 25 Home Space
107. Google I/O Extended 25 Full Space
109. Google I/O Extended 25 Design for XR apps Link: h tt ps://developer.android.com/design/ui/xr/guides XR-compatible mobile app XR-compatible large screen app XR-differentiated app
110. Google I/O Extended 25 XR- differentiated app Spatial panels 3D models Spatial environments Link: h tt ps://developer.android.com/design/ui/xr/guides#design-android
111. Subspace { SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) .movable() .resizable() ) { Box(...) { Text("Primary Content") } Orbiter(...) { Text("Orbiter") } } }
113. Google I/O Extended 25 • Compose Material3 library • NavigationSuiteScaffold • BasicAlertDialog • TopAppBar • ListDetailPaneScaffold • SupportingPaneScaffold Material Design for XR Link: h tt ps://developer.android.com/develop/xr/jetpack-xr-sdk/material-design setContent { JetStreamTheme { EnableXrComponentOverrides { App(...) } } }
114. Link: xr-compose/EnableXrComponentOverrides.kt
115. Link: xr-compose/EnableXrComponentOverrides.kt true
116. Spatialized CompositionLocal
117. Spatialized CompositionLocal
118. Link: xr-compose/NavigationSuiteSca ff old.kt Spatialized
119. Link: xr-compose/NavigationSuiteSca ff old.kt Spatialized
120. Link: xr-compose/NavigationSuiteSca ff old.kt Spatialized
121. Link: xr-compose/NavigationSuiteSca ff old.kt Spatialized
122. Link: xr-compose/EnableXrComponentOverrides.kt false
123. Non-spatialized Link: compose-material3/NavigationSuiteSca ff old.kt
124. Non-spatialized Link: compose-material3/NavigationSuiteSca ff old.kt
125. Link: compose-material3/NavigationSuiteSca ff old.kt Non-spatialized
126. Link: compose-material3/NavigationSuiteSca ff old.kt Non-spatialized
127. Link: compose-material3/NavigationSuiteSca ff old.kt Non-spatialized
128. Link: compose-material3/NavigationSuiteSca ff old.kt Non-spatialized
129. EnableXrComponentOverrides { } NavigationSuiteScaffold { } isSpatializationEnabled Subspace { SpatialPanel(...) { content() } } Surface { NavigationSuiteScaffoldLayout(...) { content() } } false true
130. Wrapping up Why build adaptive UIs? Resizable app windows, Multiple devices per user, Rank higher on Google Play, Android 16 behavior changes Create differentiating experiences. Desktop-like experiences, Support connected displays, Adding XR features Build Once, Run Everywhere! Leverage libraries like: Window Size Classes, Compose Material3 Adaptive, Navigation 3
131. Google I/O Extended 25 Google I/O ’25 Sessions on adaptive apps and form factors: goo.gle/io25-androiddevs-yt • 📱 Adaptive Android development makes your app shine across devices • 🖊 Unlock user productivity with desktop windowing and stylus support • 🕶 Building differentiated apps for Android XR with 3D content • 📺 Engage users on Google TV with excellent TV apps • 🚗 New in-car app experiences Codelabs: Adaptive apps Samples: android/adaptive-apps-samples
132. Thank you! Google I/O Extended 25