Foldables Thomas Künneth

• 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

• 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

• A blocking hinge may cause no problems at all • May make the UX a little less pleasing • May require changes to the user interface

• 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

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

No content

No content

No content

Layout was changed when … • a Freeform window was resized • a foldable device was folded / unfolded

No content

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

• 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

No content

Daniel McCullough https://unsplash.com/photos/-FPFq_trr2Y Material Design encourages app layout based on Window Size Classes

Compact 480 dp 900 dp 600 dp 840 dp Expanded Medium Compact Medium Expanded

No content

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

No content

• 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

https://developer.android.com/about/versions/android-3.0-highlights#ui

• 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

• 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.

• 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.

• 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

No content

• flutter_adaptive_scaffold (https://pub.dev/packages/flutter_adaptive_scaffold) • Easy-to-uase AdaptiveScaffold • Flexible AdaptiveLayout with SlotLayout, SlotLayoutConfig, … Implementation - Flutter

• 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

• FoldableDemo (https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo) • FlutterFoldableDemo (https://github.com/tkuenneth/flutterfoldabledemo) My examples

@tkuenneth @tkuenneth @tkuenneth @[email protected] https://www.thomaskuenneth.eu/ Thank you