Posted by
SAP Cell Begin is an app that centralizes entry to SAP’s cellular enterprise suite, a hub for customers to maintain observe of their corporations’ processes and knowledge to allow them to effectively handle their each day to-dos whereas on the transfer.
Just lately, SAP Cell Begin builders prioritized constructing an adaptive app that appears nice throughout units, together with tablets and foldables, to create a extra seamless person expertise. Utilizing Jetpack Compose and Materials 3 design, the workforce effectively carried out intuitive, user-friendly options to extend accessibility throughout its customers’ most well-liked units.
Adaptive design throughout units
With over 300 million each day lively customers on foldables, tablets, and Chromebooks right this moment, constructing apps that adapt to diversified display sizes is essential for offering an optimum person expertise. However merely stretching the UI to suit totally different display sizes can drastically alter it from its unique type, obscuring the interface and impairing the person expertise.
“We centered on conditions the place we might make higher use of accessible area on giant screens,” stated Laura Bergmann, UX designer for SAP. “We needed to do away with screens which are stretched from edge to edge, full-screen drill-downs or dialogs, and use area extra effectively.”
Now, after optimizing for various units, SAP Cell Begin dynamically adjusts its layouts by swapping elements and displaying or hiding content material based mostly on the obtainable window dimension as a substitute of stretching UI parts to match a tool’s display.
The SAP workforce additionally carried out canonical layouts, widespread UI designs that cut up a display into panes in accordance with its dimension. By separating content material into panes, SAP’s customers can handle their enterprise workflows extra productively. Relying on the window dimension class, the supporting pane adjusts the UI with out further customized logic. For instance, compact home windows sometimes make the most of one pane, whereas bigger home windows can make the most of a number of.
“Adopting the brand new canonical layouts from Google helped us focus extra on designing distinctive app capabilities for SAP’s enterprise situations,” stated Laura. “With the obtainable navigational parts and patterns, we are able to now channel our efforts into making a extra participating person expertise with out reinventing the wheel.”
SAP builders began by implementing supporting panes to create multi-pane layouts that effectively make the most of on-screen area. The primary place builders added supporting panes was on the app’s “To-Do” particulars web page. To-dos was managed in a single pane, making it tough to assessment the feedback and tickets concurrently. Now, tickets and feedback are reviewed in main and secondary panes on the identical display utilizing SupportingPaneScaffold.
Quick implementation utilizing Compose Materials 3 Adaptive library
SAP Cell Begin is constructed fully with Jetpack Compose, Android’s fashionable declarative toolkit for constructing native UI. Compose helped SAP builders construct new UI sooner and simpler than ever earlier than due to composables, reusable code blocks for constructing widespread UI elements. The workforce additionally used Compose Navigation to combine seamless navigation between composables, optimizing journey between new UI on all screens.
It took builders solely 5 minutes to combine the NavigationSuiteScaffold from the brand new Compose Materials 3 adaptive library, quickly adapting the app’s navigation UI to totally different window sizes, switching between a backside navigation bar and a vertical navigation rail. It additionally eradicated the necessity for customized logic, which beforehand decided the navigation part based mostly on varied window dimension lessons. The NavigationSuiteScaffold additionally diminished the customized navigation UI logic code by 59%, from 379 traces to 156.
“Jetpack Compose simplified UI growth,” stated Aditya Arora, lead Android developer. “Its declarative nature, coupled with built-in assist for Materials Design and darkish theme, considerably elevated our growth effectivity. By merely describing the specified UI, we have diminished code complexity and improved maintainability.”
SAP builders used reside edit and structure inspector in Android Studio to check and optimize the app for big screens. These options had been “complete sport changers” for the SAP workforce as a result of they helped iterate and examine structure points sooner when optimizing for brand new screens.
With its @PreviewScreenSizes annotation and gadget streaming powered by Firebase, Jetpack Compose additionally made testing the app’s UI throughout varied display sizes simpler. SAP builders sit up for Compose Screenshot Testing being accomplished, which is able to additional streamline UI testing and guarantee larger visible consistency inside the app.
Utilizing Jetpack Compose, SAP builders additionally shortly and simply carried out new Materials 3 design ideas from the Compose M3 Adaptive library. Materials 3 design emphasizes personalizing the app expertise, enhancing interactions with fashionable visible aesthetics.
Compose’s flexibility made changing the usual Materials Theme with their very own customized Fiori Horizon Theme easy, making certain a constant visible look throughout SAP apps. “As early adopters of the Compose M3 Adaptive library, we collaborated with Google to refine the API,” stated Aditya. “Since our app is totally Compose-based, leveraging the brand new Compose Materials 3 Adaptive library was a bit of cake.”
As large-screen units like tablets, foldables, and Chromebooks change into extra standard, constructing layouts that adapt to diversified display sizes turns into more and more essential. For SAP Cell Begin builders, reimagining their app throughout units utilizing Jetpack Compose and Materials 3 design tips was easy. Utilizing Android’s assortment of instruments and sources, creating adaptive UIs for all the brand new type components hitting the market right this moment is quicker and simpler than ever.
“Optimizing for big screens is essential. The marketplace for tablets, foldables, and Chromebooks is booming. Do not miss out on this chance to enhance your person expertise and develop your app’s attain,” stated Aditya.
Get began
Learn to enhance your UX by optimizing for giant screens and foldables utilizing Jetpack Compose and Materials 3 design.
