Breakpoints Breakpoint range (dp) Portrait Landscape Window size class Columns Minimum margins* 0-599 Handset Phone in portrait Compact 4 8 600-839 Foldable Small tablet Foldable Small tablet Medium 12 12 840+ Large tablet Large tablet Desktop Expanded 12 32
List-Detail ● Best for browsing content and quickly seeing details. ● Recommended for 840+dp ● Key use case ○ Text message + conversation ○ File browser + open folder ○ Musical artist + album detail
Feed ● Equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content. ● Recommended for 600+dp ● Key use case ○ News ○ Social media
Supporting Panel ● The screen is divided between a focus panel (left) and a supporting panel (right). ● Recommended for 600+dp ● Key use case ○ Productivity ○ Document editing and commenting ○ Content and media browsing
Navigation Rail ● Side navigation component that displays three to seven app destinations ● Better ergonomics Easier reach on large screen ● Available in Material3
Screen State Logic in ViewModel //ketika item pada list dipilih fun updateDetailsScreenStates(email: Email) { _uiState.update { it.copy( currentSelectedEmail = email, isShowingHomepage = false ) } }
Tier 3 (Basic) — Large screen ready ● Full screen ○ But app layout not ideal ● Basic support for external input ○ Keyboard ○ Mouse ○ Trackpad ● Handles configuration changes and retains or restores its state
Test Your App // Checks start_layout is on the left of end_layout with a vertical folding feature. @Test fun testDeviceOpen_Vertical() { activityRule.scenario.onActivity { activity -> val feature = FoldingFeature( activity = activity, state = HALF_OPENED, orientation = VERTICAL) val expected = TestWindowLayoutInfo(listOf(feature)) publisherRule.overrideWindowLayoutInfo(expected) } onView(withId(R.id.start_layout)) .check(isCompletelyLeftOf(withId(R.id.end_layout))) }