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.
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.
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.
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.
“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:
The APIs LazyHorizontalGrid and LazyVerticalGrid let you place lists of items in a grid. These APIs already existed in Compose 1.1 but were marked as @Experimental.
We’re continuing to bring new features to Compose. Here are a few highlights:
Create your own custom efficient scrollable layouts with LazyLayout. Add custom overscroll effects to your scrollable container using Modifier.overscroll.
Improved test APIs. For example, the performKeyInput action mimics keyboard input in your tests. The new testTagsAsResourceId semantics property allows integration with UI Automator.
Make the back button behavior in TextField identical to the behavior in EditText.
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!
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.
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!
How Compose enables Airbnb to create better host and guest experiences
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.
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.
How Compose enables Airbnb to create better host and guest experiences
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.
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.
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:
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:
Multi-line Text with includeFontPadding set to true (left, current default) vs false (right) and lineHeightStyle.
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.
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.
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.
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.
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:
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!
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.
Considerations
When we were considering Jetpack Compose for our new UI rendering layer, our top two priorities were:
Developer Productivity: Play Store team has hundreds of engineers contributing to this code, so it should be easy (and fun) to develop against.
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:
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
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.
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. 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.
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!
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 guidelinestouch 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.
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!
Today, we're launching version 1.0 of Jetpack Compose, Android's modern, native UI toolkit to help you build better apps faster. It's stable, and ready for you to adopt in production. We have been developing Compose in the open with feedback and participation from the Android community for the last two years. As we reach 1.0, there are already over 2000 apps in the Play Store using Compose - in fact, the Play Store app itself uses Compose! But that’s not all, we have been working with a number of top app developers and their feedback and support has helped us make the 1.0 release even stronger. Square, for instance, told us that by using Compose, they can “focus on things that are unique to Square and their UI infrastructure, rather than solving the broader issue of building a declarative UI framework”. Monzo said Compose allows them to “build higher quality screens more quickly”. And Twitter summed it up nicely: “We love it! ❤️”
We designed Compose to make it faster and easier to build native Android apps. With a fully declarative approach, you just describe your UI, and Compose takes care of the rest. As app state changes, your UI automatically updates, making it a lot simpler to build UI quickly. Intuitive Kotlin APIs help you build beautiful apps with way less code, and native access to all existing Android code means you can adopt at your own pace. Powerful layout APIs and code-driven UI make it easy to support different form factors, like tablets and foldables, and Compose support is coming for WearOS, Homescreen Widgets, and more!
This 1.0 release is ready for use in production, offering key features that you need:
Interoperable: Compose is built to interoperate with your existing app. You can embed compose UIs within Views or Views within Compose. You can add as little as a single button to a screen, or keep that custom view you’ve created in a now Compose screen.
Jetpack Integration: Compose is built to integrate with the Jetpack libraries you already know and love. With integration with Navigation, Paging, LiveData (or Flow/RxJava), ViewModel and Hilt, Compose works with your existing architecture.
Material: Compose offers an implementation of Material Design components and theming, making it easy to build beautiful apps that reflect your brand. The Material theming system is easier to understand and trace, without having to consult multiple XML files.
Lists: Compose’s Lazy components offer a simple, succinct but powerful way to efficiently display lists of data, with minimal boilerplate.
Animation: Compose’s simple and coherent animation APIs make it far easier to delight your app’s users.
New Tools
The fully declarative approach in Jetpack Compose radically changes how you develop UI. To support new workflows and a different way of thinking, we are delivering new tools, designed specifically for Compose, and adding support for Compose to some of our existing tooling.
Compose Preview
The new Compose Preview, available in Android Studio Arctic Fox allows you to see your Composables in different states, light and dark theme, or different font scalings, all at the same time, making component development easier, without having to deploy a whole app to your device. Enhanced with live editing of literals, you can see updates without recompiling your project.
Deploy Preview
If you ever wished to be able to test parts of the UI on a device, without having to navigate through your app to the screen you’re working on, you will like the new Deploy Preview: just create a preview for your Composable, and deploy it on your device for fast iteration.
Compose support in Layout Inspector
Layout Inspector adds support for Composables, so that you can confidently mix Compose with existing Views.
Read more about Compose support in Android Studio Arctic Fox, here.
Sharing our roadmap for Compose
Adopting any new framework requires evaluation, especially something as far reaching as a new UI Toolkit. To help you to make an informed decision whether it’s the right time for you we’re publishing a public roadmap to share our plans to continue to build out Jetpack Compose.
Learning Compose
To help you get composing, we’ve prepared an extensive set of resources for you and your team:
Tutorial: Quickly see Compose in action and get a feel for declarative programming.
Videos: Grab some ? and sit back and learn all about Compose.
Samples: 8 official samples showcase a range of APIs and use-cases.
There’s a lot to learn! The Jetpack Compose Pathway provides a step-by-step journey through key codelabs, videos and docs to help guide you.
Enjoy composing!
We really believe that Jetpack Compose is a huge leap forward, making it so much faster and easier to build great UIs; we can’t wait to see what you build with it. Now that Compose is stable at 1.0, it’s time to get started; there’s nothing better than getting right to the code. Happy Composing!
Cross-posted on the Android Developers blog by Karen Ng, Director, Product Management & Jacob Lehrbaum, Director of Developer Relations, Android & Play
As Android developers, we are all driven by building experiences that delight people around the world. And with people depending on your apps more than ever, expectations are higher and your jobs as developers aren’t getting easier. Today, at Google I/O, we covered a few ways that we’re trying to help out, whether it be through Android 12 - one of the biggest design changes ever, Jetpack, Jetpack Compose, Android Studio, and Kotlin to help you build beautiful high quality apps. We’re also helping when it comes to extending your apps wherever your users go, like through wearables and larger-screened devices. You can watch the full Developer Keynote, but here are a few highlights:
Android 12: one of the biggest design updates ever.
The first Beta of Android 12 just started rolling out, and it’s packed with lots of cool stuff. From new user safety features like permissions for bluetooth and approximate location, enhancements to performance like expedited jobs and start up animations, to delightful experiences with more interactive widgets and stretch overscrolling, this release is one of the biggest design updates to Android ever. You can read more about what’s in Android 12 Beta 1 here, so you can start preparing your apps for the consumer release coming out later this year. Download the Beta and try it with your apps today!
Jetpack Compose: get ready for 1.0 in July!
For the last few years, we’ve been hard at work modernizing the Android development experience, listening to your feedback to keep the openness–a hallmark of Android, but becoming more opinionated about the right way to do things. You can see this throughout, from Android Studio, a performant IDE that can keep up with you, to Kotlin, a programming language that enables you to do more with less code, to Jetpack libraries that solve the hardest problems on mobile with backward compatibility.
The next step in this offering is Jetpack Compose - our modern UI toolkit to easily build beautiful apps for all Android devices. We announced Compose here at Google I/O two years ago and since then have been building it in the open, listening to your feedback to make sure we got it right. With the Compose Beta earlier this year, developers around the world have created some truly beautiful, innovative experiences in half the time, and the response to the #AndroidDevChallenge blew our socks off!
With the forthcoming update of Material You (which you can read more about here), we’ll be adding new Material components as well as further support for building for large screens, making it fast and easy to build a gorgeous UI. We’re pressure testing the final bits in Compose and will release 1.0 Stable in July—so get ready!
Android Studio Arctic Fox: Design, Devices, & Developer Productivity!
Android Studio Arctic Fox (2020.3.1) Beta, the latest release of the official powerful Android IDE, is out today to help you build quality apps easier and faster. We have delivered and updated the suite of tools to empower three major themes: accelerate your UI design, extend your app to new devices, and boost your developer productivity. With this latest release you can create modern UIs with Compose tooling, see test results across multiple devices, and optimize debugging databases and background tasks with the App Inspector. We’re also making your apps more accessible with the Accessibility Scanner and more performant with Memory Profiler. And for faster build speeds, we have the Android Gradle plugin 7.0, new DSL, and variant APIs. You can learn more about the Android Studio updates here.
Kotlin: the most used language by professional Android devs
Kotlin is now the most used primary language by professional Android developers according to our recent surveys; in fact, over 1.2M apps in the Play Store use Kotlin, including 80% of the top 1000 apps. And here at Google, we love it too: 70+ Google apps like Drive, Home, Maps and Play use Kotlin. And with a brand-new native solution to annotation processing for Kotlin built from the ground up, Kotlin Symbol Processing is available today, a powerful and yet simple API for parsing Kotlin code directly, showing speeds up to 2x faster with libraries like Room.
Android Jetpack: write features, not boilerplate
With Android Jetpack, we built a suite of libraries to help reduce boilerplate code so you can focus on the code you care about. Over 84% of the top 10,000 apps are now using a Jetpack library. And today, we’re unpacking some new releases for Jetpack, including Jetpack Macrobenchmark (Alpha) to capture large interactions that affect your app startup and jank before your app is released, as well as a new Kotlin Coroutines API for persisting data more efficiently via Jetpack DataStore (Beta). You can read about all the updates in Android Jetpack here.
Now is the time: a big step for Wear
The best thing about modern Android development is that these tools have been purpose built to help make it easy for you to build for the next era of Android, which is all about enabling devices connected to your phone–TVs, cars, watches, tablets–to work better together.
Starting today, we take a huge step forward with wearables. First, we introduced a unified platform built jointly with Samsung, combining the best of Wear and Tizen. Second, we shared a new consumer experience with revamped Google apps. And third, a world-class health and fitness service from Fitbit is coming to the platform. As an Android developer, it means you’ll have more reach, and you’ll be able to use all of your existing skills, tools, and APIs that make your mobile apps great, to build for a single wearables platform used by people all over the world.
Whether it’s new Jetpack APIs for Wear tailored for small screens and designed to optimize battery life, to the Jetpack Tiles API, so you can create a custom Tile for all the devices in the Wear ecosystem, there are a number of new features to help you build on Wear. And with a new set of APIs for Health and Fitness, created in collaboration with Samsung, data collection from sensors and metrics computation is streamlined, consistent, and accurate–like heart rate to calories to daily distance–from one trusted source. All this comes together in new tooling, with the release of Android Studio Arctic Fox Beta, like easier pairing to test apps, and even a virtual heart rate sensor in the emulator. And when your app is ready, users will have a much easier time discovering the world of Wear apps on Google Play, with some big updates to discoverability. You can read more about all of the Wear updates here.
Tapping the momentum of larger screens, like tablets, Chrome OS and foldables
When it comes to larger screens -- tablets, foldables, and Chrome OS laptops-- there is huge momentum. People are increasingly relying on large screen devices to stay connected with family and friends, go to school, or work remotely. In fact, there are over 250 million active large screen Android devices. Last year, Chrome OS grew +92% year over year–5 times the rate of the PC market, making Chrome OS the fastest growing and the second-most popular desktop OS. To help you take advantage of this momentum, we’re giving you APIs and tools to make optimizing that experience easier: like having your content resize automatically to more space by using SlidingpaneLayout 1.2.0 and a new vertical navigation rail component, Max widths on components to avoid stretched UIs, as well as updates to the platform, Chrome OS, and Jetpack windowmanager, so apps work better by default. You can learn more here.
Google Duo's optimized experience for foldable devices
This is just a taste of some of the new ways we’re making it easier for you to build high quality Android apps. Later today, we’ll be releasing more than 20 technical sessions on Android and Play, covering a wide range of topics such as background tasks, privacy, and Machine Learning on Android, or the top 12 tips to get you ready for Android 12. If building for cars, TVs, and wearables is your thing, we got that covered, too. You can find all these sessions - and more - on the I/O website. Beyond the sessions and news, there’s a number of fun ways to virtually connect with Googlers and other developers at this year’s Google I/O. You can check out the Android dome in I/O Adventure, where you can see new blog posts, videos, codelabs, and more. Maybe even test out your Jetpack Compose skills or take a virtual tour of the cars inside our dome!
