Apps ontwikkelen voor
foldable devices
Tips & Tricks
GESCHREVEN DOOR
Daniël Kok
Heb jij zelf een foldable device of wellicht wel eens eentje gezien? Zelf heb ik sinds een half jaar de Galaxy Z Fold 3 in mijn bezit en gebruik hem als mijn persoonlijke en zakelijke telefoon. Een foldable device heeft een vouwbaar scherm. Het idee dat je zo eigenlijk altijd zowel een telefoon als tablet bij je hebt, sprak mij aan. Deze form-factor brengt ook een aantal nieuwe functies met zich mee, die anders zijn dan we tot nu toe gewend zijn van telefoons en tablets. In dit blog beschrijf ik de meest opvallende specificaties waar je als developer rekening mee moet houden en hoe je dit allemaal kan testen.
Smaller front display
De Z Fold heeft 2 displays. Een front en een inner display. Het front display is 6.2 inch en is smaller dan een gemiddeld scherm met een resolutie van 2268×832. Ter vergelijking, de Pixel 6 heeft een resolutie van 2400×1080. Doordat het scherm vrij smal is, is typen lastiger. Hoewel veel devices over de jaren steeds grotere displays hebben gekregen, is het dus belangrijk dat je als app developer ook rekening houdt met een smaller display.
Inner display: de vouw en aspect ratio
Het inner display, oftewel het vouwbare display, is een 7.6 inch display met een resolutie van 2208×1768. Om maar te beginnen met wat de meeste mensen gelijk opvalt: de crease ofwel de vouw. Daar waar het binnenste scherm in tweeën gevouwen wordt, is het scherm lichtelijk gebogen. Dit is iets wat direct opvalt bij fel licht of als je niet recht voor het scherm zit. De vouw valt op, maar heeft, vind ik, geen impact op het gebruik en het display loopt door in de vouw. Het is dus daadwerkelijk 1 scherm.
Het scherm heeft een ongebruikelijke aspect ratio van 22.5:18. Sommige apps hanteren een beperking op de aspect ratio (zoals Instagram) of op het gebruik van multi-window. Samsung biedt in de “Labs”-sectie van de settings-app de mogelijkheid om een custom aspect ratio in te stellen en multi-window voor alle apps aan te zetten. Dit betekent gelukkig voor de gebruiker dat je wel altijd het gehele scherm kan gebruiken voor alle apps, maar dat deze hier dus niet altijd voor geoptimaliseerd zijn.
Het is natuurlijk wenselijker dat een app hier rekening mee houdt en nog prettiger als deze zelfs aanpast naar geschiktere layout voor een groter scherm. Zo laat Outlook bijvoorbeeld links de inbox en rechts de inhoud van een mail zien, vergelijkbaar met de desktop-applicatie.
Flex Mode
Het scharnier van de Z Fold maakt het mogelijk om in elke stand te blijven staan. Dit zorgt ervoor dat je enerzijds het device als een soort standaard neer kan zetten en het front display in landscape modus kan gebruiken. En anderzijds kan het inner display als een soort laptop worden gebruikt door deze nog verder uit te vouwen. Deze modus wordt geactiveerd als je vanuit de gesloten stand het scherm opent tussen de 75 en 115 graden en wordt ‘Flex Mode’ genoemd.
Deze Flex Mode is te detecteren in je app en maakt het mogelijk om een andere layout te presenteren. Gebruik hiervoor de Jetpack WindowManager. Een aantal apps maken hier al gebruik van, zoals de camera app bijvoorbeeld. In deze modus laat de camera app de controls op de onderste helft zien en de camera preview op de bovenste helft. De YouTube app toont de video op de bovenste helft en de comment section op de onderste helft.
Afhankelijk van het type app kan het interessant zijn om deze modus te ondersteunen met een op maat gemaakte layout. Het is hoe dan ook aan te raden om bij het bouwen van een app rekening te houden met controls die zich dichtbij het midden van het scherm bevinden, omdat deze lastiger te bereiken zijn.
App continuity
‘App Continuity’ staat voor het naadloos kunnen blijven gebruiken van een app, nadat er een zogenaamde configuration change plaatsvindt. Dit kan gebeuren doordat de oriëntatie verandert (portrait naar landscape) of de gebruiker de multi-window mode activeert door twee apps naast elkaar te draaien. Dit is dus op zich niks nieuws en iets waar je altijd rekening mee hoort te houden.
Op de Z Fold is de wijze van transitie wat anders en komt deze behoorlijk vaak voor. Het starten van een app op het front display en deze vervolgens verder gebruiken op het inner display is iets wat ik heel regelmatig gebruik. Ook het gebruik in landscape en portrait komt erg veel voor door onder andere het gebruik van de Flex mode.
Zorg er dus voor dat de state van je UI goed bewaard blijft en houd rekening met configuration changes.
Multi-window en app resizing
Op de Z-Fold is het mogelijk om 3 apps tegelijkertijd op het inner display te openen: 2 apps op de ene helft en 1 app op de andere. De randen van de windows kunnen door de gebruiker naar wens worden verplaatst, wat de app volledig resizable maakt. Dit is iets wat we steeds meer zullen gaan zien en ook iets waar Google sinds Android 12L for large screens steeds meer aandacht aan geeft. Natuurlijk zitten er grenzen aan wat nog bruikbaar is voor een app, maar weet dat het resizen van je app in veel gevallen al kan en zeker een aandachtspunt is voor de toekomst.
Testen van je app voor een foldable device
Hoewel testen op een fysiek device in je eigen bezit natuurlijk het mooiste is, is dit een prijzige aangelegenheid.
Ik geef je twee andere opties:
- De eerste is het gebruik van een foldable emulator. Android biedt tegenwoordig een emulator aan met virtuele scharnier en 3D view van het device. Hiermee kun je real-time de hoek van de sensor te bepalen door deze open en dicht te slepen. Android Studio biedt al meerdere standaard-definities aan die hier gebruik van maken. Voor de Samsung Galaxy Z Fold 3 gebruik je een ‘Fold-in with outer display’.
- Daarnaast biedt Samsung een Remote Test Lab. Deze is niet alleen interessant voor foldables, maar voor alle Samsung devices en maakt het mogelijk om te testen op een echt device. Remote Test Lab biedt een groot scala aan Samsung phones, tablets en horloges aan en is volledig functioneel binnen de browser. Een APK installeren gaat simpelweg door deze erin te slepen. Daarnaast kan via adb een remote connectie gelegd worden waardoor ook debuggen mogelijk is. Je betaalt een aantal credits om een device te reserveren en krijgt dagelijks een aantal gratis credits tot je beschikking.
Aangezien dit op afstand gebeurt, kan de netwerkverbinding een beperkende factor zijn in het gebruik daarvan. Daarnaast is het niet raadzaam privacygevoelige apps hierop te testen.
To fold or not to fold?
Dit is inmiddels de 3e generatie van de Z Fold en de 4e zal later dit jaar worden aangekondigd. Deze Samsung Galaxy Z Fold 3 is niet het enige foldable device. Zo heeft Samsung bijvoorbeeld ook al de Z Flip 3, een standaard formaat telefoon die je dubbel kan klappen. Maar ook andere fabrikanten zitten niet stil. Zo heeft Microsoft de Surface Duo 2 uitgebracht, Motorola de Razr en Huawai de Mate Xs. Ook heeft Samsung al vele prototypes laten zien voor devices met onder andere meerdere folds en werkt Google ook aan een foldable device.
De robuustheid van de Galaxy Z Fold 3 en deze ontwikkelingen leiden mij tot de conclusie dat wij deze devices de komende jaren veel meer gaan zien. Be ready!
