Composing large screens

Android has always embraced different form factors. But given Googles latest hardware, a tablet and a foldable, it's more important than ever to make your app look great on large screens. How do you do that? Which tools and libraries are needed? What screen layout is best? This talk walks you through Jetpack WindowManager, a Jetpack library that provides all information your app needs to make the best of all screen sizes. And we'll look at Material Design Canonical Layouts, ready-to-use compositions that help layouts adapt for common use cases and screen sizes. On top of that, you'll learn about compose_adaptive_scaffold, a small open source library that minimizes your efforts for making your Compose apps become a first class citizen on large screens

droidcon Berlin 2023

Transcript

1. Composing
   large screens
   Thomas Künneth
   

   View Slide

2. @tkuenneth
   @tkuenneth
   @tkuenneth@snapp.social
   @tkuenneth
   

   View Slide

3. • What are large screens?
   • What are foldables?
   • How are foldables different from tablets?
   • Coding for foldables and tablets
   • Questions and answers, discussion
   

   View Slide

4. What are large screens?
   And why do we need to
   talk about it?
   

   View Slide

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

6. • Now there is Jetpack Compose
   • We no longer should use Views
   • We no longer should use Fragments
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. What are large screens?
    • TVs
    • Tablets and Freeform
    experiences
    • Foldables
    

    View Slide

11. Sony Tablet P, 2011 (Honeycomb)
    https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/
    Once upon a time
    

    View Slide

12. • Very compact
    • Must be opened for full usage
    • Main screen essentially is Smartphone-sized
    • A small screen for ad hoc interactions
    

    View Slide

13. • Book-like experience
    • Typically, 360-degree hinge
    • Various postures depending on intended use
    

    View Slide

14. View Slide

15. View Slide

16. 🤔So what?
    • 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 screen real estate
    

    View Slide

17. • Feels like a smartphone when closed
    • Essentially becomes a tablet when opened
    • Various postures, but no 360 degrees
    

    View Slide

18. • 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
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

19. View Slide

20. View Slide

21. App layout changed when …
    • a Freeform window was resized
    • a foldable device was folded / unfolded
    

    View Slide

22. App window size also changes when
    • rotating the device (portrait / landscape)
    • entering / leaving split-screen mode
    • entering / leaving picture in picture mode
    

    View Slide

23. • Apps don’t always use the whole screen
    • App layout is based on the app window size
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

24. View Slide

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

    View Slide

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

    View Slide

27. Window Size Classes affect which
    components we use and the location and size
    of the content area
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

28. What’s inside the
    content area?
    

    View Slide

29. • Foldables divide the
    content area into two
    parts
    • The hinge may create a
    noticeable gap
    

    View Slide

30. What’s inside the
    content area and
    how do we lay it out?
    

    View Slide

31. Daniel McCullough
    https://unsplash.com/photos/-FPFq_trr2Y
    Material Design encourages app layout
    based on Canonical Layouts
    

    View Slide

32. • Scrollable lists of items
    • Item detail containing
    supplementary information
    List-detail
    Lorem Ipsum
    Lorem ipsum dolor sit amet,
    consectetur adipisici elit, sed
    eiusmod tempor incidunt ut labore
    et dolore magna aliqua.
    

    View Slide

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

    View Slide

34. • Organizes cards in a grid
    • Easily browse a large amount
    of content
    Feed
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    

    View Slide

35. • Primary section for the main
    app content
    • Secondary section supports
    the main app content
    Supporting pane
    Lorem Ipsum
    Lorem ipsum dolor sit
    amet, consectetur adipisici
    elit, sed eiusmod tempor
    incidunt ut labore et dolore
    magna aliqua.
    

    View Slide

36. • Based on logical panes
    • Implementation uses Window Size Classes to
    determine …
    • which panes are visible
    • size, location, and content of panes
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

37. • Currently, no fully implemented
    components
    • A couple of samples:
    https://github.com/android/user-interface-
    samples/tree/main/CanonicalLayouts
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

38. • Samples help understand Window Size
    Classes and Canonical Layouts
    • Currently, some honour the hinge, while
    others don’t
    • Those that do require experimental
    accompanist-adaptive
    

    View Slide

39. An alternative
    approach…
    

    View Slide

40. Some more thoughts on
    tablets and foldables
    

    View Slide

41. Two columns
    33 : 66
    

    View Slide

42. View Slide

43. View Slide

44. • Utilize logical panes
    • On large screens, show two logical panes
    • On (large screen) foldables, respect the
    areas defined by the hinge / fold
    Clem Onojeghuo
    https://unsplash.com/photos/P7-_EB3gQuA
    

    View Slide

45. Jetpack WindowManager
    • Window metrics for an activity
    • Features of a foldable device
    • Position and size of the hinge
    • Orientation (vertical, horizontal)
    • Occlusion type (none, full)
    • State (flat, half opened)
    • Activity embedding
    

    View Slide

46. • Not only for Jetpack Compose
    • Can be used to make View-based apps fold-aware
    

    View Slide

47. Window Size Classes
    • Jetpack WindowManager
    • androidx.compose.material3:material3-window-size-class
    

    View Slide

48. Code Walkthrough
    https://github.com/tkuenneth/android-demos/tree/master/compose/FoldableDemo
    

    View Slide

49. View Slide

50. • Setup Jetpack WindowManager
    • Get information about the app window
    • Get information about the hinge / fold
    • Create an app layout
    

    View Slide

51. compileSdk >= 34
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. Recap
    • This demo is based on panes, but wraps then inside composables
    • FoldableScreen
    • LargeScreen
    • SmartphoneScreen
    • … to make the code a little easier to understand
    • My open source library compose_adaptive_scaffold puts panels
    center stage
    

    View Slide

67. https://github.com/tkuenneth/comp
    ose_adaptive_scaffold
    

    View Slide

68. Thank you
    @tkuenneth
    @tkuenneth
    @tkuenneth@snapp.social
    @tkuenneth
    

    View Slide