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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

11. View Slide

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
    

    View Slide

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
    

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

17. View Slide

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
    

    View Slide

19. View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

26. View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

30. @tkuenneth
    @tkuenneth
    @tkuenneth
    @tkuenneth@snapp.social
    https://www.thomaskuenneth.eu/
    Thank you
    

    View Slide