Compose by example

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

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

50% 1

Jetpack Compose is a new declarative UI toolkit built for the demands of creating modern user interfaces. Get started with Compose and learn about the new APIs and Material components that make up the toolkit by examining concrete UIs we’ve created with it. We’ll walk through examples of theming, animation, layout and more, demonstrating how to customize and combine components to build real UIs. We’ll show how the new toolkit simplifies your development experience and enables new possibilities.
Timestamps:
Theming: 01:22
Dynamic Theming: 5:20
Testing Theme Changes: 5:46
Custom Design Systems: 6:28
Layering: 9:28
Layout: 10:01
Modifiers: 10:35
Custom Layouts: 14:17
Animating Layout: 17:30
Animation: 18:31
Animation Inspector: 20:13
Testing Animations: 20:35
Resources:
Compose samples → goo.gle/compose-samples
Compose codelabs → goo.gle/compose-codelabs
Compose docs → goo.gle/compose-docs
Kotlin Slack sign-up → goo.gle/compose-slack
Check out the 11 Weeks of Android website → goo.gle/30FDT8S
Related Playlists:
UI - 11 Weeks of Android playlist → goo.gle/ui-11weeks
11 Weeks of Android playlist → goo.gle/android-11weeks
Subscribe to Android Developers → goo.gle/AndroidDevs
Speaker:
Nick Butcher - @crafty on Twitter → goo.gle/2D1Soe3
#featured #android11 #11WeeksOfAndroid #jetpackcompose

Наука

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

23 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

So simple, yet so powerful

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

My mind was blown 5 minutes in with the dynamic theme.

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

Really looking forward to these new samples 💯

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

Android Team always motivating me to do more and more in android. Thank You for this video.

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

Awesome video !

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

Great video! Can you guys also make videos on how compose and Architecture Components (Room, livedata & navigation) can be used together? Also, big fan of Nick! Plaid was the app which opened my senses on how UI design development should be done. Great work, y'all!

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

This is just amazing

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

Oh boy, I am really excited to use this new animation stuf in stable release

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

This API looks promising. What I need now is to shake my head and get this right on

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

By the way, your codelabs are really nice

@albab790 Год назад

Thanks

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

Can you talk more about what's going on under the hood i. e. how compose ui is integrated into the current android view layout and draw process?

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

We will soon!

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

Hi, Can u do a video using lazycolumn headers with a list of class objects? Thanks!

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

You lost me on the custom layout logic. Let's hope it gets easier with some more experience and practice!

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

Sorry if I went too fast, was trying to pack an overview of a lot of things into this video! Have you checked out the sample code?

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

@@NickButcher Yes I have. It gets easier the more I look into it. I believe by the time this is more stable (1-2 years) the entire way of thinking will make so much more sense. Thanks for the videos, they have been very helpful!

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

I had to pause and replay this part a few times because it goes fast but it wasn't so hard to understand. @@NickButcher Yet one thing I don't understand in that code is why do you use constraints.minHeight in the layout() call, while you use constraints.maxHeight to vertically center the items? Shouldn't these 2 values be the same?

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

great 😌😌👌🏻

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

Absolutely awesome! what about the performance?

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

Guys now the ambientOf is renamed to compositionLocalOf, also, does this JetColorPallette need to extend Colors? It is kinda confusing

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

I think this is the beginning of a new era in mobile development.

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

Mr. Butcher, I have been trying to create the custom color palette as you mention in the video for three days now. I have literally copied every logic from Jetsnack Sample App Theme, but it JUST DOES NOT WORK. If I copy the Theme.kt from the Codelab, it works, but after scanning through each and every line in my code and the Codelab's, I could find no difference other than the names. Could you please publish an official how-to on this? Thank you,

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

ah yes google releasing more things I'll suck at doing 🤣... joking aside, I am really excited to try these out 😍😍

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

Great presentation as always. If the animation with the compose is really easy then, do we still need MotionLayout? Already constraint layout with the compose seems overkill compare to XML based.

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

XML isn't going anywhere anytime soon so it's still getting features.

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

@@keithkaranu4258 I think you missed the point. Since compose is the new UI toolkit that doesn't use XML and gives developers full control over UI development, the question was will there be a compose equivalent to MotionLayout and if the animation is way easier as they claimed than do we even need MotionLayout.

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

@@tashi7160 From what I gather because motion layout is xml is easier to develop tooling for. As such I don't think there will be a visual editor for any jetpack compose animations which is one of the main benefits of motion layout. Also keep in mind that even if there is overlap between the two tools it doesn't mean that motion layout is already obsolete. Jetpack compose will be in alpha for a while so for the time being motion layout is probably the go to for any UI that needs to be animated.

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

Where do we get the slides?

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

cool!!!!

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

How different layouts for different screen sizes or orientations are going to be managed? (Right now if I want a different layout I just need to create a new layout folder with the rules but how will that be managed with Compose?)

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

Ask this on the reddit AMA they have tomorrow. There will be answers to everything there.

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

'remember' (for this see think in compose video) function will remember state, height and width can be managed using orientation .i.e if(horizontal) 60 else 20

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

Check out the `WithConstraints` composable. developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#WithConstraints(androidx.compose.ui.Modifier,%20kotlin.Function1)

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

@@NickButcher Just what I was looking for. Thanks!

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

The ambientOf is not present in the beta version

@correabuscar Год назад

10:18 I think Stack is now named Box, right?

@Lucas-hh4oh 3 года назад

damn, this is beautiful

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

Nice technology. great flexibility

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

that's all i want

@pvarela Год назад

makes the hard things harder!!

@jean-paulzimmermann6366 3 года назад

Many examples won't open in Android studio Canary (Invalid gradle) - How many hours lost!

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

13:00 Hours struggling because I didn't know how to Alignment.CenterStart the Text Composable, until I realized I could use .wrapContentSize(Alignment.CenterStart). If I had known from the start that I could just use padding and re-arrange the order of my modifier properties to get my Composable completely selected, I'd have done that 😂. I was kind of conscious about the fact that modifier order affects the result, but I didn't know it was up to this extent 😳.

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

The gravity modifier has been changed to align modifier. You could use Modifier.align(Alignment.CenterStart) now to achieve the effect

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

Oh my goodness

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

So under the hood the custom layout is same as before? Thats bad, as comparing to SwiftUI this is a huge drawback, it should have been needed to be way simpler. Those measure + layout combo was highly painful things in Pre compose.

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

Now...I feel Good to be an Android Developer...

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

10:16 Flutter devs: Hey wait, I feel like I have seen this before

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

New things to try. But migration will be painful

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

soooo many changesss for android UI and it seems to me compose is more than complex xml system

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

In this moment that Compose are 1.0.0 version stable, they have changed from ambient to compositionLocalOf, and the @Compose will only works above get() = ...

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

This is using the older APIs. Most of these examples will not compile. Now that Beta is released it needs to be updated ...

@rahulkumar-td7pn 3 года назад

Compose will be a revolution in android community, lets see Compose vs Swift Ui whose gonna win

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

There's too much to digest...

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

ha ha....

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

Flutter Flutter Flutter :))

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

Flutter is still better.

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

Why

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

@@keithkaranu4258 you can't build complex UI with this, in flutter you already have pre-build widget that are 100% customizable for almost all your needs.

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

@@h3w45 Jetpack Compose already comes with material design and as shown in other videos It's trivial to create more complex widgets from the privatives already provided.

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

@@keithkaranu4258 we will see how will it will do.