Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Foldables

 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.

Thomas Künneth

April 06, 2023
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

  1. • 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
  2. • 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
  3. • A blocking hinge may cause no problems at all

    • May make the UX a little less pleasing • May require changes to the user interface
  4. • 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
  5. Layout was changed when … • a Freeform window was

    resized • a foldable device was folded / unfolded
  6. 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
  7. • 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
  8. Compact 480 dp 900 dp 600 dp 840 dp Expanded

    Medium Compact Medium Expanded
  9. 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
  10. • 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
  11. • 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
  12. • 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.
  13. • 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.
  14. • 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
  15. • 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