Jetpack Compose basics | Workshop

Подписаться 1,3 млн

Просмотров 143 тыс.

50% 1

This Workshop takes you through the basics of building your first app with Jetpack Compose, Android's new modern UI toolkit that simplifies and accelerates UI development on Android.
To follow the Workshop, make sure you have the latest Android Studio (Arctic Fox Beta or newer) installed.
Resources:
Codelab: goo.gle/compose-basics
Latest Android Studio: goo.gle/arctic-fox
Speaker: Florina Muntenescu
Watch more:
Android and Play at Google I/O 2021 Playlist → goo.gle/io21-AndroidDevs
All Google I/O 2021 Workshops → goo.gle/io21-workshops
All Google I/O 2021 Sessions → goo.gle/io21-allsessions
Subscribe to Android Developers → goo.gle/AndroidDevs
#GoogleIO #Android #Featured #JetpackCompose
product: Android - Jetpack Compose; event: Google I/O 2021; fullname: Florina Muntenescu; re_ty: Livestream;

Наука

Опубликовано:

22 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 193

@daniyar2718 2 года назад

I like how recyclerview (Including adapter,viewholder) is being implemented in JC, just using Column and loop, so easy, that's amazing...

@donenhero5624 2 года назад

Use LazyColumn , no Column

@Channel-uu2yw 2 года назад

@@donenhero5624 thanks!

@haykgalstyan6560 2 года назад

It's not a recyclerview really.

@deepakbisht4957 Год назад

@@haykgalstyan6560 he is just trying to say a recycling view alternative. Lazy column also do recycling...

@CornelisMariavanHerpt Год назад

fully agree

@thecodingfeast 2 года назад

Me:*Learns new stuff in android* *Just the next day* Google:You know what? we got a new way of doing that that is easier and yeah it requires you to learn it. Me:*dies in learning*

@thecodingfeast Год назад

@ Ahaha, it's the sMe for me...but those are really worth it.

@colthurling Год назад

@@thecodingfeast what's the problem with xml one? Boilerplate code? but now a days content assist is there then what's the problem? Instead of making new libraries google keeps us learning new languages, that's not fair

@thelexicon4232 9 месяцев назад

I laughed so hard so much it's sad😂

@oleksee 3 года назад

Although mic quality is not the best, strangely I had no problem hearing Florina talk, despite other comments. Thanks for this workshop,!

@d4vidia 3 года назад

Kudos for this simple walk-through. It's great to see how Compose has managed to bring all of React's superpowers into the Android ecosystem.

@researchandbuild1751 2 года назад

Hmmm. React makes sense in HTML world but I'm not sure the concepts really should apply in an app world..how can we have a designer "create the UI" separate from code now? If the code is creating the UI..One of the benefits of concepts like Data Binding is you can literally swap out the UI that lays on top of the viewmodel without changing any code at all (like WPF / MVVM does). With compose the UI designer needs to know how to code Java/Kotlin to create the UI. Granted I don't know enough about it yet to make a full judgement.

@arsnakehert 2 года назад

I think this is extremely similar to SwiftUI rather than React, but I bet SwiftUI was influenced by React quite a lot

@coppice8412 2 года назад

@@researchandbuild1751 As always the designer may use tools like Figma to create the design, while developers implement the design. Tools like React or JC simplify the implementation. You still need the creative process of coming up with a good design for your purpose. And if separated correctly it is also easy to swap out the UI without touching any business logic.

@deepakbisht4957 2 года назад

@@researchandbuild1751 lol why it doesn't make any sense? Like Html and CSS compose also has a learning curve and we are now doing everything in a single programing language instead of too much coupling between XML and Kotlin code. It's a much much better approach to code than using XML and those fragments... Many developers create UI by their own and designers just give the assets and all UI measurements instead of XML for Android...

@straight-out-of-camera Год назад

Trigger people that don't understand React... GO

@vivekgupta5749 2 года назад

Previewing simple steps like changing background color or changing margin taking lots of sec(when running for first time) this is where I want jetpack Compose's team to work on because system like I have can take upto minutes.

@TheMikkelet 2 года назад

regarding state keeping, why did you make composable function-only? Why not make them class based like flutter's Widgets?

@markdheilong Год назад

Excellent workshop on using Jetpack Compose with Kotlin for Android programming. Watching this video after getting stuck made it much more clear to me how to continue past my stuck point. I will continue again until I get it right all the way through to the end of the codelab.

@celsoluizdeoliveira1643 2 года назад

How do I do in addition to changing the status bar, also change the color of the icons (ex: cell phone battery icon)?....in your examples you change the color of the bar, but the icons are still white. I would like to know how to do this, as my prototype has this item in yellow color

@andalus8242 2 года назад

Where can I find the whole list of the composable components like Text and Surface?

@alinababenko985 2 года назад

Cool! Thanks for this video! It was very basic, but very helpful to start working with Compose

@n-o-i-d 2 года назад

Jetpack Compose is an amazing experience so far.

@angelparedes4024 Год назад

😢😢😢

@intellect.dev5 3 года назад

@Florina Muntenescu - here in this workshop, we have used the function names without the lower camel case, Is it something which is recommended for Composable?

@hellespont5072 3 года назад

Yes, the naming convention for @Composables is to capitalize them :)

@dibbo-mrinmoysaha406 3 года назад

Will there be a visual layout editor as along with XML?

@rondamon4408 2 года назад

Except for the sound, this is a great tutorial!

@jatinvashisht4293 3 года назад

Amazing workshop, worth giving like

@easyCodeRu 2 года назад

Thank you! This one is really interesting. I see how UI is made in Flutter and it's just the same idea

@awkwardquestion8643 2 года назад

знакомые все лица))

@yalcinozer4434 2 года назад

When I compare it to React Native style UI design it is really bad. Im not a fan of Facebook but they did a great job for declarative UI design.

@OnivasCS 3 года назад

Thanks for the nice video! It is a good overview about Compose ;)

@tricksilver04 3 года назад

do we have pub.dev like component search for Jetpack Compose components?

@ronzdee99 2 года назад

Awesome tutorial! Thanks :) more likely style with swiftui :D anyway, Compose is amazing!

@haniyfakhouri 3 года назад

Great workshop. Thanks!

@marsgrib 2 года назад

Great video! Thank you very match!

@j.almadhaji 3 года назад

Thank you .. that was easy to follow

@DREDD112 2 года назад

Very useful! Thank you!

@silver10188 2 года назад

Other than the audio, it's awesome! tutorial thank you.

@GabrielTrifa 6 месяцев назад

Great presentation, thanks Florina!

@theren8311 3 года назад

I'll have to watch this later with headphones.... 😕. Thanks for the session nontheless.

@jobbb 3 года назад

Pro tip: The audio volume is very low until 36:38, then it suddenly gets louder. Turn your speakers/headphone volume down at that timestamp :p

@francoisloriot2674 2 года назад

No.

@el0j 2 года назад

no it doesn't

@melkieg3753 3 года назад

Thank you for such a great content.

@muhammadhaseeb2326 3 года назад

I have error abstractmethoderror in jetpack compose android after I update android studio

@Renaro 2 года назад

Are there official resources for Compose UI + Fragments? Most examples I see are using activities or some work around.

@AndroidDevelopers 2 года назад

Hey, Renaro! You can find more information about Fragments in Compose via the link we've placed below 🙂 developer.android.com/jetpack/compose/interop/interop-apis#fragments-in-compose

@artemkhateev3650 3 года назад

This is amazing! Thanks)

@CarlosSaltos Год назад

Qué genia !! ... qué buen video ... muchas gracias por compartir !!

@user-ez4nm1ke1b 2 года назад

This is amazing! Thanks

@oracleuser-bh1sp 3 года назад

I don't understand , what's the difference between project that has jetpack and the project doesn't has ? could you build the simple project that doesnot has jetpack , but do all functions as the jetpack project does . users will compare to more understand .

@PsijicV 3 года назад

What about callbacks? What is the best way to use compose values in fragments? Especially if they are in async calculations?

@deepakbisht4957 2 года назад

Callbacks? Use Coroutine and flow... And Compose don't really need fragments to work.

@PsijicV 2 года назад

@@deepakbisht4957 for a new codebase they don't :)

@deepakbisht4957 2 года назад

@@PsijicV I said compose are not dependent on fragment. Ofcourse you can use Compose in existing codebase that contains activities and fragments :)

@sahilzilka365 2 года назад

i still have doubts about the complexity we will face while making a firebase/firestore app with compose

@thelexicon4232 9 месяцев назад

My preview is not showing even if its in split mode Ive tried everything i can think of to be the problem still not working

@mkroven 3 года назад

Great explanation. Thank u.

@_AnkitBisht 2 года назад

That was nice explanation, specially that lazy column thing

@CarlosSaltos Год назад

On new versions use rememberSaveable instead of remember at the Button counter click variable declaration

@straight-out-of-camera Год назад

I was happy to see the the react style too: val (value, setValue) = remember { mutableStateOf(default) }

@pvarela 3 года назад

I will be calling my main compose function MainActivityComposition :D

@akthamahmed2171 3 года назад

Thank You 👍

@jopadjr 3 года назад

Thanks for the tutorial

@witoldsienski1709 2 года назад

Thanks for material :)

@adrianjoachim5819 3 года назад

Either the audio was edited - or I must have super-listening-powers ;) Nah, amazing video! Great content! I didn't have any problems understanding Florina.

@dennywikiebook946 3 года назад

Nah, I also heard that at : 31:20

@syedmuhammadawais3185 2 года назад

Refreshing and rebuilding is very annoying in xml we can have the changes live. Is android team working on live changing instead of rebuilding to see UI changes?

@colthurling Год назад

what's the problem with xml one? Boilerplate code? but now a days content assist is there then what's the problem? Instead of making new libraries google keeps us learning new languages, that's not fair

@pranshul.. 2 года назад

So cool 🤩

@praveenkumarspk676 2 года назад

Thanks for the session. It is very useful to get knowledge about Jetpack compose.

@eiliyaabedini Год назад

Thank you it was great

@AndroidDevelopers Год назад

Thanks for the positive feedback, Eiliya! We're so glad it was helpful 🙂 If you’re interested in additional resources, check out the Jetpack Compose Tutorial here: goo.gle/3QoJPdj

@farnadtohidkhah1684 2 года назад

Thanks for good workshop

@thecode-easywaytosolveprob3776 2 года назад

really helpfully this video.

@nimesh519 2 года назад

thanks, tutorial help me lot

@1Ozgur 3 года назад

nice useful video thanks!

@mattolinallc8888 7 месяцев назад

Great tutorial on Jetpack compose. I really love Android and hope one day to build my own Android OS phone using Linux. I also use Ubuntu Servers for hosting my Android apps. As a Software Engineer I love Android development pretty easy.😊😊😊😊😊😊🎉🎉🎉

@morningstarbbm Год назад

@ 23:05 Did she say, it Introduces bugs??.

@antdx316 Год назад

Can you use non-jetpack compose kotlin code inside the same jetpack compose .kt?

@AndroidDevelopers Год назад

You absolutely can! Check out the link below for more insight on how to adopt Compose in your app. We hope this helps 😊 Adopting Compose in Your App → goo.gle/3WXIUDo

@antdx316 Год назад

@@AndroidDevelopers It doesn't seem to work unless you know what you are doing.

@hnim2292 3 года назад

Which is better performance, LazyColumn or RecyclerView?

@Lawnio 2 года назад

Doesn't it depend on what you exactly try to render? The more the better the RecyclerView is going to perform? I would love to hear if you have any updates on this.

@anwarhussainshaik2067 2 года назад

Great Explanation. :)

@claytonsantos136 3 года назад

audio volume is very low

@Channel-uu2yw 2 года назад

nice!!

@MateusMeurer 3 года назад

This is not beginner friendly at all . Is this so much better that worth transitioning from something that we know and that works quite well? What are we aiming for here? I don't mind changes, I love them. Is there someone who can explain to me why is this better?

@sammndl9592 2 года назад

I am new to Jetpack as well. As far as I understand, it just eliminates the use of xml files and now you can design the layouts in your specific class only (or somewhere else based on the chosen architecture pattern). It must get very ugly as the layout's gets more complicated though.

@researchandbuild1751 2 года назад

It's not. I mean...maybe for some people it's easier to understand how to build say, a list of items with code, vs creating an adapter view XML. But it's not "better" in fact it's worse in many ways IMO.

@noebenjaminreynosoaguirre1565 10 месяцев назад

Graaciaas :))

@ManishKumar-qh9wb 3 года назад

Thanks for the great session 👌 Can we create composable fragment ?

@dilanatabaychannel9611 2 года назад

nice!

@joesilva-rodriguez9 3 года назад

Bruh, I know we're software devs and all... But cmon... video quality and audio quality is 2016 Pewdiepie levels.

@sinaseyfi 3 года назад

2000 levels :)

@sinaseyfi 3 года назад

2000 levels :)

@chitrangpatel9754 2 года назад

Why function names are upper-camel case?

@deepakbisht4957 2 года назад

Because these are not "normal" functions but they are "composable" functions to make UI components. Like TextView, Button and all other View classes we are mimicking the naming scheme from there...

@samstoyroom 2 года назад

Please make this course on Udacity!

@cadore6745 Год назад

Ligth Theme???

@arielgoska5955 3 года назад

Florina 🙌🏻🙌🏻💚

@thelexicon4232 9 месяцев назад

My preview is not working

@wykeless 2 года назад

animateColorAsState not working for anyone else too?

@Attee_Q 2 года назад

Hi, will there be a subtitle for the video?

@AndroidDevelopers 2 года назад

Hi, Atteee! For this video, we have English caption support. However, if you are looking for captions in a different language, we would love to hear your feedback!

@Attee_Q 2 года назад

@@AndroidDevelopers Hi, I only see an automatic caption, english subtitle is enough for me.

@trejkaz 2 года назад

34:00 I assume this animation looks bad because tween uses a linear curve whereas human perception of intensity isn't linear?

@conner_b_griften Год назад

How can we trust this if you can't even get the jank out of the audio in the introductory video?

@edgarortiz168 2 года назад

My question is: how is compose helping to separate layers in terms of desing and code? As far as I'm understanding this new paradigm, is that me, as a coder, now I must have to know a lot of design.. and worse.. Now I need a designer that knows how to actually code.. For small projects, this might work. And for the video, yes the audio is awful.

@researchandbuild1751 2 года назад

Exactly, now the UI designer needs to know how to write code. That's the drawback IMO

@deepakbisht4957 2 года назад

A Android developer can design things of their own instead of relying on UI developers. All you need from UI/UX developer are assets, measurements of components and all...

@Luis-xe9og Год назад

Agree. I don't see this scalable with large projects. How awful will look to combine multiple things on the screen along with the business logic. these composable makes no sense so far

@SalmanWahed 2 года назад

Building each time to see the UI changes in effect does not seem very efficient.

@KotlinBek 2 года назад

so there are no nav_graph && fragment

@deepakbisht4957 2 года назад

Happy fragments are going from Android. They are the real pain for Android developers from starting...

@nayandhabarde 2 года назад

Compose gives a lot of freedom to how you can distribute your ui code and we all know what to do with Composables. Does any one know what not to do with compose?

@Steve-sm2mw Год назад

I like how similar it looks compared to SwiftUI

@mondoshigua Год назад

👋🏼🇨🇴🧔🏻👍🏼🤝🏼 Saludos desde Colombia.

@studentdabble7876 3 года назад

I am now getting comfortable with java and android development, was I wasting my time? do i need to switch to Kotlin for this now or can I stick with Java and compose? Java to me is a very interesting language so it would be sad to see it fade out.

@jetsrlikec0mets 3 года назад

I believe Compose is Kotlin-only.

@techdrago7378 3 года назад

Its kotlin only. It uses kotlin compiler plugin internally so wouldn't work for java. Definitely Give kotlin a try. Android is moving more and more towards kotlin.

@icy3222 3 года назад

Kotlin is so much better than Java, highly recommned to learn Kotlin

@aiders4352 3 года назад

Java is dying in Android app development outside of the Android SDK itself (which is strictly no Kotlin). That said, understanding Java is important for understanding the Android SDK and better equips you for working with Kotlin as it's compiled to JVM bytecode. Understanding Java will also help you interop with existing Java APIs when working with Kotlin.

@sinaseyfi 3 года назад

Leave the java alone :))

@DavidNitzscheBell 2 года назад

4:35 preview and emulator are not the same. oops.

@nicklasnilsson8217 2 года назад

Feels like i just watched a Flutter tutorial.

@spokesperson_usa Год назад

It's good to see Google has finally adopted a real programming language for Android development. I know most software developers love to program in XML and Yaml, but I'd rather eat rat poison.

@olukayodepaul7070 2 года назад

I prefer the XML Ui thing than to coding the UI.

@jNayden 2 года назад

only one comment for the presenter please buy a better microphone :( but overall good talk.. explains the basics in a perfect way.

@ghali3059 2 года назад

The Soundquality is like from 2010 , please buy her a nice professional microphone that meets her lvl on engineering profession.

@nanavong9841 3 года назад

hardly hear clear

@carinaschoppe Год назад

maybe a voiceover would be great

@MaisUmSomente 2 года назад

The audio is horrible.

@ThEGeEeK 3 года назад

Flutter dev happy

@ngoanrazor 3 года назад

I see Compose don't make code less, it is similar Flutter more code more code

@juxtlie_games 3 года назад

Only I think it's not convenient?

@JJTtWw Год назад

Compose is killing me, I’m dying from frustration

@Ram-lh7dz 2 года назад

using a preview is great but loading a preview means wait -for the peace.

@eagledeath4276 2 года назад

i think java+xml powerfull combo than kt+compose

@JensOlander 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qGCpegxIG0Y.html has louder audio (but still not great quality)

@NLS87 2 месяца назад

Great work, Florina. I learned a lot. But, Google, the audio is NOT acceptable. Ridiculous that a trillion dollar company can't spare $50 for a decent microphone!