Building adaptive Android apps

Presentation : https://www.youtube.com/watch?v=wBc6oMVAP60

Introduction

• Fahd Imtiaz and Alex Vanyo discussed the importance of building adaptive apps for the expanding ecosystem of Android devices, including phones, foldables, tablets, and Chromebooks.
• Emphasis on the need for apps to seamlessly adapt to various screen sizes and orientations.

Key Topics Covered

Adaptive Layouts

• New Compose Material 3 Adaptive Library : Helps developers create layouts that adjust based on the window size.
• Use Cases : Examples from SAP’s Mobile Start app showed how adaptive layouts improve user experience by automatically adjusting navigation components.

Building for Various Devices

• Large-Screen Devices : Over 300 million active large-screen Android devices are in use.Foldable device shipments predicted to top 100 million by 2027.
• Optimizing Apps : Emphasis on creating high-quality apps that are discoverable and functional across multiple device types.

Window Size Classes

• Importance of Window Size : Unlike physical display size, which can be misleading due to multi-window modes, the window size provides a reliable measure for layout adjustments.
• Adapting to Changes : Apps should dynamically adjust their layouts based on window size and not on device orientation or display size.

Navigation and Layout Components

• NavigationSuiteScaffold : Automatically switches between navigation bars and rails depending on window size.
• ListDetailPaneScaffold and SupportingPaneScaffold : Helps manage layouts for lists and details, adapting to available window space.

User Experience and Testing

• Consistent User Experience : Adaptive apps should maintain their state and provide continuity as users resize or change the orientation of their devices.
• Predictable Behavior : Ensuring that apps react predictably to window size changes by using window size classes instead of device orientation.

Best Practices and Tools

• Avoiding Common Pitfalls : Avoid using physical display size and device orientation for layout decisions.
• Leveraging WindowManager : Use the Jetpack WindowManager’s computeCurrentWindowMetrics method to calculate window size.
• Future Enhancements : Features like draggable panes in Google Calendar demonstrate how adaptive layouts can enhance user interaction.

Conclusion

Building Adaptive Apps :

• Crucial for optimizing the user experience across a diverse range of Android devices.
• Use the new Compose Material 3 adaptive library and adhere to best practices in handling window sizes.

Focus on :

• Saving UI state.
• Removing references to physical display size.
• Removing orientation locks.
• Supporting different input types (keyboard, trackpad, stylus).

Additional Insights :

• Various conditions, including the posture of foldable devices, influence how apps should adapt their layouts.
• Jetpack WindowManager provides information about these features, enabling developers to create adaptable layouts.
• Apps must adapt to changes in window size, posture, and orientation rather than locking orientation, to avoid poor usability and accessibility.
• Unnecessary feature requirements can block app installation on various devices.
• Supporting multiple input methods is crucial as users interact with apps across different devices.
• Testing adaptive apps is simplified with guidelines and tools like DeviceConfigurationOverride in Compose 1.7 and host-side screenshot tests for UI verification.
• Developers should avoid hard-coded strings and layout directions, ensuring layouts adapt based on window size classes.
• Testing should be integrated into the development process to catch issues early.
• Building apps with an adaptive mindset is essential as devices become more varied, with Jetpack Compose recommended for creating adaptive UIs.

Documentations :

Get started with large screens → https://goo.gle/4d8aCqf

Large screens app quality → https://goo.gle/3xJWDXy

Support different screen sizes → https://goo.gle/446n85v

Build adaptive layouts in Compose → https://goo.gle/446nkBL

Build a list-detail layout → https://goo.gle/4a06I09