Posted by
SAP Cell Begin is an app that centralizes entry to SAP’s cell enterprise suite, a hub for customers to maintain observe of their corporations’ processes and knowledge to allow them to effectively handle their day by day to-dos whereas on the transfer.
Lately, SAP Cell Begin builders prioritized constructing an adaptive app that appears nice throughout gadgets, together with tablets and foldables, to create a extra seamless consumer expertise. Utilizing Jetpack Compose and Materials 3 design, the crew effectively carried out intuitive, user-friendly options to extend accessibility throughout its customers’ most well-liked gadgets.
Adaptive design throughout gadgets
With over 300 million day by day lively customers on foldables, tablets, and Chromebooks right now, constructing apps that adapt to diversified display screen sizes is essential for offering an optimum consumer expertise. However merely stretching the UI to suit completely different display screen sizes can drastically alter it from its authentic type, obscuring the interface and impairing the consumer expertise.
“We targeted on conditions the place we may make higher use of obtainable house on massive screens,” stated Laura Bergmann, UX designer for SAP. “We wished to do away with screens which might be stretched from edge to edge, full-screen drill-downs or dialogs, and use house extra effectively.”
Now, after optimizing for various gadgets, SAP Cell Begin dynamically adjusts its layouts by swapping parts and exhibiting or hiding content material based mostly on the out there window measurement as a substitute of stretching UI components to match a tool’s display screen.
The SAP crew additionally carried out canonical layouts, widespread UI designs that break up a display screen into panes in response to its measurement. By separating content material into panes, SAP’s customers can handle their enterprise workflows extra productively. Relying on the window measurement class, the supporting pane adjusts the UI with out further customized logic. For instance, compact home windows usually 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 out there navigational components and patterns, we will now channel our efforts into making a extra partaking consumer 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 house. The primary place builders added supporting panes was on the app’s “To-Do” particulars web page. To-dos was once managed in a single pane, making it tough to evaluate the feedback and tickets concurrently. Now, tickets and feedback are reviewed in main and secondary panes on the identical display screen 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 quicker and simpler than ever earlier than because of composables, reusable code blocks for constructing widespread UI parts. The crew 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 completely 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 element based mostly on varied window measurement courses. The NavigationSuiteScaffold additionally decreased the customized navigation UI logic code by 59%, from 379 strains to 156.
“Jetpack Compose simplified UI growth,” stated Aditya Arora, lead Android developer. “Its declarative nature, coupled with built-in help for Materials Design and darkish theme, considerably elevated our growth effectivity. By merely describing the specified UI, we have decreased code complexity and improved maintainability.”
SAP builders used stay edit and structure inspector in Android Studio to check and optimize the app for big screens. These options have been “complete sport changers” for the SAP crew as a result of they helped iterate and examine structure points quicker when optimizing for brand spanking new screens.
With its @PreviewScreenSizes annotation and gadget streaming powered by Firebase, Jetpack Compose additionally made testing the app’s UI throughout varied display screen sizes simpler. SAP builders look ahead to Compose Screenshot Testing being accomplished, which is able to additional streamline UI testing and guarantee better visible consistency throughout 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 chunk of cake.”
As large-screen gadgets like tablets, foldables, and Chromebooks turn into extra in style, constructing layouts that adapt to diversified display screen sizes turns into more and more essential. For SAP Cell Begin builders, reimagining their app throughout gadgets utilizing Jetpack Compose and Materials 3 design pointers was easy. Utilizing Android’s assortment of instruments and assets, creating adaptive UIs for all the brand new type elements hitting the market right now 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 consumer expertise and broaden your app’s attain,” stated Aditya.
Get began
Discover ways to enhance your UX by optimizing for massive screens and foldables utilizing Jetpack Compose and Materials 3 design.