Building for larger screen with Jetpack Compose

Transcript

1. Annunziata Kinya @AnnieKobia Build for Large Screens with Jetpack Compose Valentine Rutto @valentinerutto
2. What we will cover • What are large screens? • Why should you care about them? • How: ◦ Design ◦ Implementation ◦ Testing
3. Adobe Stock#243026154 What?
4. Why You Should Care? • Google play form factor ratings and reviews • Google play with be featuring and promoting applications optimized for large screens = High visibility for your app • Good user experience = increased user engagement and retention • Google announced an upcoming update to allow further customization of store listing based on device type
5. Guiding Principles • Comfort - consider ergonomics and proximity of features • Capability - users expect more to do/see more on a larger screen • Efficiency - users expect to multitask on a large screen • Immersion - draw the attention of the user into the task at hand eg. video call
6. Approaches
7. Adobe Stock#243026154 Restructure content to occupy the additional space e.g. by adding a column Expand and Reorganize Take multiple screens from one user flow and display as a single view Combine Content
8. Design Guidelines: Canonical Layouts • Canonical layouts - a series of adaptive layouts that serve as starting points for design and implementation. • Helps us to decide how to divide space on the screen. • Considers common use cases and components, addressing user needs for how apps adapt across screen sizes and breakpoints • They Include: ◦ List-detail view ◦ Supporting Panel ◦ Feed
9. Adobe Stock#243026154 • Parent - Child relationship between the two panes • The columns proportions can be used to direct user focus. • Examples: ◦ Whatsapp chats + opened chat List-Detail view
10. Adobe Stock#243026154 • There is a primary and secondary panels that may not be directly related but they are integral to each other • The primary pane covers more screen space Supporting Panel Layout
11. Adobe Stock#243026154 • All panels are peers/siblings in the hierarchy • Show different types of content in cards and lists • Supports content discovery and browsing Feed
13. Adobe Stock#243026154 1. BottomNavigationBar 2. NavigationRail 3. NavigationDrawer Responsive Navigation 1 2 3
14. Implementation
15. WindowSize Classes • Viewport breakpoints that help us develop layouts that are responsive and adaptive across the different screen sizes
32. Testing
33. Adobe Stock#243026154 Available from Android Studio Chipmunk for developers to run and test their apps working in different device types e.g. phone, foldable, tablet and chrome but on the same emulator Resizable emulator👏
35. Resources • Demo project: https://github.com/Anniekobia/RicknMorty • https://developer.android.com/guide/topics/large-screens/get-started-with-larg e-screens • https://m3.material.io/foundations/adaptive-design/canonical-layouts • https://www.youtube.com/playlist?list=PLWz5rJ2EKKc9jBnpl83LH6oZc7nFIVSRq • https://www.youtube.com/watch?v=m7OL-mVh1E8 • https://github.com/android/nowinandroid • https://codelabs.developers.google.com/jetpack-compose-adaptability#0 • https://developer.android.com/jetpack/compose/layouts/adaptive
36. Questions
37. Thank you! Android Developer @AnnieKobia Annunziata Kinya @ValentineRutto Valentine Rutto