Jetpack Compose

Jetpack Compose is Android’s new modern UI toolkit. Learn how Compose simplifies & accelerates your UI development, allowing you to create richer, more robust and responsive UIs. We outline our roadmap, what is ready for use right now, share our direction in areas that are still evolving, and show how the tight integration with tooling makes the development experience even better. Get up to speed with Compose and how it can help you to build better apps!
Resources:
Get Jetpack Compose Developer Preview 2 → goo.gle/36OsmFt
Read the samples → goo.gle/3drIXRO
Chat with the team on Slack → goo.gle/2ZR58gu
Check what’s coming → goo.gle/37eVRkc
Related Playlists:
Android 11 → goo.gle/android11
Modern Android Development playlist → goo.gle/modern-android-develo...
Jetpack playlist → goo.gle/jetpack
Subscribe to Android Developers → goo.gle/AndroidDevs
Speaker:
Romain Guy
#featured #android11 #betalaunch #jetpackcompose
event: #Android11: The Beta Launch Show; re_ty: Publish; product: Android - Jetpack Compose; fullname: Romain Guy;

[@robertlee9116]

It's like the react hook function, and I'm shocked by how powerful kotlin can be used, it will be a huge change of android UI. I'm so excited to see that.

[@MrAudriusz]

I think Leland, Romain and whole Compose team might become heroes to all android devs. Heroes who freed us from the View

[@gaurav414u]

While its very tempting to consider this statement true, but the composable UI components is a an old thing. React and flutter have been doing this for ages. Apple with swift UI and android with Jetpack compose, seems like the entire mobile ecosystem is moving towards the declarative UI paradigm.

[@yannick6927]

That's because declarative ui works best with reactive logic

[@SnoopyDoofie]

Romain was one of the original developers of the View.

[@simrandotdev]

@@gaurav414u 4-5 years is not ages lol

[@gaurav414u]

Simran Preet Singh ha ha! On a lighter note, in android dev world its indeed ages. Todays android development would be totally greek to a mainstream android developer, time traveling to the future from 4 years ago. 🙃

[@drac.96]

I am totally going to use this for making apps! I especially love the way you can make lists now!!!

[@michaelnajera7958]

I'm glad you took your time instead of just dumping it as a ready to go solution that wasn't.

[@AleksandarStefanovic]

The animations solution is excellent!

[@SociedadAndroide]

Compose is already at Alpha, there was so much work on this, from dev2 3 months ago, to alpha now, congrats to the team !! this is amazing news

[@AntonDerevyanko]

Possibility to use Compose along with classical code is huge advantage!

[@phanip9908]

Excited!!

[@Xaxxus]

This is exactly what SwiftUI on iOS is. Its nice to see every platform getting a similar way of making UI. The codebases can now be basically the same between the two platforms without having to use some cross platform framework.

[@Gebes]

Yeah. Still flutter will be a nice solution for the next few years. Look how slow people get the newest Android version

[@mads2357]

@@Gebes compose is independent of the android version. Though i think it doesnt support anything below API 21 if i remember correctly.

[@robchr]

This is awesome. I cannot wait to try it out. ❤️ the RxJava support.

[@sky-xk5be]

use coroutines and live data plz

[@greenspand]

Amazing. Super easy testing.

[@gabrieltofvesson8164]

This is just beautiful!

[@divyanshudn]

Hi, I moved from Android to iOS when swiftUI was announced, I love working with swiftUI and I feel every mobile dev should create views in SwiftUI way in my opinion, I am closely looking at Jetpack compose to make Android dev great again with lots of animations and custom views.

[@pxnx]

Flutter-Vibes. Sweet☺️

[@milendimitrov8708]

Great idea, great job, applause for the Compose team. I think this is the future of modern Android development, but maybe it is a good idea to start developing a graphical tool that generates the code of the Compostables. I think the popularity of the Constraint Layout is because of this feature.

[@mads2357]

Yeah, when I first began the auto generation feature was a great way to get into the constraint layout works. With time i mobed to editing xml directly more and more, but I appreciate the beginner-friendlyness and the quick approximation of my ideas it provides.

[@abdullahalmaruf5513]

Great job Compose Team 👍👍👍

[@abhishekjha7749]

Compose will completely shake the Android World.

[@gaurav414u]

Like flutter has already shaken the mobile world :)

[@triannoviandi788]

@@gaurav414u ya, but i think compose would be better because it using kotlin

[@shaun.august]

@@gaurav414u flutter has certain use cases..It could never be the replacement of native dev, You know in future we will be depending heavily on platform specific infrastructure...as future is platforms dependent..Kotlin and Swift will always remain the king..

[@farazahmed7]

MotionLayout- "Am I a joke to you?"

[@headoverbars8750]

Been watching Romain from the beginning... Used to listen to Tor on Java Posse and remember way back then, wondering if there wasn't a better way to do UI... I had "felt" that UI should be declared and handled in code but then it was about performance and from a different level of abstraction... I believe this is likely a bit more performance taxing than writing UI in straight Java or C++ (... Had Android gone with a different idea like a mobile version of Swing) but you could never get the flexibility and seamless beauty this promises to bring to the table. Bottom line is the hardware can run this stuff now let's have a great time creating things of beauty!

[@alexneeky7920]

and now constraint layout feels like huge overkill

[@nbaua3454]

Yeah... and this new syntax is a overkilled zombie... I guess react native's (and so the other multi platform Fws) move to use flex-layout like a CSS is a smart and elegant way to go. Less hassle to develop and so less to maintain/update your code... (sh#t who names constrains with Tags...)

[@brymoTube]

Modifiers > Nested Composables I'm really happy they went this route. Nested views in flutter are an eye sore.

[@cruelplatypus67]

Flutter has tooooi much nesting

[@gorudonu]

I disagree, it creates "god" class connected many, not-related things

[@keithkaranu4258]

@@gorudonu I suspect that those modifiers are actually extension methods so the class it self wouldn't be that big

[@shaun.august]

@@cruelplatypus67 flutter is nice but has very bad looking syntax..kotlin in contrast is really good looking when it comes to syntax and code structures..

[@arsen1156]

Awesome!

[@ifromfaraway]

Very good. Great effort.

[@maksonic_official]

I’ve been studying android for about 9 months, before that I didn’t know anything about programming, it’s hard to learn, because the development of android is going very fast, but I see that JetPack Compose is the future android development!

[@shaun.august]

if you have got in android dev, you should be doing that in kotlin..in kotlin android dev is a lot easier and fun..and is super easy to learn for beginners

[@gofudgeyourselves9024]

The thing of mixing Constraint Layout with jetpack Compose feels like we are making a brownfield app

[@VishnuHaridas]

Curious to know what's the plan on navigating between different screens in Compose. 1. Will it be the same as what we have now, like many Activities and Fragments with the `setContentView()` replaced by a composable function instead of XML layouts? 2. Or many composable screens and a navigator/router like in Flutter? (where a single Activity can switch between many composed screens) 3. Or something else?

[@CopernicoTube]

An interesting thing we can thing about compostables with modifiers (are like some kind of visitor pattern, right?) is take appart the styling from the UI. But how about take the layout itself from components behavior? As a developer, I can imagine construct my layout as a set of generic bounding boxes arranged as a specific way, without worry about what component is where. So I could define modifiers (styling, animations) *on the boxes*, not the components yet. And on a last stage, I can apply my component tree on the bounding boxes tree. And every component on a box assume the modifications that can be applied. So I could reuse my components tree on another screen design (layout tree), this way the same UI can look different on alternative designs or device orientations, without need of things like fragments... As I can also reuse the box tree to an alternative component tree (same design different content) to preserve visual identity across application, for instance.

[@mads2357]

I think you could do this in compose. Yud just have to use slots for every component in the tree and fill it in with actual ui later. Admittedly the way one would pass the ui component would be a little tricky if you aren't careful.

[@umairkhalid123]

I think same team who worked on flutter is working on Compose as well

[@markonovakovic3838]

this is the greatest thing ever! :D

[@rueleonheart2467]

There's a typo for tlRadius variable at 17:00, should be rlRadius.

[@zyrnnh110]

tl is for Top-Left

[@Boba0514]

@@zyrnnh110 yeah, the typo is the other way around

[@131617]

👏👏👏

[@dilanatabaychannel9611]

Jetpack Compose is cool!

[@MrAidooyaw]

very nice

[@abirhasan6476]

What's going to happen to Motion Layout after Jetpack Compose?

[@gaurav414u]

LOL

[@shaun.august]

It will remain there, going nowhere..Jetpack compose is a new guy to this family of android UI...which is in contrast of declarative nature..

[@williaansouza]

very good 👏👏👏👏

[@ivanovicnosel9157]

A runtime layer that abstracts platform-specific operations by using a virtual tree? Where have I heard this before?

[@PSIXOtheX]

Is there a source code for that material shop app shown in the video somewhere? Is that using filament library within compose UI?

[@lafanitech]

Nice video

[@bdmaxvalera]

Wow, more likely functional programming, like dart and flutter 😍

[@lukugeraud]

Im scared but will learn

[@kirill4531]

Hold up... Is it the same as how Flutter builds widgets with states?!

[@DanieleSegato]

Why aren't testing tags modifiers? Is there a reason to keep them as separate functions? is there a place to give these kind of feedbacks? EDIT: oh, it says at the end of the video: 23:00

[@vishnusafaya8460]

One side Google is pushing Flutter and also they are making this on the other side. It just keeps getting tougher to select one as a newbie.

[@tashi7160]

TestTag sounds a little weird. Are we suppose to add it every compose function for the UI test? 20:23

[@AlashovBerkeli]

No testing no problem

[@Borszczuk]

Why onDispose() is nested in onAcive (@19:20)? Looks like both should be equal.

[@sky-xk5be]

i was thinking the same thing, but it kinda makes sense since you can't destroy anything that u haven't created.

[@athulantonyn.p6147]

Seems like it is react hooks practice. Inspired from react js

[@chainimkar6196]

Are the chapter names auto generated? the ConstraintLayout section reads "Constantly Out" :)

[@peter7433]

It's interesting, but I am afraid that these testing tags clutter everything if you need to add them to each composable?

[@ravenarts2065]

as a flutter developer, i really like this :D

[@milendimitrov8708]

I will like Flutter more if it supports Kotlin ;)

[@yeilmusic]

How can we change the constraintset when the orientation changes?

[@mads2357]

I would imagine you'd do it with an if statement checking orientation and setting the constraints there after.

[@TheLinuxAdmin88]

Good

[@moritz_p]

What the hell I just found this after learning the old UI stuff for the last few days so I guess I'm not done learning yet.

[@divyanshudn]

Is jetpack compose production-ready now? I tried it in Canary builds and looks fine to me.

[@shaun.august]

NOT production ready yet..it is still in dev preview..but soon it is going to be production ready..

[@hirendesai8261]

is there any bug in android studio canary 4.2? cause whenever i make changes in jetpack compose app i need to uninstall the app and then have to install it again in order to see changes. I'm not able to see changes after running app or instant run feature.

[@mads2357]

In the preview window there should be a "deploy to device" button that updates the ui. Does that one worrk for you?

[@Eagle-jo8cx]

It will be like SwiftUI, does anyone knows when jetpack will be ready to use for production?

[@zyrnnh110]

2021, the 1.0 version

[@thelittlenaruto]

I wonder if we are going back to ancient era of functional programming...

[@jseh_]

what kind of flutter is it ?

[@amauryricardo8233]

Nice video. - Is stable? - What about maintenance? (Flutter has the same philosophy and maintenance is a hell)

[@rahuljanagouda]

Was there an Android 11 launch keynote? 7:14

[@ezralopez]

I don't think there was a keynote this year, but he's referring to this video kzbin.info/www/bejne/mHLHg36Hg8d_o7M

[@armandoavila4615]

So we should use Compose instead of Databinding, right?

[@SamuelIceBlade]

Compose isn't ready for production use yet, so for now you're probably better sticking with data binding in production apps. But by all means play around with Compose so when it's ready for use in production you'll have that head start in your understanding

[@StratusHunter]

Is it just me that thinks the syntax is really confusing and super nested? To be fair I've not written in this or SwiftUI yet but from the outside these solutions seem really convoluted and complex for even slightly custom UI.

[@StratusHunter]

@Kachi .X Since Donut :) The big thing for me is the heavy nesting, gonna need an ultra wide monitor for the arrowing :P Don't get me wrong the features are really awesome, my specific issues are with the arrowing, syntax and the verbosity. But like I've said I've not written with it yet so it's just an outside perspective for now.

[@BooshyBrows]

I'm waiting for a native drag and drop app builder that lets me worry about building the app and not updating the architecture every year - you change how the app is built as much as you like in the background and I'll worry about my apps functionality

[@LaithBasilDotNet]

Why functions start with capital case ?

[@gopalakrishnanv2099]

To make it look like a Component

[@CaioFaustino]

5:05 did I hear Compose multiplatform?

[@saransankaran]

They also have soemthing called desktop-ui under AOSP. Commonsware also wrote a blog post about his findings, about support for mutiplatform might be coming in future.

[@rajatbaniya8676]

fluttery vibe..i love it

[@VishnuHaridas]

Instead of that complete complex ConstraintLayout, can we use a `Stack( Image, Row( Button1, Button2, Text, Icon, Spacer, Text))` like in Flutter, which is cleaner and easier to understand and maintain?

[@romainguy]

You can yes, this was just to show ConstraintLayout. But there are stacks, rows, columns, etc.

[@lukezhang213jeff]

How do you have emulator as a tab inside Android Studio at 7:42

[@SuegroLM]

Go to View -> Tool Windows -> Emulator prntscr.com/uvrpxb After that, open the tab and set it up. It has instructions on what to do to set it. But if you're talking about the "Preview" tab at the right, you can get it opened by typing the @Preview tag above your @Compose function. If you do that, Android Studio will show that tab automatically.

[@user-wc4zm4kc7l]

@@SuegroLM Hi SuegroLM/I want to ask that I have typing the @Preview tag, why Android Studio not show that tab automatically,is the version wrong?

[@SuegroLM]

@@user-wc4zm4kc7l Hello, probably it is wrong since @Preview only works on Canary versions of Android Studio. You can check your Android Studio version on your Android Studio IDE -> Help (On the top side of the IDE) -> About. It must be a Canary version, or what it is called now "Arctic Fox".

[@SuegroLM]

​@@user-wc4zm4kc7l Also, you must do a successful build of your project (On the Android Studio IDE -> [Build]) in order to get it to work!

[@bahaaka828]

why introducing a new coding style and not replicating the same way used to write Web frontend in Kotlin Kotlin React is a great example of building UI components and the way you write your code is much more cleaner and readable than this. was it hard to replicate it?

[@easazade]

This is how flutter ui is written. I dumped native android for flutter last year.

[@nirmankalia6775]

I smell SwiftUI...😌

[@mehmetadi2872]

so far. swiftUI support up to TVOS screen size. idk about jetpack compose. so far looks like for mobile

[@keithkaranu4258]

@@mehmetadi2872 I see no reason that jetpack compose can't be used on Android TV

[@mehmetadi2872]

@@keithkaranu4258 why?

[@keithkaranu4258]

@@mehmetadi2872 Compose is just a library with a compiler plugin nothing stopping you from adding it to an Android TV project.

[@mehmetadi2872]

@@keithkaranu4258 but so far. no guide unlike SwiftUI which does have guide for everything

[@ROHITUPRETI]

Can i not use compose in Java for Android ?

[@connectedr]

No

[@cruelplatypus67]

No

[@ROHITUPRETI]

Starting to hate java more and more now, creating dynamic ui is a hell

[@connectedr]

@@ROHITUPRETI Switch to Kotlin. It's easy to learn and far better than Java in every way.

[@amauryricardo8233]

@@connectedr "creating dynamic ui is a hell"

[@chelseaisking]

wow flutter suddenly looks not so hot anymore :D

[@mehranj73]

Just give us the stable release date

[@hasszhao]

same like flutter, swift ui

[@lex2dby]

github.com/romainguy/sample-materials-shop code from video if someone interested

[@Kloonder]

So this is what happens when you combine kotlin, competent programmes and a lot of money

[@mohammad-karbalaee]

Bye Bye damn XML, Hello Jetpack Compose

[@HarpreetSingh-dl4ip]

I feel like seeing flutter relaunched.

[@AntonDerevyanko]

As for me,- Compose looks less useful comparing to Flutter. It is like a half path to reactive UI. Anyway, I will try it.

[@joostklitsie5107]

Can you please elaborate? Flutter has a different purpose than Android development, and Android development will probably benefit a whole lot from Compose. The syntax is quite similar I would say. Also, a totally new framework in dev state (so pre-alpha) is not yet finished, yet you can already achieve cool results with it. So what do you mean with it is a half path to reactive UI?

[@AntonDerevyanko]

@@joostklitsie5107 I mean that in the Flutter whole architecture of the framework is built on the reactive approach. State, objects, and UI are managed and recycled quickly and cheaply. There is no need to search for a widget by tag. Also hot-reload works perfectly. It is not clear for me how objects and views are managed in the android in the case of Compose. I need to try to use Compose to be more confident. Right now it is just first impression.

[@andy_lamax]

So true, Compose is like half path to Flutter because it was modeled to resemble react hooks. UIs are just functions of modles and states are just hooks in to the functions. That's why you won't see stateful or stateless widget in Compose

[@codepresso592]

It's better than flutter's nested hell

[@mirabhiwaniwala3174]

Just like flutter

[@Audio-Library-Sound-Track]

Lñp

[@AnkitKumar-sz5wu]

So basically it's flutter...

[@nbaua3454]

somehow it looks like a crossbreed between React Native and Flutter....It may sound little off topic...but hell no.. Old Java days with Android were much better... Kotlin ruined the fun to some extent.. this ruins it further.

[@MrAidooyaw]

i want native android extensibility + flutter ui

[@probhakarsarkar2430]

why don't u just make dart work in jvm, so that we can use flutter :p

[@deviantstudio]

why don't implement compose for ios/desktop? so we can get rid of flutter in favor of KMP+compose

[@shaun.august]

@@deviantstudio That is technically not a good idea. Compose is an android UI kit, not a cross platform. You ask this same question from Apple that why their Swift UI is not for android and flutter or even windows???

[@deviantstudio]

@@shaun.august the compose is being developed as platform agnostic thing. they even pushed some desktop prototype recently. so in theory you could at least test widgets on desktop. and i believe it is possible to port compose to ios. never say never

[@gorudonu]

the other way would be better - why compose doesn't use kotlin-native and drop java world altogether ;)

[@shaun.august]

@@deviantstudio That is not going to happen..Compose is engineered for Android...ONLY....

[@SnoopyDoofie]

Kind of looks like a ripoff of React.js

[@ayushchothe8785]

Flutter is also good

[@nickolaysavchenko2582]

Just like Flutter, but code looks like bunch of random symbols without deep understanding Kotlin. Flutter much more easy to use and learn - just make your app. Compose looks like another one language.

[@dumitru3355]

Well, no one talks about Dart but everyone know Flutter

[@nickolaysavchenko2582]

@@dumitru3355 dart + flutter = love

[@dumitru3355]

For me, flutter is like a new language too

[@nickolaysavchenko2582]

@@dumitru3355 for me dart very intuitive and simple. And has ternary operation:))

[@dumitru3355]

​@@nickolaysavchenko2582 Oh it's just buzzy stuff, scala doesn't have a ternary operator, also it's pretty easy to live without ternary operator when "if" does return a value.