Foldables

Foldable devices made quite a buzz from the start. In the beginning, because they were not very robust. Fortunately, they are robust enough for daily usage now. And they make large screens pocketable. This talk shows you how to make beautiful user interfaces that work well on smartphones, tablets, and foldables, using either native Android frameworks or Flutter.

Transcript

1. Foldables Thomas Künneth
2. • Very compact • Must be opened for full usage • Screen is Smartphone-sized • Book-like experience • Typically, 360-degree hinge • Various postures depending on intended use • Feels like a smartphone when closed • Becomes a tablet when opened
3. • Foldables have one, two, or possibly more 😎 display areas • Biggest area • divided into two parts separated by a hinge • comprises of ONE or TWO physical screens • Not all foldables provide a large display area
4. • A blocking hinge may cause no problems at all • May make the UX a little less pleasing • May require changes to the user interface
5. • Ignore devices with obstructing hinges • Make our apps first class citizens on as many devices as possible • Either way we need to deal with the large screens
6. https://developer.android.com/about/versions/android-3.0-highlights#ui • Alternartive resources available since the beginning • Fragments: Android 3 • We even had ActivityGroup Android ❤️ different form factors
10. Layout was changed when … • a Freeform window was resized • a foldable device was folded / unfolded
12. Layout changes • Resizing a Freeform window • Open / close a foldable • Rotating the device (portrait / landscape) • Entering / leaving split-screen mode • Entering / leaving picture in picture mode
13. • Apps don’t always use the whole screen (app window may much be smaller) • App layout is based on the app window size Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA
15. Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Window Size Classes
16. Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded
18. Window Size Classes affect which components we use and the location and size of the content area What’s inside the content area 🤔 Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA
20. • Foldables divide the content area into two panes • The hinge may create a visible gap What’s inside the content area and how do we lay it out 🤔 Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA
21. https://developer.android.com/about/versions/android-3.0-highlights#ui
22. • Content elements in a grid • Easily browse a large amount of content Canonical layout - Feed Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
23. • Explorable lists of items • Item detail (supplementary information alongside each item) • Two side-by-side panes Canonical layout - List-detail Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
24. • Organize app content into primary and secondary display areas • Secondary content supports the main content Canonical layout - Supporting pane Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
25. • Based on logical panes • React to app window size changes • Location, size, and component for navigation • Number and content of panes Clem Onojeghuo https://unsplash.com/photos/P7-_EB3gQuA
27. • flutter_adaptive_scaffold (https://pub.dev/packages/flutter_adaptive_scaffold) • Easy-to-uase AdaptiveScaffold • Flexible AdaptiveLayout with SlotLayout, SlotLayoutConfig, … Implementation - Flutter
28. • So far no ready-to-use components • View-based apps and apps relying on Fragments can use established patterns • Compose apps can use Accompanist (contains TwoPane()) • Jetpack WindowManager (https://developer.android.com/jetpack/androidx/releases/window) • Google Examples (https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts) Implementation – Android Native
29. • FoldableDemo (https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo) • FlutterFoldableDemo (https://github.com/tkuenneth/flutterfoldabledemo) My examples
30. @tkuenneth @tkuenneth @tkuenneth @tkuenneth@snapp.social https://www.thomaskuenneth.eu/ Thank you