What’s new in Jetpack Compose

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

 

It’s been virtually a yr since Jetpack Compose 1.0 was launched, and through this time we have seen the neighborhood undertake it with enthusiasm. You’ve advised us you’re appreciating the conciseness of the Kotlin syntax and the declarative method that makes fascinated about UI a lot sooner and simpler.

Compose within the Neighborhood

We have seen many firms undertake Compose at scale for the latest and boldest options of their apps. As an illustration, we have labored intently with the Play Retailer group, who began experimenting with Compose within the very early days, and discovered that not solely is it extra gratifying, it’s helpful to their developer productiveness. They advised us that “All new Play Retailer options are constructed on prime of this framework. Compose has been instrumental in unlocking higher velocity and smoother landings for the app.” The group at Twitter has been utilizing Jetpack Compose throughout completely different components of the app, and they’re reaping the advantages, as “Compose makes it a lot simpler to outline our personal parts and to make their API contracts extra specific, versatile, and intuitive.” The Airbnb group adopted Compose as effectively: “Jetpack Compose is a essential a part of our technical technique. The productiveness good points are large.”

We’re very glad to see that these groups, who’ve fastidiously evaluated Compose in giant, complicated manufacturing environments, are experiencing not simply extra enjoyable and readability of their UI improvement, however broader engineering advantages! And these are just some examples, as a result of over 100 of the highest 1000 apps within the Play Retailer are actually utilizing Compose.

These shut collaborations, and listening fastidiously to suggestions from the broader Android neighborhood, are all the time on the coronary heart of our improvement course of and are key to advancing our roadmap. We’re now specializing in supporting your extra superior use instances, with new APIs and have enhancements, all along with new instruments to make constructing with Compose simpler. We all know that Compose basically adjustments the best way UI is constructed. That will help you with the mandatory mindset shift, we’re publishing extra steering, talks and codelabs on superior subjects, and extra in-depth movies so you possibly can write apps that look nice and carry out nice. This is what’s new:

Compose 1.2 beta

Immediately, we’re releasing the first beta model of Compose 1.2, which incorporates plenty of options and enhancements.

Textual content enhancements

Font Padding

We’ve addressed one of many top-voted bugs in our problem tracker by making includeFontPadding a customizable parameter. We suggest you set this worth to false, as it will allow extra exact alignment of textual content inside structure. We intention to ultimately make this the default worth in a future launch. Please tell us within the problem above if setting the worth to false results in points together with your app. Moreover, when includeFontPadding is ready to false, you possibly can adapt the road top of your Textual content composable by setting the lineHeightStyle parameter. Mixed it might probably appear to be this:

Multi-line Textual content with includeFontPadding set to true (left, present default) vs false (proper) and lineHeightStyle.

Textual content(
 textual content = myText,
 model = TextStyle(
   lineHeight = 2.5.em,
   platformStyle = PlatformTextStyle(
     includeFontPadding = false
   ),
   lineHeightStyle = LineHeightStyle(
     alignment = Alignment.Heart,
     trim = Trim.None
   )
 )
)

Downloadable Fonts

Compose 1.2 additionally introduces downloadable fonts in Compose. You should utilize the brand new APIs for Compose to entry Google Fonts asynchronously, even defining fallback fonts, with none complicated setup. With downloadable fonts, you possibly can hold your APK measurement small and enhance your consumer’s system well being as a number of apps can share the identical font by a supplier.

Textual content Magnifier

Android textual content offers a magnifier widget, which makes choosing textual content simpler. Compose now helps the textual content magnifier.

The magnifier is proven when dragging a variety deal with that can assist you see what’s beneath your finger. Compose 1.1.0 introduced the magnifier to choice inside textual content fields, and now Compose 1.2.0 helps magnifier in each textual content fields and SelectionContainer. The magnifier has additionally been enhanced to match the exact habits of the Android magnifier in Views.

Structure options and enhancements

Lazy Layouts

Lazy layouts proceed to evolve, with the grid APIs LazyVerticalGrid and LazyHorizontalGrid graduating out of experimental, and a brand new experimental API being added, known as LazyLayout, that permits you to implement your individual customized lazy layouts. Study extra about these APIs within the I/O discuss Lazy layouts in Compose.

Interop with CoordinatorLayout

While you embed a scrolling composable in a CoordinatorLayout from the view system, now you can ensure their scroll behaviors are interoperable. This makes the setup of a collapsible toolbar a lot simpler. You’ll be able to opt-in to this habits by passing the results of calling the brand new experimental rememberNestedScrollInteropConnection methodology into the nestedScroll modifier. Right here’s a pattern demonstrating this new performance.

Window insets

The insets library in Accompanist has now graduated to the Compose Basis library, utilizing the WindowInsets class. Learn extra about it in our documentation on Integrating Compose together with your current UI.

Window measurement lessons

To make it simpler to design, develop and take a look at resizable layouts, we’ve launched window measurement lessons – a set of opinionated viewport breakpoints. They’re now obtainable in alpha in a brand new library material3-window-size-class, as a part of the Materials 3 set of libraries. You’ll be able to learn extra about measurement lessons within the Supporting completely different display sizes documentation and try a pattern implementation in Crane.

Give attention to efficiency

That will help you perceive and enhance your app’s efficiency, we centered lots on new efficiency tooling and steering. With this, it turns into a lot simpler to know why and the place your app may be lagging.

Ranging from Android Studio Dolphin, you possibly can examine how typically composables recompose utilizing the Structure Inspector. Unexpectedly excessive numbers of recomposition can level you to a composable that might be optimized. As well as, Android Studio Electrical Eel now features a recomposition highlighter, a visible help to see which composables recompose when. Learn extra about this new tooling within the What’s new in Android Studio weblog.

Structure Inspector exhibiting recomposition depend and recomposition highlighter.

Compose adjustments the best way you write your UI at a elementary degree, so there are some finest practices you could undertake to verify your app is performant. The newly launched documentation web page suggests the right way to write and configure your Compose app for finest efficiency. Within the I/O discuss Widespread efficiency gotchas in Jetpack Compose, the Compose group describe frequent efficiency errors and the right way to repair them.

Efficiency is an ongoing space of focus and we’re working arduous on enhancing and increasing tooling and steering. Within the meantime, we’d actually recognize your suggestions on the work we’ve performed to this point. Please increase your bugs within the problem tracker or ask your questions on the KotlinLang Slack group.

New instruments

On prime of enhancements, there are additionally new tooling updates that can assist you use Compose extra successfully. Android Studio Dolphin, now in Beta, brings thrilling options for Compose improvement. Past recomposition counts, new instruments embody Animation Coordination so you possibly can see and scrub by all of your animations directly, and the MultiPreview annotation that can assist you construct for a number of display sizes. To allow you to iterate sooner Android Studio Electrical Eel (in Canary) brings LiveEdit.

Try What’s new in Android Improvement Instruments for all the main points, and be sure you share your suggestions to assist form the tooling assist you want for Compose.

Compose for Put on OS

If there’s something higher than Compose, it’s extra Compose! So we’re very excited to see Compose for Put on OS shifting to Beta! Following the identical precept as another Jetpack library, Beta signifies that it is characteristic full and API secure, and you can begin constructing your production-ready apps. Go forward and watch the discuss, and browse the weblog put up!

New and improved steering

We’ve added and revamped plenty of the steering on Compose:

Blissful Composing!

We hope that you just discover these new options as thrilling as we do. If you have not began but, it is time to be taught Jetpack Compose and see the way it will slot in your group and improvement course of, so to expertise all the advantages of improved velocity and developer productiveness. Blissful Composing!