Posted by
SAP Cellular Begin is an app that centralizes entry to SAP’s cellular enterprise suite, a hub for customers to maintain monitor of their firms’ processes and information to allow them to effectively handle their day by day to-dos whereas on the transfer.
Lately, SAP Cellular Begin builders prioritized constructing an adaptive app that appears nice throughout gadgets, together with tablets and foldables, to create a extra seamless person expertise. Utilizing Jetpack Compose and Materials 3 design, the staff effectively carried out intuitive, user-friendly options to extend accessibility throughout its customers’ most popular gadgets.
Adaptive design throughout gadgets
With over 300 million day by day lively customers on foldables, tablets, and Chromebooks at present, constructing apps that adapt to diverse display sizes is necessary for offering an optimum person expertise. However merely stretching the UI to suit completely different display sizes can drastically alter it from its unique kind, obscuring the interface and impairing the person expertise.
“We targeted on conditions the place we might make higher use of obtainable house on massive screens,” stated Laura Bergmann, UX designer for SAP. “We wished to eliminate screens which can be stretched from edge to edge, full-screen drill-downs or dialogs, and use house extra effectively.”
Now, after optimizing for various gadgets, SAP Cellular Begin dynamically adjusts its layouts by swapping parts and displaying or hiding content material based mostly on the out there window measurement as an alternative of stretching UI parts to match a tool’s display.
The SAP staff additionally carried out canonical layouts, frequent UI designs that break up a display into panes based on 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 extra 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 out there navigational parts and patterns, we are able to now channel our efforts into making a extra partaking 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 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 troublesome to overview 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 Cellular Begin is constructed solely 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 frequent UI parts. The staff 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 lessons. The NavigationSuiteScaffold additionally decreased the customized navigation UI logic code by 59%, from 379 traces to 156.
“Jetpack Compose simplified UI improvement,” stated Aditya Arora, lead Android developer. “Its declarative nature, coupled with built-in help for Materials Design and darkish theme, considerably elevated our improvement effectivity. By merely describing the specified UI, we have decreased code complexity and improved maintainability.”
SAP builders used stay edit and format inspector in Android Studio to check and optimize the app for big screens. These options had been “whole sport changers” for the SAP staff as a result of they helped iterate and examine format points quicker when optimizing for brand spanking new screens.
With its @PreviewScreenSizes annotation and machine streaming powered by Firebase, Jetpack Compose additionally made testing the app’s UI throughout varied display sizes simpler. SAP builders look ahead to 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 rapidly and simply carried out new Materials 3 design ideas from the Compose M3 Adaptive library. Materials 3 design emphasizes personalizing the app expertise, bettering interactions with fashionable visible aesthetics.
Compose’s flexibility made changing the usual Materials Theme with their very own customized Fiori Horizon Theme easy, guaranteeing 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 out to be extra fashionable, constructing layouts that adapt to diverse display sizes turns into more and more essential. For SAP Cellular Begin builders, reimagining their app throughout gadgets 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 kind components hitting the market at present 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 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.