Developing High-Quality Apps for Large Android Screens (By: Fahd Imtiaz) - DevFest Lahore 2023

Talk by Fahd Imtiaz (https://www.linkedin.com/in/fahdimtiaz/) at DevFest Lahore 2023 by GDG Lahore.

Transcript

1. Foldables, Tablets, Chromebooks Build high quality apps for Android Large Screens DevFest Lahore
2. Fahd Imtiaz Product Manager, Android Large Screens
3. Agenda Large Screens are growing 01 5 things to remember 02 Developer & Design guidance 03 Test your app and game on Large Screens 04
4. Android Large Screens …are growing
5. Android Large Screens Foldables Chromebooks/Desktop Tablets
6. 288m+ devices Large screens is the fastest growing segment of Android users
7. Proprietary and Confidential Why optimize? Deliver positive business results Many apps have higher user engagement and time in app metrics on large screens. Increase visibility for your app in Play Store Recent Play Store updates show ratings by device type and notifies users when an app lacks large screen support.
8. More pronounced on Large Screens Multi-window Allow enough screen real-estate to run multiple apps simultaneously for increased productivity. Landscape screen orientation Apps run in landscape mode naturally, and camera orientation on these devices is also landscape Input Stylus, keyboard, trackpad, mouse open doors for new ways to interact with apps and content.
9. 5 things to remember
10. Assume that users want to use your app and game in portrait mode OR landscape only. Portrait only apps are pillarboxed on landscape displays Don’t Support both portrait and landscape orientations. Do android:screenOrientation=”portrait” android:min|maxAspectRatio=”integer”
11. Assume that your app will not be resized. Apps may be resized in multi-window mode, when moving from foldable outer display to inner display, or in freeform windowing mode on Chromebooks Don’t Ensure your app activities are resizable, and that you handle the configuration changes correctly, without losing state. Do android:resizableActivity=”false”
12. Stretch UI elements (text fields, buttons, dialogs) to fill extra space Don’t Create two-pane layouts Use grid and column layouts Replace navigation bars with navigation rails and drawers. Do
13. Assume that your app will only be used with touch input Most Chromebook app interactions are with keyboard and mouse, users can also attach a keyboard/trackpad accessory to their tablet, or even a stylus. Don’t Support keyboards, trackpads, and styluses for an inclusive and engaging app/game experience. Games should also consider supporting game controllers, and D-pads for the most versatile gaming experiences. Do
14. Assume that all devices have a rear facing camera, or restrict camera preview dimensions or orientation Camera preview orientation may be different than your activity ratio (i.e camera may be landscape but your activity in multi-window is portrait) Don’t Provide a properly proportioned and oriented camera preview in landscape and portrait orientations, folded and unfolded device states, and multi‑window mode. Do
15. Developer & Design Guidance Getting started with Large Screens
16. Large Screens Gallery Get inspired with UX designs optimized for large screens. Build engaging and differentiated experiences for tablets, foldables, and ChromeOS devices. https://developer.android.com/large-screens/gallery
17. Material Design m3.material.io Design guidance for large screen layouts, differentiated experiences (e.g. drag and drop), guidance around keyboard and mouse input, and adaptive components
18. Large screens app quality Get started with large screens optimization: https://developer.android.com/guide/topics/large -screens Incrementally approach large screen optimization, in 3 phases (Ready > Optimized > Differentiated)
19. Whatever your app architecture, there’s a path to large screen optimization Activity Embedding Different activities in Views (and re-architecting is too costly) SlidingPaneLayout Material Adaptive Layout APIs Single activity & Fragments in Views Compose Support different screen sizes https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes
20. Jetpack WindowManager: Window Size Classes
21. private fun isTabletopPosture(foldFeature: FoldingFeature) = foldFeature.state == FoldingFeature.State.HALF_OPENED && foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL Jetpack WindowManager: Tabletop
22. Test on Large Screens
23. goo.gle/large-screen-quality Clear, structured guidance on what to look for to ensure quality on large screens Easy to follow tests to help you discover quality issues in your app Quality Checklists & Tests
24. Android Studio: Reference Devices
25. Android Studio: Resizable Emulator (Experimental)
26. Android Studio: Test with physical devices https://developer.android.com/studio/preview/android-device-streaming
27. Recap
28. Three key takeaways Ensure your app is resizable And that you properly handle the configuration changes while preserving state Don’t restrict to portrait orientation only Many large screen devices are landscape-first. Portrait only apps are pillar boxed on these devices Test your app on large screens Test on large screen devices (physical or emulators) to guarantee a great experience for your users on large screens