Tag Archives: Jetpack Compose

SAP integrated NavigationSuiteScaffold in just 5 minutes to create adaptive navigation UI

Posted by Alex Vanyo – Developer Relations Engineer

SAP Mobile Start is an app that centralizes access to SAP's mobile business suite, a hub for users to keep track of their companies’ processes and data so they can efficiently manage their daily to-dos while on the move.

Recently, SAP Mobile Start developers prioritized building an adaptive app that looks great across devices, including tablets and foldables, to create a more seamless user experience. Using Jetpack Compose and Material 3 design, the team efficiently implemented intuitive, user-friendly features to increase accessibility across its users’ preferred devices.


Adaptive design across devices

With over 300 million daily active users on foldables, tablets, and Chromebooks today, building apps that adapt to varied screen sizes is important for providing an optimal user experience. But simply stretching the UI to fit different screen sizes can drastically alter it from its original form, obscuring the interface and impairing the user experience.

“We focused on situations where we could make better use of available space on large screens,” said Laura Bergmann, UX designer for SAP. “We wanted to get rid of screens that are stretched from edge to edge, full-screen drill-downs or dialogs, and use space more efficiently.”

Now, after optimizing for different devices, SAP Mobile Start dynamically adjusts its layouts by swapping components and showing or hiding content based on the available window size instead of stretching UI elements to match a device's screen.

The SAP team also implemented canonical layouts, common UI designs that split a screen into panes according to its size. By separating content into panes, SAP’s users can manage their business workflows more productively. Depending on the window size class, the supporting pane adjusts the UI without additional custom logic. For example, compact windows typically utilize one pane, while larger windows can utilize multiple.

“Adopting the new canonical layouts from Google helped us focus more on designing unique app capabilities for SAP’s business scenarios,” said Laura. “With the available navigational elements and patterns, we can now channel our efforts into creating a more engaging user experience without reinventing the wheel.”

SAP developers started by implementing supporting panes to create multi-pane layouts that efficiently utilize on-screen space. The first place developers added supporting panes was on the app’s “To-Do” details page. To-dos used to be managed in a single pane, making it difficult to review the comments and tickets simultaneously. Now, tickets and comments are reviewed in primary and secondary panes on the same screen using SupportingPaneScaffold.

We focused on making better use of the available space in large screens. We wanted to move away from UIs that are stretched to adaptive layouts that enhance productivity.” — Laura Bergmann, UX designer at SAP

Fast implementation using Compose Material 3 Adaptive library

SAP Mobile Start is built entirely with Jetpack Compose, Android’s modern declarative toolkit for building native UI. Compose helped SAP developers build new UI faster and easier than ever before thanks to composables, reusable code blocks for building common UI components. The team also used Compose Navigation to integrate seamless navigation between composables, optimizing travel between new UI on all screens.

It took developers only five minutes to integrate the NavigationSuiteScaffold from the new Compose Material 3 adaptive library, rapidly adapting the app’s navigation UI to different window sizes, switching between a bottom navigation bar and a vertical navigation rail. It also eliminated the need for custom logic, which previously determined the navigation component based on various window size classes. The NavigationSuiteScaffold also reduced the custom navigation UI logic code by 59%, from 379 lines to 156.

“Jetpack Compose simplified UI development,” said Aditya Arora, lead Android developer. “Its declarative nature, coupled with built-in support for Material Design and dark theme, significantly increased our development efficiency. By simply describing the desired UI, we've reduced code complexity and improved maintainability.”

SAP developers used live edit and layout inspector in Android Studio to test and optimize the app for large screens. These features were “total game changers” for the SAP team because they helped iterate and inspect layout issues faster when optimizing for new screens.

With its @PreviewScreenSizes annotation and device streaming powered by Firebase, Jetpack Compose also made testing the app's UI across various screen sizes easier. SAP developers look forward to Compose Screenshot Testing being completed, which will further streamline UI testing and ensure greater visual consistency within the app.

Using Jetpack Compose, SAP developers also quickly and easily implemented new Material 3 design concepts from the Compose M3 Adaptive library. Material 3 design emphasizes personalizing the app experience, improving interactions with modern visual aesthetics.

Compose's flexibility made replacing the standard Material Theme with their own custom Fiori Horizon Theme simple, ensuring a consistent visual appearance across SAP apps. “As early adopters of the Compose M3 Adaptive library, we collaborated with Google to refine the API,” said Aditya. “Since our app is completely Compose-based, leveraging the new Compose Material 3 Adaptive library was a piece of cake.”

A list layout adapting to and from a list detail layout depending on the window size

As large-screen devices like tablets, foldables, and Chromebooks become more popular, building layouts that adapt to varied screen sizes becomes increasingly crucial. For SAP Mobile Start developers, reimagining their app across devices using Jetpack Compose and Material 3 design guidelines was simple. Using Android’s collection of tools and resources, creating adaptive UIs for all the new form factors hitting the market today is faster and easier than ever.

“Optimizing for large screens is crucial. The market for tablets, foldables, and Chromebooks is booming. Don't miss out on this opportunity to improve your user experience and expand your app's reach,” said Aditya.

Get started

Learn how to improve your UX by optimizing for large screens and foldables using Jetpack Compose and Material 3 design.

Max implemented UI changes 30% faster using Jetpack Compose

Posted by Tomáš Mlynarič, Developer Relations Engineer

Max®, which launched in the US on May 23, 2023, is an enhanced streaming platform from Warner Bros. Discovery, delivering unparalleled quality content for everyone in the household. Max developers want to provide the best UX possible, and they’re always searching for new ways to do that. That’s why Max developers built the app using Jetpack Compose, Android’s modern declarative toolkit for creating native UI. Building Max’s UI with Compose set the app up for long-term success, enabling developers to build new experiences in a faster and easier way.

Compose streamlines development

Max is the latest app from Warner Bros. Discovery and builds on the company’s prior learnings from HBO Max and discovery+. When Max development began in late 2022, developers had already used Compose to build the content discovery feature on discovery+—one of its core UI features.

“It was natural to continue our adoption of Compose to the Max platform,” said Boris D’Amato, Sr. Staff Software Engineer at Max.

Given the team’s previous experience using Compose on discovery+, they knew it would streamline development and improve the app’s maintainability. In the end, building Max with Compose reduced the app’s boilerplate code, increased the re-usability of its UI elements, and boosted developer productivity overall.

“Compose significantly reduced the time required to implement UI changes, solving the pain point of maintaining a large, complex UI codebase and making it easier to iterate on the app's design and user experience,” said Boris.

Today, Max’s UI is built almost entirely with Compose, and developers estimate that adopting Compose allowed them to implement UI changes 30% faster than with Views. Thanks to the toolkit’s modular nature, developers could build highly reusable components and adapt or combine them to form new UI elements, creating a more cohesive app design.

Compose significantly reduced the time required to implement UI changes, solving the pain point of maintaining a large, complex UI codebase and making it easier to iterate on the app's design and user experience,” — Boris D’Amato, Sr. Staff Software Engineer at Max

More improvements with Compose

Today, Compose is so integral to Max's design that the app's entire UI architecture is designed specifically to support Compose. For example, developers built a system to dynamically render server-driven, editorially curated content and user-personalized recommendations without having to ship a new version of the app. To support this system, developers relied on the best practices when architecting Compose apps, leveraging Compose's smart recompositioning and skipability for the smoothest experience possible.

Much like the discovery+ platform, Compose is also used for Max’s content discovery feature. This feature helps Max serve tailored content to each user based on how they use the app. Thanks to Compose, it was easy for developers to ensure this feature worked as intended because it allowed them to test each part in manageable segments.

“One of the features most impacted by using Compose was our content discovery system. Compose enabled us to create a highly dynamic and interactive interface that adapts in real-time to user context and preferences,” said Boris.

Adapting to users’ unique needs is another reason Compose has impressed Max developers. Compose makes it easy to support the many different screens and form factors available on the market today. With the Window size classes API, Max can scale its UI in real time to accommodate screen size and shape variations for tablets and foldables.

Examples of UX on large and small screens

The future with Compose

Since adopting Compose, the Max team has noticed increased interest from prospective job candidates excited about working with the latest Android technologies.

“Whenever we mention that Max is built using Compose, the excitement in the candidates is palpable. It indicates that we’re investing in keeping our tech stack updated and our focus on the developer experience,” said Boris.

Looking ahead, the Max team plans to lean further into its Compose codebase and make even more use of the toolkit’s features, like animation APIs, predictive gestures, and widgets.

“I absolutely recommend Jetpack Compose. Compose's declarative approach to UI development allows for a more intuitive and efficient design process, making implementing complex UIs and animations easy. Once you try Compose, there’s no going back,” said Boris.

Get started

Optimize your UI development with Jetpack Compose.

Developers for adidas CONFIRMED build features 30% faster using Jetpack Compose

Posted by Nick Butcher – Product Manager for Jetpack Compose, and Florina Muntenescu – Developer Relations Engineer

adidas CONFIRMED is an app for the brand’s most loyal fans who want its latest, curated collections that aren’t found anywhere else. The digital storefront gives streetwear, fashion, and style enthusiasts access to adidas' most exclusive drops and crossovers so they can shop them as soon as they go live. The adidas CONFIRMED team wants to provide users a premium experience, and it’s always exploring new ways to elevate the app’s UX. Today, its developers are more equipped than ever to improve the in-app experience using Jetpack Compose, Android’s modern declarative toolkit for building UI.

Improving the UX with Jetpack Compose

adidas CONFIRMED designers conduct quarterly consumer surveys for feedback from users regarding new app flows and UI enhancements. Their surveys revealed that 80% of the app’s users prefer animated visuals because animations encourage them to explore and interact with the app more. adidas CONFIRMED developers wanted to implement new design elements and animations across the app’s interface to strengthen engagement, but the app’s previous View-based system limited their ability to create engaging UX in a scalable way.

“We decided to build dynamic elements and animations across many of our screens and user journeys,” said Rodrigo Represa, an Android engineer at adidas. “We had an ambitious list of UI updates we wanted to make and started looking for solutions to help us achieve them.”

Switching to Compose allowed adidas CONFIRMED developers to create features faster than ever. The improvement in engineering efficiency has been noticeable, with the team estimating that Compose enables them to create new features roughly 30% faster than with Views. Today, more than 80% of the app’s UI has been migrated to Compose.

“I can build the same feature with Compose about 30% faster than with Views.” — Rodrigo Represa, Android engineer at adidas

Innovating the in-app experience

As part of the app’s new interface update, adidas CONFIRMED developers created an exciting, animated experience called Shoes Tournament. This competition positions different brand-collaborator sneakers head to head in a digital tournament where users vote for their favorite shoe. It took two developers only three months to build this feature from the ground up using Compose. And users loved it — it increased the app’s weekly active users by 8%.

UX screen of shoe tournament. Top shoe is clicked. Text reads: It took adidas' Android devs only 3 months to build this feature from the ground up using Compose.

Before transitioning to Compose, it was hard for the team to customize the adidas CONFIRMED app to incorporate branding from its collaborators. With Compose, it’s easy. For instance, the app’s developers can now create a dynamic design system using CompositionLocals. This functionality helps developers update the app's appearance during collab launches, providing a more appealing user experience while maintaining a consistent and clean design.

One of the most exciting animations adidas CONFIRMED developers added utilized device sensors. Users can view and interact with the products they’re looking at on product display pages by simply moving their devices, just as if they were holding the product in real life. Developers used Compose to create realistic lighting effects for the animation to make the viewing experience more engaging.

An easier way to build UI

Using composables allowed adidas CONFIRMED developers to reuse existing components. As both the flagship adidas app and the adidas CONFIRMED app are part of the same monorepo, engineers could reuse composables across both apps, like forms and lists, enabling them to implement new features quickly and easily.

“The accelerated development with Compose provided our team of seven with more time, enabling us to strike a healthy balance between delivering new functionalities and ensuring the long-term health and sustainability of our app,” said Rodrigo.

Compose also helped to improve app stability and performance for the team. They noticed a significant reduction in app-related crashes, and have seen virtually no UI-related crashes, since migrating the app to Compose. The team is proud to provide a 99.9% crash-free user experience.

Compose’s efficiency not only accelerated development, but also helped us achieve our business goals.” — Rodrigo Represa, Android engineer at adidas

A better app built with the future in mind

Compose opened doors to implementing new features faster than ever. With Compose’s clean and concise usage of Kotlin, it was easy for developers to create the ambitious and engaging interface adidas CONFIRMED users wanted. And the team doesn’t plan to stop there.

The adidas CONFIRMED team wants to lean further into its new codebase and fully adopt Compose moving forward. They also want to bring the app to new screens using more of the Compose suite and are currently developing an app widget using Jetpack Glance. This new experience will provide users with a streamlined feed of new product information for an even more efficient user experience.

“I recommend Compose because it simplifies development and is a more intuitive and powerful approach to building UI,” said Rodrigo.

Get started

Optimize your UI development with Jetpack Compose.

Top 3 Updates with Compose across Form Factors at Google I/O ’24

Posted by Chris Arriola – Developer Relations Engineer

Google I/O 2024 was filled with lots of updates and announcements around helping you be more productive as a developer. Here are the top 3 announcements around Jetpack Compose and Form Factors from Google I/O 2024:

#1 New updates in Jetpack Compose

The June 2024 release of Jetpack Compose is packed with new features and improvements such as shared element transitions, lazy list item animations, and performance improvements across the board.

With shared element transitions, you can create delightful continuity between screens in your app. This feature works together with Navigation Compose and predictive back so that transitions can happen as users navigate your app. Another highly requested feature—lazy list item animations—is also now supported for lazy lists giving it the ability to animate inserts, deletions, and reordering of items.

Jetpack Compose also continues to improve runtime performance with every release. Our benchmarks show a faster time to first pixel of 17% in our Jetsnack Compose sample. Additionally, strong skipping mode graduated from experimental to production-ready status further improving the performance of Compose apps. Simply update your app to take advantage of these benefits.

Read What’s new in Jetpack Compose at I/O ‘24 for more information.


#2 Scaling across screens with new Compose APIs and Tools

During Google I/O, we announced new tools and APIs to make it easier to build across screens with Compose. The new Material 3 adaptive library introduces new APIs that allow you to implement common adaptive scenarios such as list-detail, and supporting pane. These APIs allow your app to display one or two panes depending on the available size for your app.

Watch Building UI with the Material 3 adaptive library and Building adaptive Android apps to learn more. If you prefer to read, you can check out About adaptive layouts in our documentation.

We also announced that Compose for TV 1.0.0 is now available in beta. The latest updates to Compose for TV include better performance, input support, and a whole range of improved components that look great out of the box. New in this release, we’ve added lists, navigation, chips, and settings screens. We’ve also added a new TV Material Catalog app and updated the developer tools in Android Studio to include a new project wizard to get a running start with Compose for TV.

Finally, Compose for Wear OS has added features such as SwipeToReveal, an expandableItem, and a range of WearPreview supporting annotations. During Google I/O 2024, Compose for Wear OS graduated visual improvements and fixes from beta to stable. Learn more about all the updates to Wear OS by checking out the technical session.

Check out case studies from SoundCloud and Adidas to see how apps are leveraging Compose to build their apps and learn more about all the updates for Compose across screens by reading more here!


#3 Glance 1.1

Jetpack Glance is Android’s modern recommended framework for building widgets. The latest version, Glance 1.1, is now stable. Glance is built on top of Jetpack Compose allowing you to use the same declarative syntax that you’re used to when building widgets.

This release brings a new unit test library, Error UIs, and new components. Additionally, we’ve released new Canonical Widget Layouts on GitHub to allow you to get started faster with a set of layouts that align with best practices and we’ve published new design guidance published on the UI design hub — check it out!

To learn more about using Glance, check out Build beautiful Android widgets with Jetpack Glance. Or if you want something more hands-on, check out the codelab Create a widget with Glance.


You can learn more about the latest updates to Compose and Form Factors by checking out the Compose Across Screens and the What’s new in Jetpack Compose at I/O ‘24 blog posts or watching the spotlight playlist!

SoundCloud supported more screens using 45% less code with Jetpack Compose

Posted by Chris Arriola, Developer Relations Engineer and Nick Butcher, Product Manager for Jetpack Compose

As one of the largest audio streaming platforms in the world, SoundCloud supports a network of creators who use its service to upload and promote their music. SoundCloud’s developers are always exploring ways to improve its user experience, which means going beyond simply building the best mobile app. The team also wants to make SoundCloud available on as many form factors as possible so users can easily access and listen to SoundCloud in any situation and on the devices that work best for them.

That’s why the SoundCloud team adopted Jetpack Compose, Android’s modern declarative toolkit for building native UI. Compose enabled SoundCloud engineers to not only expand the app to more form factors, but also streamline new feature development—in some cases reducing nearly half the code.

Compose helped us reach new users and markets, ultimately increasing our global reach” — Vitus Ortner, Android engineer at SoundCloud


Simplified UI development with Compose

Before migrating to Compose, building UI was much slower for SoundCloud developers because they had to constantly switch context between Kotlin and XML. This also made managing and maintaining its design system much more difficult. The team’s engineers wanted to find a simpler way to write code, and they knew Compose would help them get there.

“We started adopting Compose to quickly build dynamic layouts using Kotlin, the language we love,” said Vitus Ortner, an Android engineer at SoundCloud. “We wanted to empower our engineers to effectively create rich UIs through Compose.”

SoundCloud engineers overhauled the app’s design system with Compose and can now build new features using 45% less code on average. Compose’s concise Kotlin syntax and its ability to create reusable UI made design and maintenance much easier for the team. Prototyping new features was also simpler thanks to Compose’s declarative approach, as well as its live edit and UI preview features.

“We implemented a new content discovery feature with an interactive vertical feed layout. We used Compose to prototype, and it enabled us to iterate fast even when we changed our design ideas daily,” said Vitus. “That wouldn’t have been possible with Views.”

Compose’s interoperability with Views made it easier for developers to migrate SoundCloud’s design system to the new toolkit because they could do it gradually. Because SoundCloud uses a model–view–viewModel architecture, developers could reuse the app’s old view models in the new Compose framework. This meant they only needed to migrate the app’s View-based layouts to Compose, rather than rewrite the entire UI layer.

“Compose helped us reach new users and markets, ultimately increasing our global reach” — Vitus Ortner, Android engineer at SoundCloud

Optimizing for more form factors with Compose

Switching to Compose enabled developers to do more than streamline the app’s codebase. It also made supporting multiple form factors easier. With Compose, SoundCloud engineers were able to more easily bring the app to tablets, TVs, cars, and wearables.

“We’re using Compose across all form factors in the Android ecosystem,” said Vitus. “We implemented our Wear OS and TV apps from the ground up with Compose, which allowed us to rapidly iterate and ship new products in a fraction of the time it would have taken before.”

To adapt the mobile experience to a variety of screen sizes while maintaining interoperability with existing code, SoundCloud developers provide different XML layouts to combine existing View code with newer Compose components. Easy-to-implement features like this helped the team quickly build experiences across different devices, including optimizing SoundCloud for cars and tablets.

With these improvements, SoundCloud engineers built their Wear OS app and TV app from the ground up in just four months using Compose. According to Vitus, this “would’ve been unthinkable” using their previous system.

“Our mobile Compose skills transferred directly to Compose for other form factors,” said Vitus. “The concepts and most APIs are the same across form factors. We still needed to learn some form factor-specific APIs, like ScalingLazyColumn for Wear OS and TvLazyColumn for TVs.”

UI example

Future investment in Compose

By migrating its Android app to Compose, SoundCloud developers improved productivity, simplified the app’s code, and established smoother development processes for new features and experiences. Switching to Compose also helped SoundCloud expand to more form factors, creating new ways for users to access the platform.

“Compose helped us reach new users and markets, ultimately increasing our global reach,” said Vitus. “We're fully committed to Compose and plan to use it for all projects in the future.”


Get started

Optimize your UI development with Jetpack Compose.

Google Drive cut code and development time in half with Jetpack Compose and new architecture

Posted by Nick Butcher – Product Manager for Jetpack Compose, and Florina Muntenescu – Developer Relations Engineer

As one of the world’s most popular cloud-based storage services, Google Drive lets people do more than just store their files online. With Drive, users can synchronize, share, search, edit, and even pin specified files and content for safe and secure offline use.

Recently, Drive’s developers revamped the application’s home screen to provide a more seamless experience across devices, matching updates made to Google Drive’s web version. However, the app’s previous architecture and codebase would’ve prevented the team from completing the updates in a timely manner.

Instead of struggling with the app’s previous tech stack to implement the update, the Drive team rebuilt the home page from the ground up using Android’s recommended architecture and Jetpack Compose, Android’s modern declarative toolkit for creating native UI.

Compose, combined with architecture improvements, cut our development time nearly in half.” — Dale Hawkins, Senior software engineer and tech lead at Google Drive

Experimenting with Kotlin and Compose

The Drive team experimented with Kotlin — which the Compose toolkit is built with — for several months before planning the app’s home screen rebuild. Drive’s developers liked Kotlin’s improved syntax and null enforcement, making it easier to produce code.

“We had been using RxJava, but started looking into replacing that with coroutines,” said Dale Hawkins, the features team lead for Google Drive. “This led to a more natural alignment between coroutines and Jetpack Compose. After a deep dive into Compose, we came away with a clear understanding of how Compose has numerous benefits over the Views-based approach.”

Following the Kotlin exploration, Dale experimented with Jetpack Compose. “I was pleased with how easy it was to build the UI using Compose. So I continued the experiment after that week,” said Dale. “I eventually rewrote the feature using Compose.”

Using Compose

Shortly after experimenting with Jetpack Compose, the Drive team decided to use it to completely rebuild the app’s home screen UI.

“We wanted to make some major changes to match the ones being done for the web version, but that project had a several-month head start. We wanted to release the Android version shortly after the web changes went live to ensure our users have a seamless Google Drive experience across devices,” said Dale.

The Drive team's experimentation and testing with Jetpack Compose showed that the new toolkit was powerful and reliable and that it would enable them to move faster. With this in mind, the Drive team decided to step away from their old codebase and embrace Jetpack Compose for the app’s home screen update. Not only would it be quicker and easier, but it would also better prepare the team to easily make future UI changes.

Using Android’s guidance for architecture

Before going all-in with Jetpack Compose, Drive developers wanted to restructure the application by implementing a completely new app architecture. Drive developers followed Android’s official architecture guidance to apply structural changes, paving the way for the new Kotlin codebase.

“The recommended architecture reinforces good separation between layers,” said Quintin Knudsen, an Android engineer for Google Drive. “We work in a highly dynamic environment and need to be able to adjust to any app changes. Using well-defined and independent layers helps isolate any changes or UI requirements. The recommendations from Android offered sound ways to structure the layers.” With a clear separation between the app’s data and UI layers, developers could work in parallel to significantly speed up testing and development.

Drive developers also relied on Mappers and UseCases when creating the new architecture. These patterns allowed them to create flexible code that is easier to manage. They also exposed flows from their ViewModels to make the UI respond immediately to any data changes, making it much simpler to implement and understand UI updates.

Less code, faster development

With the app’s newly improved architecture and Jetpack Compose, the Drive team was able to develop the app’s new home screen in less than half the time that they expected. They also implemented the new code and finished quality assurance testing nearly seven weeks ahead of schedule.

“Thanks to Compose, we had the groundwork done within a couple of weeks. We delivered a great implementation over a month ahead of schedule, and it’s been praised by product, UX, and even other engineering teams,” said Dale.

Despite having fewer features, the original home screen required over 12,000 lines of code. The new Compose-based home screen has many new features and only required 5,100 lines of code—a 57% reduction. Having less code makes it much easier for developers to maintain the app and implement any updates.

Testing the new UI in Jetpack Compose also required significantly less code. Before Compose, Drive developers used roughly 9,000 lines of code to test about 62% of the UI. With Compose, it took only 2,200 lines to test over 80% of the new UI.

The original home screen required over 12,000 lines of code. The Compose-based home screen only required 5,100 lines of code. That’s a 57% reduction.” — Dale Hawkins, Senior software engineer and tech lead at Google Drive

Looking forward

A new and improved app architecture paired with Jetpack Compose allowed Drive developers to rebuild the app’s home screen UI faster and easier than they could’ve imagined. The Drive team plans to expand its use of Compose within the application for things like supporting large dynamic displays and text resizing.

“As we work on new projects, we’re taking the opportunity to update older UI code to make use of our new architecture and Compose. The new code will be objectively better and features will be easier to write, test, and maintain,” said Dale.

Get started

Improve app architecture using Android’s official architecture guidance and optimize your UI development with Jetpack Compose.

#TheAndroidShow: the latest from MWC, Gemini Nano, Android 15 and more!

Posted by Anirudh Dewani, Director of Android Developer Relations


Last week, Android device makers released a slew of new devices, and today we’re unpacking what that means for developers, as well as the latest in Gemini Nano, Android 15, Jetpack Compose and more, in another episode of our quarterly show, #TheAndroidShow:

The lastest wearables and foldables – get building!

Android device makers unveiled their latest wearables and foldables last week at Mobile World Congress, and we were on the ground in Barcelona taking a look at those new devices and how you can get started building on top of them. A few of our favorites:

    • Xiaomi Watch 2,the latest smart watch from the Xiaomi team. This device is powered by Wear OS by Google and provides upgraded camera, fitness, and sleep experiences to allow users to get the most from their device.
    • PORSCHE DESIGN HONOR Magic V2 RSR, the world’s thinnest inward foldable smartphone. This is the latest foldable for Android and was designed with the user experience at the forefront, including human-centric eye comfort technology.

Compose is an amazing way to build apps for your users across form factors. Compose for Wear OS and the upcoming adaptive layouts for large screens help devs bring their apps to life with less code, powerful tools, and intuitive APIs. Check out the Wear OS and Large Screen galleries, where you can find UX inspiration and design guidance tailored to your type of app.




Behind the scenes, with Gemini Nano and AICore

With all of the excitement around generative AI, it could be daunting to know where to start. So in today’s show, we’re taking you behind the scenes with Gemini Nano, Google’s most efficient model built for on-device tasks, and AICore, Android’s system service for on-device foundation models. And we’re spotlighting how the team that builds the Recorder app used Gemini Nano to help summarize users’ voice memos on-device and with privacy in mind. And here’s the best part: the team built the feature in a short time with only a small number of engineers.




Now in Android

We celebrated the 100th episode of Now in Android, covering the latest developer news, including:




And that’s a wrap on another episode of our quarterly show, #TheAndroidShow. But the conversation continues on YouTube, X and LinkedIn: tell us your favorite part, or what you’d like us to dive into next time on our quarterly episode. And before we sign off, you can watch the full playlist, with the latest in Android developer news, here.

New goodies from Android, Wearables at Mobile World Congress + tune in to a new episode of #TheAndroidShow next week!

Posted by Anirudh Dewani, Director of Android Developer Relations

Earlier today, at Mobile World Congress (MWC), an annual conference showcasing the latest in mobile, Android and our partners unveiled a range of new goodies, including new wearables, foldables, as well as a number of new features for Android users. Keep reading below to see how you, as developers, can take advantage of these new features and devices that are being released. And in just over a week, on Thursday March 7 at 10AM PT, we’ll be kicking off another episode of #TheAndroidShow, our quarterly live show on YouTube and on developer.android.com, where we’ll dive more into these topics.


Meet the new watch from OnePlus and how we’re boosting power with the Wear OS hybrid interface

Wearables are on display across MWC this week, and one of our favorites is OnePlus Watch 2, powered with the latest version of Wear OS (Wear OS 4). As part of our ongoing work to improve the Wear OS by Google user experience, we’ve made fundamental changes to the platform and substantially expanded the capabilities of the Wear OS hybrid interface that improve two key areas: power and performance. As a developer, you can leverage existing Wear OS APIs to get underneath optimizations without any added effort – no code changes required! You can read more about the updates here.

Images of three people wearing the OnePlus Watch 2

A few new features for Android users

Google released 9 new features Android users can take advantage of across Google apps, you can read more about those features here. For developers, we wanted to highlight a few ways you can take advantage of this news across experiences you build into your apps:

    • More places for users to see their Health Connect data, now in the Fitbit app: With permission from your users, Health Connect is a central way to connect and sync their favorite health and fitness apps, see all their data in one place, and stay in control of their privacy. By setting up Health Connect in the Fitbit mobile app for Android, users will have an overview of their health and fitness data from across their apps in one place. You can join developers like Peloton, ŌURA, and Lifesum who are using Health Connect to provide their users with deeper health and fitness insights, get started now!
Image that reads 'New updates on Android' with pictures of a smart watch, laptop, and Android Auto

A new episode of #TheAndroidShow, live on March 7 at 10AM PT. Send us your #AskAndroid questions now!

You can join us on March 7 at 10AM PT for a new episode of #TheAndroidShow. In this quarterly show, we’ll unpack the latest Android foldables and large screens for you to get building on, plus a behind-the-scenes on Gemini Nano and AICore.

We’ll have a live #AskAndroid Q&A with the team about building Android; you can ask us about building excellent apps across devices, Android 15, Compose, Gemini and more, using #AskAndroid on X or on YouTube. Our experts are ready to answer your questions live!

#TheAndroidShow: March 7 at 10AM PT, broadcast live on YouTube and d.android.com/events/show!

What’s new in the Jetpack Compose January ’24 release

Posted by Ben Trengrove, Android Developer Relations Engineer

Today, as part of the Compose January ‘24 Bill of Materials, we’re releasing version 1.6 of Jetpack Compose, Android's modern, native UI toolkit that is used by apps such as Threads, Reddit, and Dropbox. This release largely focuses on performance improvements, as we continue to migrate modifiers and improve the efficiency of major parts of our API.

To use today’s release, upgrade your Compose BOM version to 2024.01.01

implementation platform('androidx.compose:compose-bom:2024.01.01')

Performance

Performance continues to be our top priority, and this release of Compose has major performance improvements across the board. We are seeing an additional ~20% improvement in scroll performance and ~12% improvement to startup time in our benchmarks, and this is on top of the improvements from the August ‘23 release. As with that release, most apps will see these benefits just by upgrading to the latest version, with no other code changes needed.

The improvement to scroll performance and startup time comes from our continued focus on memory allocations and lazy initialization, to ensure the framework is only doing work when it has to. These improvements can be seen across all APIs in Compose, especially in text, clickable, Lazy lists, and graphics APIs, including vectors, and were made possible in part by the Modifier.Node refactor work that has been ongoing for multiple releases.

There is also new guidance for you to create your own custom modifiers with Modifier.Node.

Configuring the stability of external classes

Compose compiler 1.5.5 introduces a new compiler option to provide a configuration file for what your app considers stable. This option allows you to mark any class as stable, including your own modules, external library classes, and standard library classes, without having to modify these modules or wrap them in a stable wrapper class. Note that the standard stability contract applies; this is just another convenient method to let the Compose compiler know what your app should consider stable. For more information on how to use stability configuration, see our documentation.

Generated code performance

The code generated by the Compose compiler plugin has also been improved. Small tweaks in this code can lead to large performance improvements due to the fact the code is generated in every composable function. The Compose compiler tracks Compose state objects to know which composables to recompose when there is a change of value; however, many state values are only read once, and some state values are never read at all but still change frequently! This update allows the compiler to skip the tracking when it is not needed.

Compose compiler 1.5.6 also enables “intrinsic remember” by default. This mode transforms remember at compile time to take into account information we already have about any parameters of a composable that are used as a key to remember. This speeds up the calculation of determining if a remembered expression needs reevaluating, but also means if you place a breakpoint inside the remember function during debugging, it may no longer be called, as the compiler has removed the usage of remember and replaced it with different code.

Composables not being skipped

We are also investing in making the code you write more performant, automatically. We want to optimize for the code you intuitively write, removing the need to dive deep into Compose internals to understand why your composable is recomposing when it shouldn’t.

This release of Compose adds support for an experimental mode we are calling “strong skipping mode”. Strong skipping mode relaxes some of the rules about which changes can skip recomposition, moving the balance towards what developers expect. With strong skipping mode enabled, composables with unstable parameters can also skip recomposition if the same instances of objects are passed in to its parameters. Additionally, strong skipping mode automatically remembers lambdas in composition that capture unstable values, in addition to the current default behavior of remembering lambdas with only stable captures. Strong skipping mode is currently experimental and disabled by default as we do not consider it ready for production usage yet. We are evaluating its effects before aiming to turn it on by default in Compose 1.7. See our guidance to experiment with strong skipping mode and help us find any issues.

Text

Changes to default font padding

This release now makes the includeFontPadding setting false by default. includeFontPadding is a legacy property that adds extra padding based on font metrics at the top of the first line and bottom of the last line of a text. Making this setting default to false brings the default text layout more in line with common design tools, making it easier to match the design specifications generated. Upon upgrading to the January ‘24 release, you may see small changes in your text layout and screenshot tests. For more information about this setting, see the Fixing Font Padding in Compose Text blog post and the developer documentation.

Line height with includeFontPadding as false on the left and true on the right.

Support for nonlinear font scaling

The January ‘24 release uses nonlinear font scaling for better text readability and accessibility. Nonlinear font scaling prevents large text elements on screen from scaling too large by applying a nonlinear scaling curve. This scaling strategy means that large text doesn't scale at the same rate as smaller text.

Drag and drop

Compose Foundation adds support for platform-level drag and drop, which allows for content to be dragged between apps on a device running in multi-window mode. The API is 100% compatible with the View APIs, which means a drag and drop started from a View can be dragged into Compose and vice versa. To use this API, see the code sample.

Moving image illustrating drag and drop feature

Additional features

Other features landed in this release include:

    • Support for LookaheadScope in Lazy lists.
    • Fixed composables that have been deactivated but kept alive for reuse in a Lazy list not being filtered by default from semantics trees.
    • Spline-based keyframes in animations.
    • Added support for selection by mouse, including text.

Get started!

We’re grateful for all of the bug reports and feature requests submitted to our issue tracker — they help us to improve Compose and build the APIs you need. Continue providing your feedback, and help us make Compose better!

Wondering what’s next? Check out our roadmap to see the features we’re currently thinking about and working on. We can’t wait to see what you build next!

Happy composing!

Meta built threads in only 5 months using Jetpack Compose

Posted by Yasmine Evjen – Product Manager, and Florina Muntenescu – Developer Relations Engineer

Following its release in July of 2023, Meta’s Threads became the most rapidly downloaded app ever with over 100 million downloads in its first week. Meta created the new text-based social media platform as a place to build connections and have meaningful conversations. To ensure the app was set up for success at its release and into the future, Threads developers used Jetpack Compose, Android’s modern declarative toolkit for building UI.

An easier way to build UI with Jetpack Compose

Threads is built on top of existing code from its sister app Instagram, which uses Views for its UI development. After positive reports from other Android developers about Compose, and following internal testing and an assessment of the toolkit’s benefits, Threads engineers opted to build the all-new app from scratch using Compose. By using Compose, the team could move faster and better prepare the app for any future updates.

“We decided Jetpack Compose would be our target UI framework going forward,” said Richard Zadorozny, a software engineer at Threads. “We wanted to build the new app UI from scratch using Compose because it would enable us to move faster than refactoring a large application like Instagram.”

Even though most of Threads’ engineers had no prior experience using Compose, they found it easy to get started and learn the new toolkit. With Compose, Threads engineers built and shipped the app in only five months. This greatly exceeded the team’s speed expectations for developing a high-quality Android application — especially of this complexity and scale. The team attributes much of this speed to the flexibility and decoupling Compose provided.

Compose helped Threads engineers streamline the development of new product features. The modular nature of the toolkit let Threads developers iterate on the app as it evolved and teed up the app’s architecture for future development. Compose also helped engineers build user-friendly features that adhered to Material Design guidelines.

Threads was built and shipped in five months, exceeding our speed expectations for building a high-quality Android app of this complexity and scale.” — Richard Zadorozny, software engineer at Threads

Going all in with Compose

Threads engineers developed almost all of the app’s surfaces using Compose. In the end, they built over 90% of Threads using Compose, including the app’s activity feed, navigation, search, profiles, onboarding page, shared element transitions, media viewer, settings, and more.

While Compose did mostly everything Threads engineers needed it to, it was still easy for them to interoperate with Views as necessary. They used Views for Threads’ videos and the media picker that’s available when creating a new post.

Compose provides modern APIs that ship directly with an app. Because of this, Threads engineers spent less time worrying about backward compatibility, missing features, or differing functionality between different versions of Android. Instead, they could focus their energy on developing a high-quality application.

“Compose’s design encourages a modular, plug-in approach to development,” said Richard. “Modifiers make all sorts of functionality inherently reusable, so you no longer have to subclass complicated ViewGroups or lump all sorts of logic into one place.”

Moving image shows Jetpack Compose/Modifiers code appears on screen

The Threads team used Modifiers for the app’s custom click behaviors and its thread line illustration that appears on the left side of posts. Modifiers also allowed Threads developers to easily add the app’s branding to any elements and ensured they were properly aligned on-screen.

Threads engineers also ensured the app was ready for users across platforms at launch. That meant making sure Threads resizes to work on different devices, like large screens and foldables. The adaptive layouts Compose offers ensure an app responds properly to different screen sizes, orientations, and form factors. This made it easier for the Threads app to “just work” for configuration changes, according to Richard.

For developers who are building new apps, I would definitely recommend using Compose. Not only is it enjoyable… it sets your team up for success in the future.” — Richard Zadorozny, software engineer at Threads

Compose is the ‘future’ of Android UI

Compose offered Threads developers an easier way to design and create UI while preparing the app’s architecture for the future. With its intuitive composables and modern declarative framework, Compose made end-to-end development smooth and gave Threads developers confidence that updating the app would be easy.

Given the positive results the team saw with the release of Threads, Meta plans to expand its use of Compose to some of Instagram’s most important surfaces, like the app’s main feed.

“It’s reached a point where Jetpack Compose can do almost everything you’ll need, and its modular nature makes it easy to make most of the changes you would need to fill the gaps,” said Richard. “I believe Compose is the future of Android UI development, and it’s just fun!”

Get started

Optimize your UI development with Jetpack Compose.