Building an adaptive layout with SlidingPaneLayout
summary
Shows how to convert a single-activity app into a responsive list‑detail layout using SlidingPaneLayout, replacing FrameLayout root with SlidingPaneLayout and adding a FragmentContainerView as the detail pane. Uses fixed widths 550dp and 300dp so 550dp + 300dp = 850dp to hit the breakpoint, sets layout_weight=1 on the detail pane, implements a custom OnBackPressedCallback plus panel slide listener to close the pane on Back, and sets lockMode=LOCKED to disable swipe gestures. Uses the resizable emulator for testing.
AI-written summary · about
chapters (10)
- 0:00Intro
- 0:45Demo
- 4:04Code
- 7:53Layout Weight
- 11:48Back Navigation
- 12:18Custom Callback
- 13:33Enabling SlidingPaneLayout
- 14:30Monitoring SlidingPaneLayout
- 16:08Init Block
- 20:30Outro
related talks
01h 21mEnhance your single screen designed-app to make it shine on foldable devices
38mWhy is Adaptive Layout a Nightmare?
37mBuilding Responsive UIs for tablets, foldables, and other devices
33mBuild adaptive apps with Jetpack Compose
18mCanonical layouts and visual hierarchy: Designing for larger screens
40mOptimize your app for large screens
18mCompose: Implementing responsive UI for larger screens
26mMaking Apps adaptive with Material and Compose