Tag Archives: Jetpack

CameraX 1.2 is now in Beta

Posted by Donovan McMurray, CameraX Developer Relations Engineer

As part of Android Jetpack, the CameraX library makes complex camera functionality available in an easy-to-use API, helping you create a best-in-class experience that works consistently across Android versions and devices. As of today, CameraX version 1.2 is officially in Beta. Update from version 1.1 to take advantage of the latest game-changing features: our new ML Kit integration, which can reduce your boilerplate code when using ML Kit in a CameraX app, and Zero-Shutter Lag, which enables faster action shots than were previously possible.

These two advanced features are simple to implement with CameraX 1.2, so let’s take a look at each of them in depth.

ML Kit Integration

Google’s ML Kit provides several on-device vision APIs for detecting faces, barcodes, text, objects, and more. We’re making it easier to integrate these APIs with CameraX. Version 1.2 introduces MlKitAnalyzer, an implementation of ImageAnalysis.Analyzer that handles much of the ML Kit setup for you.


You can use MlKitAnalyzer with both cameraController and cameraProvider workflows. If you use the cameraController.setImageAnalysisAnalyzer() method, then CameraX can also handle the coordinates transformation between the ML Kit output and your PreviewView.

Here’s a code snippet using setImageAnalysisAnalyzer() to set a BarcodeScanner on a cameraController to detect QR codes. CameraX automatically handles the coordinate transformations when you pass COORDINATE_SYSTEM_VIEW_REFERENCED into the MlKitAnalyzer. (Use COORDINATE_SYSTEM_ORIGINAL to prevent CameraX from applying any coordinate transformations.)

val options = BarcodeScannerOptions.Builder()

  .setBarcodeFormats(Barcode.FORMAT_QR_CODE)

  .build()

val barcodeScanner = BarcodeScanning.getClient(options)


cameraController.setImageAnalysisAnalyzer(

  executor,

  new MlKitAnalyzer(List.of(barcodeScanner),

    COORDINATE_SYSTEM_VIEW_REFERENCED,

    executor, result -> {

      // The value of result.getResult(barcodeScanner)

      // can be used directly for drawing UI overlay.

    }

  )

)



Zero-Shutter Lag

Have you ever lined up the perfect photo, but when you click the shutter button the lag causes you to miss the best moment? CameraX 1.2 offers a solution to this problem by introducing Zero-Shutter Lag.

Prior to CameraX 1.2, you could optimize for quality (CAPTURE_MODE_MAXIMIZE_QUALITY) or efficiency (CAPTURE_MODE_MINIMIZE_LATENCY) when calling ImageCapture.Builder.setCaptureMode(). CameraX 1.2 adds a new value (CAPTURE_MODE_ZERO_SHOT_LAG) that reduces latency even further than CAPTURE_MODE_MINIMIZE_LATENCY. Note: for devices that cannot support Zero-Shutter Lag, CameraX will fallback to CAPTURE_MODE_MINIMIZE_LATENCY.

We accomplish this by using a circular buffer of photos. On image capture, we go back in time in the circular buffer to get the frame closest to the actual press of the shutter button. No DeLorean needed. Great Scott!

Here’s an example of how this works in a CameraX app with Preview and ImageCapture use cases:


  1. Just like any other app with a Preview use case, CameraX sends images from the camera to the UI for the user to see.
  2. With Zero-Shutter Lag, CameraX also sends images to a circular buffer which holds multiple recent images.
  3. When the user presses the shutter button, there is inevitably some lag in sending the current camera image to your app. For this reason, Zero-Shutter Lag goes to the circular buffer to fetch an image.
  4. CameraX finds the photo in the circular buffer closest to the actual time when the user pressed the shutter button, and returns that photo to your app.
There are a few limitations to keep in mind with Zero-Shutter Lag. First, please be mindful that this is still an experimental feature. Second, since keeping a circular buffer of images is computationally intensive, you cannot use CAPTURE_MODE_ZERO_SHOT_LAG while using VideoCapture or extensions. Third, the circular buffer will increase the memory footprint of your app.


Next steps


Check our full release notes for CameraX 1.2 for more details on the features described here and more! If you’re ready to try out CameraX 1.2, update your project’s CameraX dependency to 1.2.0-beta01 (or the latest version at the time you’re reading this).

If you would like to provide feedback on any of these features or CameraX in general, please create a CameraX issue. As always, you can also reach out on our CameraX Discussion Group.

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!

Compose for Wear OS is now 1.0: time to build wearable apps with Compose!

Posted by Kseniia Shumelchyk, Android Developer Relations Engineer

Today we’re launching version 1.0 of Compose for Wear OS, the first stable release of our modern declarative UI toolkit designed to help developers create beautiful, responsive apps for Google’s smartwatch platform.

Compose for Wear OS was built from the bottom up in Kotlin with assumptions of modern app architecture. It makes building apps for Wear OS easier, faster, and more intuitive by following the declarative approach and offering powerful Kotlin syntax.

The toolkit not only simplifies UI development, but also provides a rich set of UI components optimized for the watch experience with built-in support of Material design for Wear OS, and it’s accompanied by many powerful tools in Android Studio to streamline UI iteration.

What this means

The Compose for Wear OS 1.0 release means that the API is stable and has what you need to build production-ready apps. Moving forward, Compose for Wear OS is our recommended approach for building user interfaces for Wear OS apps.

Your feedback has helped shape the development of Compose for Wear OS; our developer community has been with us each step of the way, engaging with us on Slack and providing feedback on the APIs, components, and tooling. As we are working on bringing new features to future versions of Compose for Wear OS, we will continue to welcome developer feedback and suggestions.

We are also excited to share how developers have already adopted Compose in their Wear OS apps and what they like about it.

What developers are saying

Todoist helps people organize, plan and collaborate on projects. They are one of the first companies to completely rebuild their Wear OS app using Compose and redesign all screens and interactions:

“When the new Wear design language and Compose for Wear OS were announced, we were thrilled. It gave us new motivation and opportunity to invest into the platform.

Todoist application
Relying on Compose for Wear OS has improved both developer and user experience for Todoist:

“Compose for Wear OS helped us tremendously both on the development side and the design side. The guides and documentation made it easy for our product designers to prepare mockups matching the new design language of the platform. And the libraries made it very easy for us to implement these, providing all the necessary widgets and customizations. Swipe to dismiss, TimeText, ScalingLazyList were all components that worked very well out-of-the-box for us, while still allowing us to make a recognizable and distinct app.”


Outdooractive helps people plan routes for hiking, cycling, running, and other outdoor adventures. As wearables are a key aspect of their product strategy, they have been quick to update their offering with an app for the user's wrist.
Outdooractive application
Outdooractive has already embraced Wear OS 3, and by migrating to Compose for Wear OS they aimed for developer-side benefits such as having a modern code base and increased development productivity:

Huge improvement is how lists are created. Thanks to ScalingLazyColumn it is easier (compared to RecyclerView) to create scrolling screens without wasting resources. Availability of standard components like Chip helps saving time by being able to use pre-fabricated design-/view-components. What would have taken us days now takes us hours.

The Outdooractive team also highlighted that Compose for Wear OS usage help them to strive for better app quality:

Improved animations were a nice surprise, allowing smoothly hiding/revealing components by just wrapping components in “AnimatedVisibility” for example, which we used in places where we would normally not have invested any time in implementing animations.


Another developer we’ve been working with, Period Tracker helps keep track of period cycles, ovulation, and the chance of conception.

     
Period Tracker application

They have taken advantage of our UI toolkit to significantly improve user interface and quickly develop new features available exclusively on Wear OS:

“Compose for Wear OS provided us with many kits to help us bring our designs to life. For example, we used Chips to design the main buttons for period recording, water drinking, and taking medication, and it also helped us create a unique look for the latest version of Kegel workout.

Similarly to other developers, Period Tracker noted that Compose for Wear OS helped them to achieve better developer experience and improved collaboration with design and development teams:

“For example, before Chips components were available, we had to use a custom way to load images on buttons which caused a lot of adaptation work. Yes, Compose for Wear OS improved our productivity and made our designers more willing to design a better user experience on wearables.

Check out the in-depth case studies to learn more about how other developers are using Jetpack Compose.

1.0 release

Let’s look into the key features available with 1.0 release:

  • Material: The Compose Material catalog for Wear OS already offers more components than are available with View-based layouts. The components follow material styling and also implement material theming, which allows you to customize the design for your brand.
  • Declarative: Compose for Wear OS leverages Modern Android Development and works seamlessly with other Jetpack libraries. Compose-based UIs in most cases result in less code and accelerate the development process as a whole, read more.
  • Interoperable: If you have an existing Wear OS app with a large View-based codebase, it's possible to gradually adopt Compose for Wear OS by using the Compose Interoperability APIs rather than having to rewrite the whole codebase.
  • Handles different watch shapes: Compose for Wear OS extends the foundation of Compose, adding a DSL for all curved elements to make it easy to develop for all Wear OS device shapes: round, square, or rectangular with minimal code.
  • Performance: Each Compose for Wear OS library ships with its own baseline profiles that are automatically merged and distributed with your app’s APK and are compiled ahead of time on device. In most cases, this achieves app performance for production builds that is on-par with View-based apps. However, it’s important to know how to configure, develop, and test your app’s performance for the best results. Learn more.

Note that using version 1.0 of Compose for Wear OS requires using the version 1.2 of androidx.compose libraries and therefore Kotlin 1.7.0. Read more about Jetpack Compose 1.2 release here.

Tools and libraries

Android Studio

The declarative paradigm shift also alters the development workflow. The Compose tooling available in Android Studio will help you build apps more productively.

Android Studio Dolphin includes a new project template with Compose for Wear OS to help you get started.

The Composable Preview annotation allows you to instantly verify how your app’s layout behaves on different watch shapes and sizes. You can configure the device preview to show different Wear OS device types (round, rectangle, etc):

import androidx.compose.ui.tooling.preview


@Preview(

    device = Devices.WEAR_OS_LARGE_ROUND,

    showSystemUi = true,

    backgroundColor = 0xff000000,

    showBackground = true

)

@Composable

fun PreviewCustomComposable() {

    CustomComposable(...)

}


Starting with Android Studio Electric Eel, Live Edit supports iterative code development for Wear OS, providing quick feedback as you make changes in the editor and immediately reflecting UI in the Preview or running app on the device.

Horologist

Horologist is a group of open-source libraries from Google that supplement Wear OS development, which we announced with the beta release of Compose for Wear OS. Horologist has graduated a number of experimental APIs to stable including TimeText fadeAway modifiers, WearNavScaffold, the Date and Time pickers.

      
Date and Time pickers from Horologist library     

Learning Compose

If you are unfamiliar with using Jetpack Compose, we recommend starting with the tutorial. Many of the development principles there also apply to Compose for Wear OS.

To learn more about Compose for Wear OS check out:

Now that Compose for Wear OS has reached its first stable release, it’s time to create beautiful apps built for the wrist with Compose!

Join the community

Join the discussion in the Kotlin Slack #compose-wear channel to connect with the team and other developers and share what you’re building.

Provide feedback

Please keep providing us feedback on the issue tracker and let us know your experience!

For more information about building apps for Wear OS, check out the developer site.

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!

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!

Announcing Glance: Tiles for Wear OS made simple

Posted by Anna Bernbaum, Associate Product Manager


Last year we announced the Wear Tiles API. To complement that Java API, we are excited to announce that support for Wear OS Tiles has been added to Glance, a new framework built on top of Jetpack Compose designed to make it easier to build for surfaces outside your app on Android. We'd love to get your feedback on this alpha version.

Tiles provide Wear OS users easy access to the information and actions they need in order to get things done quickly. They also are one of the most used surfaces on Wear OS. Just one swipe away from the Watch Face, users can quickly access the most important information or actions from an app, like start a timer or get the latest weather forecast.


Watch face gif


Let's see how we can create a Tile with Glance:


class HelloTileService : GlanceTileService() {
   @Composable
   override fun Content() {
       Text(text = "Hello Glance")
   }
}

The simple code above generates the Tile below.


“Hello Glance” Tile sample with Glance

“Hello Glance” Tile sample with Glance


Note: Using Glance-wear-tiles requires`minSdkVersion`>= 26.



How it works

Glance creates “glanceable” experiences across Android surfaces using a base-set of Composables. For Tiles on Wear OS, Glance translates Composables into Tiles.


Diagram: Glance structure 

Diagram: Glance structure


Glance requires Compose to be enabled and depends on Runtime, Graphics, and Unit UI Compose layers, but it’s not directly interoperable with other existing Jetpack Compose UI elements, like Compose for Wear OS.

What’s in the Alpha

This initial release introduces the main APIs to build wear Tiles:

We are working on bringing even more functionality with default theming, further Android Studio support, and more. Stay tuned for new releases.

Get started with Glance

For a quick start, take a look at the samples in the AndroidX repository. Glance works with the latest stable Android Studio, although since Glance relies on Compose Runtime, follow the steps on the Jetpack Compose docs to set it up first.

The Alpha version is your opportunity to influence the APIs, so please share your feedback and let us know your experience!

Happy Composing with Glance!

Announcing Jetpack Glance Alpha for app widgets

Posted by Marcel Pintó Biescas, Developer Relations Engineer, @marxallski

Illustration of a laptop with the Android rocket logo

Android 12 revamps a key feature for many Android users, App Widgets, making them more useful, beautiful, and discoverable (84% use at least 1 widget). Today, we’re making it even easier to build them by releasing the first alpha of Jetpack Glance, a new framework built on top of the Jetpack Compose runtime designed to make it faster and easier to build app widgets for the home screen and other surfaces.

We’d love you to give it a try and share your feedback!

Glance offers similar modern, declarative Kotlin APIs that you are used to with Jetpack Compose, helping you build beautiful, responsive app widgets with way less code.

Glance “Hello World” widget sample

Glance “Hello World” widget sample


class GreetingsWidget(private val name: String): GlanceAppWidget() {
    @Composable
    override fun Content() {
        Text(text = "Hello $name")
    }
}

class GreetingsWidgetReceiver : GlanceAppWidgetReceiver() {

    override val glanceAppWidget = GreetingsWidget("Glance")
}

How it works

Glance provides a base-set of Composables to help build “glanceable” experiences. Starting today with app widget components but with more coming. Using the Jetpack Compose runtime, Glance can translate Composables into actual RemoteViews, and display them in an app widget.


Diagram: Glance structure

Diagram: Glance structure


This means that Glance requires Compose to be enabled and depends on Runtime, Graphics, and Unit UI Compose layers, but it’s not directly interoperable with other existing Jetpack Compose UI elements. However, state or any other logic within your app can be shared to create a glanceable UI.


What's in Alpha

This initial release introduces the main APIs to enable you to build app widgets in addition to providing interoperability with existing RemoteViews.

Here’s an overview of what the library offers, at a glance:

We are working on bringing even more functionality with default theming, further Android Studio support, and more. Stay tuned for new releases.



Get started with Glance

Check out the sample on GitHub for a quick start. Glance works with the latest stable Android Studio, although since Glance relies on Compose Runtime, follow the steps on the Jetpack Compose docs to set it up first.

In addition, for a more advanced showcase, checkout the demos in the AndroidX repository.


ResponsiveAppWidget.kt demo

ResponsiveAppWidget.kt demo

The Alpha version is your opportunity to influence the APIs, so please share your feedback and let us know your experience!

Happy Composing with Glance!

Beta 1 Update for 12L feature drop!

Posted by Maru Ahues Bouza, Director, Android Developer Relations

Image showing different kinda of large screens

At Android Dev Summit in October we highlighted the growth we’re seeing in large screen devices like tablets, foldables, and Chromebooks. We talked about how we’re making it easier to build great app experiences for these devices through new Jetpack APIs, tools, and guidance. We also introduced a developer preview of 12L, a feature drop for Android 12 that’s purpose-built for large screens.

With 12L, we’ve optimized and polished the system UI for large screens, made multitasking more powerful and intuitive, and improved compatibility support so apps look better right out of the box. 12L also includes a handful of new APIs for developers, such as for spatial audio and improved drag-and-drop for accessibility.

Today we’re releasing the first Beta of 12L for your testing and feedback as you get your apps ready for the feature drop coming early next year. You can try the new large screens features by setting up an Android emulator in Android Studio. 12L is for phones, too, and you can now enroll here to get 12L Beta 1 on supported Pixel devices. If you are still enrolled in the Android 12 Beta program, you’ll get the 12L update automatically. Through a partnership with Lenovo, you can also try 12L on the Lenovo Tab P12 Pro tablet, see the Lenovo site for details on available builds and support.

What’s in 12L Beta 1?

Today’s Beta 1 build includes improvements to functionality and user experience as well as the latest bug fixes, optimizations, and the December 2021 security patches. For developers, we’ve finalized the APIs early, so Beta 1 also includes the official 12L APIs (API level 32), updated build tools, and system images for testing. These give you everything you need to test your apps with the 12L features.

With 12L, we’ve focused on refining the UI on large screen devices, across notifications, quick settings, lockscreen, overview, home screen, and more. For example, on screens above 600dp, the notification shade, lockscreen, and other system surfaces use a new two-column layout to take advantage of the screen area.


Image showing a two-column layout

Two-column layouts show more and are easier to use


Multitasking is also more powerful and intuitive - 12L includes a new taskbar on large screens that lets users instantly switch to favorite apps on the fly or drag-and-drop apps into split-screen mode. Remember, on Android 12 and later, users can launch any app into split screen mode, regardless whether the app is resizable. Make sure to test your apps in split screen mode!


GIF showing the drag and drop in split screen mode

Drag and drop apps into split-screen mode


Last, we’ve improved compatibility mode with visual and stability improvements to offer a better letterboxing experience for users and help apps look better by default. If your app is not yet optimized for large screens, make sure to test your app with the new letterboxing.

More APIs and tools to help you build for large screens

As you optimize your apps for large screens, here are some of our latest APIs and tools that can make it easier to build a great experience for users.

  • Material patterns for large screens - Our new Material Design guidance can help you plan how to scale your app’s UI across all screens.
  • Jetpack Compose for adaptive UI - Jetpack Compose makes it very easy to handle UI changes across different screen sizes or components. Check out the Build adaptive layouts in Compose guide for the basics of what you need to know.
  • Window Size Classes for managing your UI - Window Size Classes are opinionated viewport breakpoints to help you more easily design, develop and test resizable application layouts. Watch for these coming soon in Jetpack WindowManager 1.1.
  • Activity embedding - With Activity embedding APIs you can take advantage of the extra display area on large screens by showing multiple activities at once, such as for the List-Detail pattern, and it requires little or no refactoring of your app. Available in Jetpack WindowManager 1.0 Beta 03 and later.
  • Visual linting in Android Studio - In Android Studio Chipmunk, try the new visual linting tool that proactively surfaces UI warnings and suggestions in Layout Validation, to help identify potential issues on large screens.
  • Resizable emulator - This new emulator configuration comes with Android Studio Chipmunk and lets you quickly toggle between the four reference devices - phone, foldable, tablet, and desktop for easier testing.

Make sure to check out all of our large screens developer resources for details on these and other APIs and tools.

Get started with 12L on a device!

With the 12L feature drop coming to devices early next year, now is a great time to optimize your apps for large screens. For developers, we highly recommend checking out how your apps work in split screen mode with windows of various sizes. If you haven’t optimized your app yet, see how it looks in different orientations and try the new compatibility mode changes if they apply.

The easiest way to get started with the large screen features is using the Android Emulator in a foldable or tablet configuration - see the complete setup instructions here.

Now you can also flash 12L onto a large screen device. Through a partnership with Lenovo, you can try 12L preview builds on the Lenovo Tab P12 Pro. Currently Lenovo is offering a Developer Preview 1 build, with updates coming in the weeks ahead. Visit Lenovo's 12L preview site for complete information on available builds and support.

12L is coming to phones, too, and although you won’t see the large screen features on smaller screens, we welcome you to try out the latest improvements in this feature drop. Just enroll your supported Pixel device here to get the latest 12L Beta update over-the-air. If you are still enrolled in the Android 12 Beta program, you’ll automatically receive the update 12L.

For details on 12L and the release timeline, visit the 12L developer site. You can report issues and requests here, and as always, we appreciate your feedback!