Tag Archives: Jetpack Compose

What’s new in Jetpack Compose

Posted by Jolanda Verhoef, Android Developer Relations Engineer

We launched Jetpack Compose over a year ago, and have been busy improving it ever since. We’ve added new features and invented powerful tools to make your experience developing Android UI as productive, intuitive and fun as possible. So, if you're starting a new app, it's time to write it with Compose! With Material Design 3 support, new Bill Of Materials, Compose WearOS Stable and Android TV (alpha), Compose Camp, and many other pieces of news… It's an exciting release!

Compose in the Community

In the last year, we’ve seen many companies developing with Compose at scale, implementing new features and migrating screens from views to Compose. For example, we talked to the engineers at Lyft, who told us that over 90% of their new feature code is written in Compose, and moving to Compose made their code much simpler and easier to maintain. They also shared “We rewrote the button component in our app using Compose. Before it required 800 lines of code across three files plus 17 different XML files, and it is now down to a single Kotlin file with 300 lines of code. This is a 60% reduction in the Kotlin code alone“. The team at Zepeto has also been implementing Compose across many features, and are enjoying the experience, as “Compose simplified our UI layer logic, making it easier to understand code written by my colleagues.”
It’s great to see how these teams experience faster development cycles, and also feel their UI code is more concise and readable. And they’re not the only ones. Since this year’s Google I/O, the number of top 1000 apps on Google Play using Compose has increased by 50%! To help your team follow in the footsteps of the teams at Lyft, Zepeto, and others, we published a guide on How to Adopt Compose for your Team. It outlines how and where to start, and shows the areas of development where Compose can bring huge added value.


Compose, October ‘22 release

Today we’re releasing a new stable version of Compose, with some exciting features and news.

First of all, we’ve heard from you how it can be daunting to track versions across different artifacts that might go on different release schedules, so we’re now publishing, together with every Stable release of any of the Compose artifacts, a Bill of Materials, or BOM, to make your life easier.

Our first BOM release, Compose October ‘22, brings support for Staggered Grids, drawing Text directly to Canvas, Pull to Refresh, as well as performance improvements and bug fixes.


Compose Bill of Materials

A BOM is a Maven module that declares a set of libraries with their versions. It will greatly simplify the way you define Compose library versions in your Gradle dependencies block, especially now that we moved the various Jetpack Compose libraries to independent versioning schemes. Instead of defining each version separately, which can become cumbersome and prone to errors when library versions start to differ, you now only need to define one BOM version and all Compose library versions will be extracted from that. We will publish a new version of the BOM every time a Compose artifact has a new stable release, so moving from stable release to stable release is going to be much simpler.

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Declare dependencies for the desired Compose libraries without versions
    implementation 'androidx.compose.foundation:foundation'
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'

    ...
}


We’ve added the instructions on how to add the Compose BOM to our Quick start guide. Note that you can still choose to define your dependencies using hard-coded versions. The BOM is added as a useful way to simplify dependencies and make upgrades easier.
    

Modifiers on overdrive

Behind the scenes, we’re always working on improving Compose performance. The October ‘22 release includes a major refactor of how Modifiers work under the hood. While you will not notice anything changing in the APIs, this refactor paves the way for greatly improving Modifier performance. Learn more about the rationale behind the changes, and what’s planned for the near future in the ADS talk Compose Modifiers deep dive.


Popup & Dialog elevation change

Accessibility is always a first-class citizen for Compose, and this release contains a behavior change that helps fix an Accessibility bug with Popups and Dialogs: their maximum elevation is decreased from 30dp to 8dp. Your app will be impacted only if it uses a custom dialog or popup implementation with an elevation higher than 8dp. The release notes contain more information about the change, including a way to override the new behavior as an interim solution (keep in mind that we always recommend using 8dp maximum when customizing popups or dialogs).


New features

We added a lot of new functionality to Compose. Here are some highlights:

Compose Material 3 stable

Today we also announce the first stable release of the Compose Material 3 library! You can build an app using Compose and theme it according to Material Design 3, our latest iteration of Material Design. Use Material Design 3 to further customize your app’s colors, typography and shapes to make your brand stand out! The library contains fresh and updated versions of many UI components, such as buttons, cards, checkboxes, switches, navigation bars, drawers, and many more, with support for others on its way. See a list of all the supported components in the documentation and learn more in this blog post.

To help you adopt Material 3 check out our new migration guide with clear guidance on how Material 2 concepts translate to Material 3. The default template in Android Studio Flamingo now uses Material 3, to get you up and running in no time. We’ve also updated many of our sample apps, tutorials, templates, and codelabs to use Material 3 so you can learn as you go!

New tools

Developing your app using Jetpack Compose is much easier with the new and improved tools around it. We’ve added tons of new features to Android Studio to improve your workflow and efficiency:

Android Studio Dolphin is the latest stable release, bringing you:

  • Animation Coordination
  • Multipreview annotations
  • Recomposition counts in Layout Inspector

Android Studio Electric Eel contains beta features, like:

  • Live Edit (experimental)
  • Composition rendering highlighting
  • Configuring Preview devices
  • Live updates in Previews

Android Studio Flamingo contains canary features such as:

  • New project templates use Compose and Material 3 by default
  • Live Edit turned on by default
  • Improved composition tracing to help you better inspect performance issues.

Relay

Today we also launch the first alpha version of Relay, a design-to-code solution for improving designer-developer collaboration. Designers create UI components using the Figma plugin, and developers use the Android Studio plugin to automatically use these components in their apps. The generated components are composable functions and can be integrated directly into your Compose app. Learn more about Relay in the documentation.


Compose on WearOS, Large Screens and TV

In July we released the first Stable version of Wear Compose, ready to build production apps. Compose for Wear OS is our recommended approach for building UIs for Wear OS apps. We’ve included over twenty Compose UI components that were designed specifically for Wearables, like TimeText, PositionIndicator, and ScalingLazyColumn.

We’re also continuing to make it easier to design, develop, and test apps for large screens such as foldables, tablets, and Chrome OS. The material3-window-size-class library graduated to Stable, giving you a set of opinionated viewport breakpoints to work with. Large screen designs often contain staggered grids, and the addition of LazyHorizontalStaggeredGrid and LazyVerticalStaggeredGrid will help implement these.



Feedback from the Android community always moves us forward. With your input we have updated our roadmap, focusing on areas that will help you implement Compose successfully. We’re now focusing on supporting more advanced use cases, covering more Material 3 components, improving platform support, tooling and performance.


New and updated guidance

No matter where you are in your learning journey, we’ve got you covered! We added and revamped a lot of the guidance on Compose:

Compose Camp

Running from September through December is a world-wide community-organized event series called Compose Camp! With both a beginner and an experienced track, developers of all levels can join Compose Camp to learn together with others. We already see lots of traction, with many videos being posted by GDGs and GDSCs all over the globe, and many events hosted on our Community platform.


Happy Composing!

We hope that you’re as excited by these developments as we are! If you haven't started yet, it's time to learn Jetpack Compose and see how your team and development process can benefit from it. Get ready for improved velocity and developer productivity. Happy Composing!

Lyft reduced their code for UI components by as much as 60% using Jetpack Compose

Learn why Lyft plans to shift entirely to Compose for future feature development

Lyft reduced their code for Ul components by as much as 60% using Jetpack Compose

Lyft, one of the largest ride-sharing companies in the U.S., is practically synonymous with one-tap transportation. Lyft has far outgrown its ride-hailing beginnings to now include everything from delivery services to additional modes of transportation such as bikes and scooters. With more than 50 million downloads on Google Play, Lyft’s engineers are always exploring new ways to streamline the product's features and functionality to improve the user experience.

To keep up with the modern trends in mobile development, multiple teams at Lyft used Jetpack Compose to replace some of their legacy frameworks, reduce boilerplate code, and streamline their workflow. They also used it for feature rollouts and have benefited from the implementation.

Less code, easier UI feature rollouts

Lyft engineers adopted Compose for a UI overhaul and used a plugin framework that allowed developers to break down features into self-contained reusable modules. “Over 90% of all new feature code is now developed in Compose,” said Anton Tananaev, staff Android engineer at Lyft. This is in large part because Compose makes implementing new features a faster—and easier—process for engineers.

Lyft has a unified design across its web and mobile apps as well as a Figma library of components, making it quick and easy to develop new UI features using those building blocks. Lyft's internal UI framework, called Lyft Product Language (LPL), allows them to easily use their unified design system across Android, iOS, and the web. The LPL includes common UI components, like visual elements within the app, and more complex panels and dialogs. To ensure Lyft’s riders and drivers have the best user experience, this design system is implemented individually on each platform. Compose is built with the flexibility to support Material Design, custom design systems, and everything in between, so Lyft was able to easily build these UI components to meet their custom visual requirements. On top of that, using Compose instead of views has dramatically decreased the lines of code required. A button component on the Lyft app has gone from around 800 lines of code across three files plus 17 different XML files down to a single Kotlin file with 300 lines of code. They were able to reduce the lines of code by nearly two-thirds of what was needed with Views!

The team that’s working on the server-driven UI framework at Lyft also adopted Compose. Current systems only support static API response, but one key reason Lyft engineers prefer Compose is because it supports dynamic UI changes from the backend. Compose will automatically detect changes, so no additional client code is required to support dynamic content.

A welcome improvement for engineers

Moving over to Compose allowed Lyft to increase developer productivity and velocity. Not only do developers need to write less code in Compose than with Views, they find it easier to understand and maintain, and faster to ship any needed changes. This translates to more time developing new features for Lyft drivers and riders, and less time fixing old features.

Lyft created their own unidirectional architecture, splitting the aspects of a UI into multiple pieces. That means they can pass the state needed for a UI independently of the actions to perform all while still taking advantage of other technologies used throughout their code like RxJava. Lyft's previous plugin system required several files with a lot of boilerplate code just to create a basic reusable component, but with Compose it can be a single file or even a simple Composable function in some cases.

Developers at Lyft like Compose so much that nearly all new features are being developed in Compose, and they see it as the future of Android. Even in job interviews, Android engineer candidates show excitement at the possibility of using Compose and see it as a key indicator that Lyft is keeping current with modern Android technologies.

Compose is clearly the future of Android development. It requires less code, and it's easier to understand and maintain. Anton Tananaev Staff Android Engineer at Lyft

Migrating to an easier-to-manage codebase

Compose is fully interoperable with Views, so developers can build UI with as much or as little Compose as they’d like. The Lyft team enjoyed using Compose so much, however, that the engineers plan on migrating to Compose for nearly all of their features and are working on a plan to officially deprecate any new XML layouts so they can continue taking advantage of the benefits across the different parts of the app.

“Compose is clearly the future of Android development, so the sooner we transition the better,” said Anton, “It requires less code, and it’s easier to understand and maintain.”

Streamline your feature code with Compose

Learn how you can improve feature coding with Jetpack Compose.

ZEPETO plans to migrate at least 80% of the app’s UI to Jetpack Compose

ZEPETO is a 3D social universe built by NAVER Z with more than 300 million users in over 200 countries. Those users can create unique avatars, foster friendships, and explore virtual realms of their own design. ZEPETO commits itself to creating spaces that prioritize the user’s experience. For its engineers, that meant making the switch to Jetpack Compose, Android’s modern toolkit for building native UI.ZEPETO plans to migrate at least 80% of the app's UI to Jetpack Compose

Embracing Jetpack Compose

ZEPETO was originally designed and developed using Views, Unity and OpenGL, but today 20% of the UI originally written in Views has been rewritten with Jetpack Compose. ZEPETO’s developers began to sequentially integrate the toolkit knowing it would resolve a number of recurring engineering friction points. With the Views system, implementing custom UI with some specific shapes, such as sliders or switches, required implementing the onDraw method with a Canvas. Jetpack Compose allows ZEPETO’s developers to implement these types of UI in Kotlin without needing to implement custom classes, simplifying the process and eliminating the extra steps required.

Cleaning up the codebase

With Jetpack Compose, ZEPETO’s developers rewrote complex UI features. They built a design system that helped organize fonts and sizes in a more intuitive way, improving maintainability, efficiency, and the UX. “Using Compose, we rewrote parts of the app where the UI is relatively complex and various business logics exist, such as the character shop, gift giving, and face decoration,” said Android Developer Hojung Kim. In places like the pager and grid areas of the character shop, Composable functions helped reduce the amount of code by more than 10%.

The ZEPETO team decided to migrate its common dialog components to Compose too. This enabled its engineers to use the desired type of dialog needed throughout all parts of the app. “Each element of the common dialog can now be made into a component, making it possible to create a common dialog, just like assembling a Lego,” said Juhyung Park, Android Developer at ZEPETO. Modularizing the code allowed the engineers to implement commonly used app components much faster than before. By migrating these dialog components, the team was able to clean up 1600+ lines of code, making it much more readable, understandable, and significantly easier to maintain.


Refining the developer experience

Jetpack Compose drastically increased the efficiency of previewing, developing, and implementing UI by allowing developers to reuse and share UI elements. ZEPETO developers have already created more than 230 preview functions to effortlessly test and debug features across the application.

It was also relatively easy for the team to learn how to use Jetpack Compose. “It doesn’t take long for developers familiar with the existing Android View system to reach a level where they can use Compose in actual practice,” said Hojung.

We rewrote the Character Shop feature in Compose. It was much faster to write it in Compose, and we reduced the amount of code by over 10% ≫ Hojung Kim Android developer, ZEPETO

Moving forward with Compose

The ZEPETO team is motivated by Google’s increasing support for Jetpack Compose as it’s clear Compose is a huge priority for Google. They’re excited about how Google is integrating more Android APIs with Compose, and are looking forward to further development of the toolkit.

Several of ZEPETO’s features are now built with Jetpack Compose alongside the graphics built with Unity and OpenGL, such as the character shop, video and photo editors, and dialog components, but the team doesn’t plan to stop there. Given the improvements they’ve seen with development speed, code maintenance, and code reduction, they’ll continue migrating existing screens and building new features with Compose. “In the long run,” finished Hojung, “more than 80% of the UI will be written with Compose,” with the remaining UI and graphics with Unity and OpenGL.


Optimize your app

Learn how you can upgrade your UI development with Jetpack Compose.

Jetpack Compose 1.2 is now stable!

Posted by Jolanda Verhoef, Android Developer Relations Engineer

Today, we’re releasing version 1.2 of Jetpack Compose, Android's modern, native UI toolkit, continuing to build out our roadmap. This release contains new features like downloadable fonts, lazy grids, and improvements for tablets and Chrome OS with better focus, mouse, and input handling.

Compose is our recommended way to build new Android apps for phone, tablets and foldables. Today we also released Compose for Wear OS 1.0 - making Compose the best way to build a Wear OS app as well.

We continue to see developers like the Twitter engineering team ship faster using Compose:

“Compose increased our productivity dramatically. It’s much easier and faster to write a Composable function than to create a custom view, and it’s also made it much easier to fulfill our designers’ requirements.”

Compose 1.2 includes a number of updates for Compose on Phones, Tablets and Foldables - it contains new stable APIs graduated from being experimental, and supports newer versions of Kotlin. We've already updated our samples, codelabs, Accompanist library and MDC-Android Compose Theme Adapter to work with Compose 1.2.

Note: Updating the Compose Compiler library to 1.2 requires using Kotlin 1.7.0. From this point forward the Compiler releases will be decoupled from the releases of other Compose libraries. Read more about the rationale for this in our blog post on independent versioning of Jetpack Compose libraries.

New stable features and APIs

Several features and APIs were added as stable. Highlights include:

New Experimental APIs

We’re continuing to bring new features to Compose. Here are a few highlights:

Try out the new APIs using @OptIn and give us feedback!

Fixed Bugs

We fixed a lot of issues raised by the community, most notably:

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. Do continue providing your feedback and help us make Compose better!

Wondering what’s next? Check out our updated roadmap to see the features we’re currently thinking about and working on, such as animations for lazy item additions and removals, flow layouts, text editing improvements and more!

Jetpack Compose continues to evolve with the features you’ve been asking for. We’ve been thrilled to see tens of thousands of apps using Jetpack Compose in production already, and many of you shared how it’s improved your app development. We can’t wait to see what you’ll build next!

Happy composing!

Independent versioning of Jetpack Compose libraries

Posted by Jolanda Verhoef, Android Developer Relations Engineer

Starting today, the various Jetpack Compose libraries will move to independent versioning schemes. This creates the possibility for sub-groups such as androidx.compose.compiler or androidx.compose.animation to follow their own release cycles.

Allowing these libraries to be versioned independently will decouple dependencies which were previously implicitly coupled, thereby making it easier to incrementally upgrade your application and therefore stay up-to-date with the latest Compose features.

The first library to break away from the single Compose version is the Compose Compiler. Today we’re releasing the 1.2.0 stable version that brings support for Kotlin 1.7.0! The release is both backwards and forwards compatible with the Compose UI libraries and the Compose Runtime library. This means you can upgrade your Compose Compiler to 1.2.0 stable and use Kotlin 1.7.0, while leaving your other Compose libraries on their current version, for example 1.1.0 stable.

To upgrade the version of the Compose Compiler in your app, specify the kotlinCompilerExtensionVersion in your build.gradle file. 



android {
    composeOptions {
        kotlinCompilerExtensionVersion = "1.2.0"
    }
}

Compose and Kotlin are highly coupled, and we’ve heard your feedback that Compose compiler updates are needed to allow you to upgrade your Kotlin version. We want to make sure that you can use the latest and greatest features (and bug fixes) from both Compose and Kotlin, which is why we plan to release stable versions of the Compose Compiler on a much more regular basis. This means the Compose Compiler version numbers will progress at a faster pace than most other Compose libraries. Since the Compose Compiler is both forwards and backwards compatible, you will be able to upgrade it as soon as a new version is released.

The Compose Compiler is built as a Kotlin Compiler Plugin, and so you must use a version of the Compose Compiler which is compatible with the version of Kotlin that you have chosen. To help you choose the version that matches your project, check out the Compose-Kotlin compatibility map.

Moving the Compiler library to a different versioning scheme is the first step in decoupling versioning for the different Compose library groups. You’ll see new stable releases for the other Compose libraries in the next few weeks, and then they will then start following their own release cycles independent of the Compose Compiler.

Prepare your build for individual versioning and start using the latest Compose Compiler and Kotlin versions now!

We look forward to seeing what you build with Compose!

Airbnb uses Jetpack Compose to empower devs to do their best work

How Compose enables Airbnb to create better host and guest experiences

Airbnb uses Jetpack Compose to empower devs to do their best work 

Since 2007, Airbnb has grown to connect more than 4 million hosts with more than 1 billion guests across the globe. One of the reasons behind the app’s success is that its developers aim to achieve engineering excellence by focusing on two main principles: using technology that sparks innovative development and empowering the engineers behind the work.

Jetpack Compose, Android’s modern UI-building toolkit, directly supports both of Airbnb’s development principles. Compose provided a solid foundation for adaptable, quality engineering and reduced boilerplate code, so developers could focus on delivering a great user experience — and advance their two-fold pursuit of engineering excellence.

Image with Airbnb tech lead

Airbnb started testing Compose in 2020 when it was in developer preview. As an early adopter, the Airbnb team was eager use the various new features and simplify their workflow. Now, having gained confidence using Compose in production, Airbnb engineers continue to be satisfied with how it improved their development process.

Equipping engineers for success

Compose’s deterministic testing helped ensure Airbnb’s engineers had tight control over the UI tests they ran and eliminated common flakiness, thereby strengthening their confidence in the quality of every part of their app and the user experiences they were creating. Engineers can now also use Compose to test animations they previously couldn't.

Similarly, Airbnb developers used Compose to add automated screenshot tests to their codebase. Because they didn’t need to write the code for screenshot testing, engineers could go straight into using it to catch bugs and regressions. This gave them more time to review and guarantee feature functionality and UI appearance across a variety of devices.

Compose is great to use alongside Views. This interoperability made it easy for Airbnb engineers to onboard and test the new UI toolkit at their own pace, so they were able to experience the benefits of Compose without having to migrate entire features.

These engineering improvements gave them the solid technical foundations they needed to serve users in fresh and improved ways.

Engineering efficiencies improve user experiences

Airbnb keeps hosts and guests at the heart of their decisions. The engineering team was excited to adopt Compose when they learned about how it would enable them to more easily and efficiently produce UI, resulting in better experiences for their end users.

Because Compose made Airbnb’s features require significantly less code to write and manage, the Airbnb team boosted their efficiency. All of this meant the team could focus its energy on executing the complex tasks involved in developing the innovative features that could best serve users.

Because their features now require less code, the Airbnb team will be able to slow the growth of their app size in the long run. Providing a smaller app is important to Airbnb as an organization with users across the globe that looks to ensure all hosts and guests can easily download and access their app — especially those with older devices or logging on from countries with high data costs.

Using Compose’s engineering enhancements, the Airbnb team was able to put user needs first.

Improve developer productivity with Compose

Compose simplified UI development to allow Airbnb engineers the freedom to focus on more dynamic and innovative features that benefit the app’s hosts and guests.

Learn how you can improve your team’s productivity with Jetpack Compose.

Airbnb uses Jetpack Compose to empower devs to do their best work

How Compose enables Airbnb to create better host and guest experiences

Airbnb uses Jetpack Compose to empower devs to do their best work 

Since 2007, Airbnb has grown to connect more than 4 million hosts with more than 1 billion guests across the globe. One of the reasons behind the app’s success is that its developers aim to achieve engineering excellence by focusing on two main principles: using technology that sparks innovative development and empowering the engineers behind the work.

Jetpack Compose, Android’s modern UI-building toolkit, directly supports both of Airbnb’s development principles. Compose provided a solid foundation for adaptable, quality engineering and reduced boilerplate code, so developers could focus on delivering a great user experience — and advance their two-fold pursuit of engineering excellence.

Image with Airbnb tech lead

Airbnb started testing Compose in 2020 when it was in developer preview. As an early adopter, the Airbnb team was eager use the various new features and simplify their workflow. Now, having gained confidence using Compose in production, Airbnb engineers continue to be satisfied with how it improved their development process.

Equipping engineers for success

Compose’s deterministic testing helped ensure Airbnb’s engineers had tight control over the UI tests they ran and eliminated common flakiness, thereby strengthening their confidence in the quality of every part of their app and the user experiences they were creating. Engineers can now also use Compose to test animations they previously couldn't.

Similarly, Airbnb developers used Compose to add automated screenshot tests to their codebase. Because they didn’t need to write the code for screenshot testing, engineers could go straight into using it to catch bugs and regressions. This gave them more time to review and guarantee feature functionality and UI appearance across a variety of devices.

Compose is great to use alongside Views. This interoperability made it easy for Airbnb engineers to onboard and test the new UI toolkit at their own pace, so they were able to experience the benefits of Compose without having to migrate entire features.

These engineering improvements gave them the solid technical foundations they needed to serve users in fresh and improved ways.

Engineering efficiencies improve user experiences

Airbnb keeps hosts and guests at the heart of their decisions. The engineering team was excited to adopt Compose when they learned about how it would enable them to more easily and efficiently produce UI, resulting in better experiences for their end users.

Because Compose made Airbnb’s features require significantly less code to write and manage, the Airbnb team boosted their efficiency. All of this meant the team could focus its energy on executing the complex tasks involved in developing the innovative features that could best serve users.

Because their features now require less code, the Airbnb team will be able to slow the growth of their app size in the long run. Providing a smaller app is important to Airbnb as an organization with users across the globe that looks to ensure all hosts and guests can easily download and access their app — especially those with older devices or logging on from countries with high data costs.

Using Compose’s engineering enhancements, the Airbnb team was able to put user needs first.

Improve developer productivity with Compose

Compose simplified UI development to allow Airbnb engineers the freedom to focus on more dynamic and innovative features that benefit the app’s hosts and guests.

Learn how you can improve your team’s productivity with Jetpack Compose.

What’s new in Jetpack Compose

Posted by Jolanda Verhoef, Android Developer Relations Engineer, and Anna-Chiara Bellini, Android Toolkit UI Product Manager

blog header featuring Android logos 

It’s been almost a year since Jetpack Compose 1.0 was released, and during this time we've seen the community adopt it with enthusiasm. You’ve told us you’re appreciating the conciseness of the Kotlin syntax and the declarative approach that makes thinking about UI so much faster and easier.

Compose in the Community

We've seen many companies adopt Compose at scale for the newest and boldest features of their apps. For instance, we've worked closely with the Play Store team, who started experimenting with Compose in the very early days, and learned that not only is it more enjoyable, it is beneficial to their developer productivity. They told us that "All new Play Store features are built on top of this framework. Compose has been instrumental in unlocking better velocity and smoother landings for the app." The team at Twitter has been using Jetpack Compose across different parts of the app, and they are reaping the benefits, as "Compose makes it much easier to define our own components and to make their API contracts more explicit, flexible, and intuitive." The Airbnb team adopted Compose as well: "Jetpack Compose is a critical part of our technical strategy. The productivity gains are massive."

We're very glad to see that these teams, who have carefully evaluated Compose in large, complex production environments, are experiencing not just more fun and clarity in their UI development, but broader engineering benefits! And these are just a few examples, because over 100 of the top 1000 apps in the Play Store are now using Compose.

These close collaborations, and listening carefully to feedback from the broader Android community, are always at the heart of our development process and are key to advancing our roadmap. We're now focusing on supporting your more advanced use cases, with new APIs and feature improvements, all together with new tools to make building with Compose easier. We know that Compose fundamentally changes the way UI is built. To help you with the necessary mindset shift, we're publishing more guidance, talks and codelabs on advanced topics, and more in-depth videos so you can write apps that look great and perform great. Here's what is new:

Compose 1.2 beta

Today, we’re releasing the first beta version of Compose 1.2, which includes a lot of features and improvements.

Text improvements

Font Padding

We’ve addressed one of the top-voted bugs in our issue tracker by making includeFontPadding a customizable parameter. We recommend you set this value to false, as this will enable more precise alignment of text within layout. We aim to eventually make this the default value in a future release. Please let us know in the issue above if setting the value to false leads to issues with your app. Additionally, when includeFontPadding is set to false, you can adapt the line height of your Text composable by setting the lineHeightStyle parameter. Combined it can look like this:

an image of multi-line text

Multi-line Text with includeFontPadding set to true (left, current default) vs false (right) and lineHeightStyle.

Text(
 text = myText,
 style = TextStyle(
   lineHeight = 2.5.em,
   platformStyle = PlatformTextStyle(
     includeFontPadding = false
   ),
   lineHeightStyle = LineHeightStyle(
     alignment = Alignment.Center,
     trim = Trim.None
   )
 )
)

Downloadable Fonts

Compose 1.2 also introduces downloadable fonts in Compose. You can use the new APIs for Compose to access Google Fonts asynchronously, even defining fallback fonts, without any complex setup. With downloadable fonts, you can keep your APK size small and improve your user’s system health as multiple apps can share the same font through a provider.

Text Magnifier

Android text provides a magnifier widget, which makes selecting text easier. Compose now supports the text magnifier.

an image of text and maginifer widget

The magnifier is shown when dragging a selection handle to help you see what’s under your finger. Compose 1.1.0 brought the magnifier to selection within text fields, and now Compose 1.2.0 supports magnifier in both text fields and SelectionContainer. The magnifier has also been enhanced to match the precise behavior of the Android magnifier in Views.

Layout features and improvements

Lazy Layouts

Lazy layouts continue to evolve, with the grid APIs LazyVerticalGrid and LazyHorizontalGrid graduating out of experimental, and a new experimental API being added, called LazyLayout, that lets you implement your own custom lazy layouts. Learn more about these APIs in the I/O talk Lazy layouts in Compose.

Interop with CoordinatorLayout

When you embed a scrolling composable in a CoordinatorLayout from the view system, you can now make sure their scroll behaviors are interoperable. This makes the setup of a collapsible toolbar much easier. You can opt-in to this behavior by passing the result of calling the new experimental rememberNestedScrollInteropConnection method into the nestedScroll modifier. Here’s a sample demonstrating this new functionality.

Window insets

The insets library in Accompanist has now graduated to the Compose Foundation library, using the WindowInsets class. Read more about it in our documentation on Integrating Compose with your existing UI.

Window size classes

To make it easier to design, develop and test resizable layouts, we’ve released window size classes - a set of opinionated viewport breakpoints. They are now available in alpha in a new library material3-window-size-class, as part of the Material 3 set of libraries. You can read more about size classes in the Supporting different screen sizes documentation and take a look at a sample implementation in Crane.

Focus on performance

To help you understand and improve your app’s performance, we focused a lot on new performance tooling and guidance. With this, it becomes much easier to understand why and where your app might be lagging.

Starting from Android Studio Dolphin, you can inspect how often composables recompose using the Layout Inspector. Unexpectedly high numbers of recomposition can point you to a composable that could be optimized. In addition, Android Studio Electric Eel now includes a recomposition highlighter, a visual aid to see which composables recompose when. Read more about this new tooling in the What’s new in Android Studio blog.

Layout Inspector showing recomposition count and recomposition highlighter

Layout Inspector showing recomposition count and recomposition highlighter.

Compose changes the way you write your UI at a fundamental level, so there are some best practices that you can adopt to make sure your app is performant. The newly released documentation page suggests how to write and configure your Compose app for best performance. In the I/O talk Common performance gotchas in Jetpack Compose, the Compose team describe common performance mistakes and how to fix them.

Performance is an ongoing area of focus and we’re working hard on improving and extending tooling and guidance. In the meantime, we’d really appreciate your feedback on the work we’ve done so far. Please raise your bugs in the issue tracker or ask your questions on the KotlinLang Slack group.

New tools

On top of improvements, there are also new tooling updates to help you use Compose more effectively. Android Studio Dolphin, now in Beta, brings exciting features for Compose development. Beyond recomposition counts, new tools include Animation Coordination so you can see and scrub through all your animations at once, and the MultiPreview annotation to help you build for multiple screen sizes. To enable you to iterate faster Android Studio Electric Eel (in Canary) brings LiveEdit.

Gif of Android Studio. On left side there is code and the right side there is a celebration text for Android Developers reaching one million subscribers on YouTube.

Check out What's new in Android Development Tools for all the details, and make sure you share your feedback to help shape the tooling support you need for Compose.

Compose for Wear OS

If there is something better than Compose, it is more Compose! So we're very excited to see Compose for Wear OS moving to Beta! Following the same principle as any other Jetpack library, Beta means that it's feature complete and API stable, and you can start building your production-ready apps. Go ahead and watch the talk, and read the blog post!

New and improved guidance

We’ve added and revamped a lot of the guidance on Compose:

Happy Composing!

We hope that you find these new features as exciting as we do. If you haven't started yet, it's time to learn Jetpack Compose and see how it will fit in your team and development process, so that you can experience all the benefits of improved velocity and developer productivity. Happy Composing!

Play Time with Jetpack Compose

Learn about Google Play Store’s strategy for adopting Jetpack Compose, how they overcame specific performance challenges, and improved developer productivity and happiness.

Posted by Andrew Flynn & Jon Boekenoogen, Tech leads on Google Play

In 2020, Google Play Store engineering leadership made the big decision to revamp its entire storefront tech stack. The existing code was 10+ years old and had incurred tremendous tech debt over countless Android platform releases and feature updates. We needed new frameworks that would scale to the hundreds of engineers working on the product while not negatively impacting developer productivity, user experience, or the performance of the store itself.

We laid out a multi-year roadmap to update everything in the store from the network layer all the way to the pixel rendering. As part of this we also wanted to adopt a modern, declarative UI framework that would satisfy our product goals around interactivity and user delight. After analyzing the landscape of options, we made the bold (at the time) decision to commit to Jetpack Compose, which was still in pre-Alpha.

Since that time, the Google Play Store and Jetpack Compose teams at Google have worked extremely closely together to release and polish a version of Jetpack Compose that meets our specific needs. In this article we'll cover our approach to migration as well as the challenges and benefits we found along the way, to share some insight into what adopting Compose can be like for an app with many contributors.

Play Store rewrote their UI with 50% less code with Compose

Considerations

When we were considering Jetpack Compose for our new UI rendering layer, our top two priorities were:

  1. Developer Productivity: Play Store team has hundreds of engineers contributing to this code, so it should be easy (and fun) to develop against.
  2. Performance: Play Store renders lots of media-heavy content with many business metrics that are very sensitive to latency and jank, so we needed to make sure it performed well across all devices, especially low-memory hardware and Android (Go Edition) devices.

Developer Productivity

We have been writing UI code using Jetpack Compose for over a year now and enjoy how Jetpack Compose makes UI development more simple.

We love that writing UI requires much less code, sometimes up to 50%. This is made possible by Compose being a declarative UI framework and harnessing Kotlin’s conciseness. Custom drawing and layouts are now simple function calls instead of View subclasses with N method overrides.

Using the Ratings Table as an example:

ratings table

With Views, this table consists of:

  • 3 View classes total, with 2 requiring custom drawing for the rounded rects, and stars
  • ~350 lines of Java, 55 lines of XML

With Compose, this table consists of:

  • All @Composable functions contained in the same file and language!
  • ~210 lines of Kotlin

buffering GIF

Animations are a hailed feature of Compose for their simplicity and expressiveness. Our team is building motion features that delight our Play Store users more than ever with Compose. With Compose’s declarative nature and animations APIs, writing sequential or parallel animations has never been easier. Our team no longer fears all the corner cases of animations around cancellation and call back chaining. Lottie, a popular animation library, already provides Compose APIs that are simple to work with.

Now you might be thinking: this all sounds great, but what about library dependencies that provide Views? It's true, not all library owners have implemented Compose-based APIs, especially when we first migrated. However, Compose provides easy View interoperability with its ComposeView and AndroidView APIs. We successfully integrated with popular libraries like ExoPlayer and YouTube’s Player in this fashion.

Headshot of Andrew

Performance

The Play Store and Jetpack Compose teams worked closely together to make sure Compose could run as fast and be as jank-free as the View framework. Due to how Compose is bundled within the app (rather than being included as part of the Android framework), this was a tall order. Rendering individual UI components on the screen was fast, but end to end times of loading the entire Compose framework into memory for apps was expensive.

One of the largest Compose adoption performance improvements for the Play Store came from the development of Baseline Profiles. While cloud profiles help improve app startup time and have been available for some time now, they are only available for API 28+ and are not as effective for apps with frequent (weekly) release cadences. To combat this, the Play Store and Android teams worked together on Baseline Profiles: a developer-defined, bundled profile that app owners can specify. They ship with your app, are fully compatible with cloud profiles and can be defined both at the app-level of specificity and library-level (Compose adopters will get this for free!). By rolling out baseline profiles, Play Store saw a decrease in initial page rendering time on its search results page of 40%. That’s huge!

Re-using UI components is a core mechanic of what makes Compose performant for rendering, particularly in scrolling situations. Compose does its best to skip recomposition for composables that it knows can be skipped (e.g. they are immutable), but developers can also force composables to be treated as skippable if all parameters meet the @Stable annotation requirements. The Compose compiler also provides a handy guide on what is preventing specific functions from being skippable. While creating heavily re-used UI components in Play Store that were used frequently in scrolling situations, we found that unnecessary recompositions were adding up to missed frame times and thus jank. We built a Modifier to easily spot these recompositions in our debug settings as well. By applying these techniques to our UI components, we were able to reduce jank by 10-15%.

Recomposition visualization Modifier in action

Recomposition visualization Modifier in action. Blue (no recompositions), Green (1 recomposition).

Another key component to optimizing Compose for the Play Store app was having a detailed, end-to-end migration strategy for the entire app. During initial integration experiments, we ran into the Two Stack Problem: running both Compose and View rendering within a single user session was very memory intensive, especially on lower-end devices. This cropped up both during rollouts of the code on the same page, but also when two different pages (for example, the Play Store home page and the search results page) were each on a different stack. In order to ameliorate this startup latency, it was important for us to have a concrete plan for the order and timeline of pages migrating to Compose. Additionally, we found it helpful to add short-term pre-warming of common classes as stop-gaps until the app is fully migrated over.

Compose unbundling from the Android framework has reduced the overhead in our team directly contributing to Jetpack Compose, resulting in fast turnaround times for improvements that benefit all developers. We were able to collaborate with the Jetpack Compose team and launch features like LazyList item type caching as well as move quickly on lightweight fixes like extra object allocations.

Headshot of Jon

Looking Ahead

The Play Store’s adoption of Compose has been a boon for our team’s developer happiness, and a big step-up for code quality and health. All new Play Store features are built on top of this framework, and Compose has been instrumental in unlocking better velocity and smoother landings for the app. Due to the nature of our Compose migration strategy, we haven’t been able to measure things like APK size changes or build speed as closely, but all signs that we can see look very positive!

Compose is the future of Android UI development, and from the Play Store’s point of view, we couldn’t be happier about that!

Jetpack Compose 1.1 is now stable!

Posted by Florina Muntenescu, Android Developer Relations Engineer

Blue background with phone icon

Today, we’re releasing version 1.1 of Jetpack Compose, Android's modern, native UI toolkit, continuing to build out our roadmap. This release contains new features like improved focus handling, touch target sizing, ImageVector caching, and support for Android 12 stretch overscroll. Compose 1.1 also graduates a number of previously experimental APIs to stable and supports newer versions of Kotlin. We've already updated our samples, codelabs, and Accompanist library to work with Compose 1.1.

New stable features and APIs

Image vector caching

Compose 1.1 introduces image vector caching bringing big performance improvements. We’ve added a caching mechanism to painterResource API to cache all instances of ImageVectors that are parsed with a given resource id and theme. The cache will be invalidated on configuration changes.

Touch target sizing

With respect to Compose 1.0, Material components will expand their layout space to meet Material accessibility guidelines touch target size. For instance, a RadioButton's touch target will expand to a minimum size of 48x48dp, even if you set the RadioButton's size to be smaller. This aligns Compose Material to the same behavior of Material Design Components, providing consistent behavior if you mix Views and Compose. This change also ensures that when you create your UI using Compose Material components, minimum requirements for touch target accessibility will be met.

If you find this change breaks existing layout logic, set LocalMinimumTouchTargetEnforcement to false to disable this behavior, but please be mindful this might reduce the usability of your app, and should be used with caution.

RadioButton touch target update Left: Compose 1.0, right: Compose 1.1  

RadioButton touch target update
Left: Compose 1.0, right: Compose 1.1

Experimental to stable APIs

Several APIs graduated from experimental to stable. Highlights include:

New experimental APIs

We’re continuing to bring new features to Compose. Here are a few highlights:

  • AnimatedContent can now be saved and restored when using rememberSaveable.
  • LazyColumn/LazyRow item positions can be animated using Modifier.animateItemPlacement().
  • You can use the new BringIntoView API to send a request to parents so that they scroll to bring an item into view.

Try out the new APIs using @OptIn and give us feedback!

Note: Using Compose 1.1 requires using Kotlin 1.6.10. Check out the Compose to Kotlin Compatibility Map for more information.

Wondering what’s next? Check out our updated roadmap to see the features we’re currently thinking about and working on, such as lazy item animations, downloadable fonts, moveable content, and more!

Jetpack Compose is stable, ready for production, and continues to add the features you’ve been asking us for. We’ve been thrilled to see tens of thousands of apps start using Jetpack Compose in production already and we can’t wait to see what you’ll build!

We’re grateful for all of the bug reports and feature requests submitted to our issue tracker over the Alphas and Betas - they help us to improve Compose and build the APIs you need. Do continue providing your feedback and help us make Compose better!

Happy composing!