Sony Tablet P, 2011 (Honeycomb)
https://www.tabletblog.de/sony-tablet-p-bald-in-deutschland-fur-599-euro-erhaltlich/
Once upon a time
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
• Very compact
• Must be opened for full usage
• Screen essentially is Smartphone-sized
• Book-like experience
• Typically, 360-degree hinge
• Various postures depending on intended use
• Feels like a smartphone when closed
• Essentially becomes a tablet when opened
Slide 6
Slide 6 text
• Foldables may have one, two, or possibly more 😎 display areas
• Biggest area may be provided by more than one physical screen
• If so, they are connected by a hinge
Slide 7
Slide 7 text
• Even with one screen there may be a hinge (or fold)
• It may block or obstruct parts of the display
Slide 8
Slide 8 text
• A blocking hinge may cause no problems at all
• May make the UX a little less pleasing
• May require changes to the user interface
Slide 9
Slide 9 text
🤔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
Slide 10
Slide 10 text
So, why not learn from them?
Opened foldables resemble tablets
🤔Listen, I‘ve been thinking
• Creating two column layouts is
easy using classic Views
• And it certainly is easy using
Jetpack Compose
• But …
• what about the fold / hinge…
• and how do we get information
about the screen(s)?
Slide 16
Slide 16 text
Introducing Jetpack
WindowManager
Slide 17
Slide 17 text
• 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)
NavigationRail / NavigationRailItem
• NavigationRail() is used to move between
primary app destinations
• Displays three to seven destinations; optionally:
• FloatingActionButton()
• logo inside a header
• NavigationRailItem() represents primary
destinations
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Wrap up
Slide 32
Slide 32 text
• Two columns work great for tablets and foldables
• Jetpack WindowManager helps determining size and location
Slide 33
Slide 33 text
• Sometimes the hinge obstructs top-level UI elements
• Material Design interaction patterns help minimizing the impact