Compose by example

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

[@LasseMagnussen]

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

[@PedroBarbosaRoman]

So simple, yet so powerful

[@goobar]

Really looking forward to these new samples 💯

[@chebbaelyes]

Awesome video !

[@RoshitGopinath]

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!

[@deepmodi9354]

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

[@shhaabu]

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

[@hmtamim3499]

This is just amazing

[@LEGENDMORTAL]

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

[@rohanmanchanda5250]

By the way, your codelabs are really nice

[@shist2536]

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

[@hiteshchalise3988]

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

[@albab790]

Thanks

[@GakisStylianos]

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

[@NickButcher]

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]

@@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]

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?

[@iyxan2340]

Absolutely awesome! what about the performance?

[@mohammadcs5708]

great 😌😌👌🏻

[@steveyao7321]

cool!!!!

[@mpx41]

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]

We will soon!

[@Lucas-hh4oh]

damn, this is beautiful

[@tashi7160]

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]

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

[@tashi7160]

@@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]

@@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.

[@avirias]

that's all i want

[@pvarela]

makes the hard things harder!!

[@TLTthatsME]

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

[@rohanmanchanda5250]

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

[@bjugdbjk]

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

[@mohsenteymouri5426]

Nice technology. great flexibility

[@rperez93]

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]

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

[@techieasif1]

'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]

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

[@rperez93]

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

[@SuegroLM]

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]

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

[@rohanmanchanda5250]

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,

[@AshwinR]

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

[@correabuscar]

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

[@LucasdeAlmeidaMarciano]

The ambientOf is not present in the beta version

[@ozgurtas4508]

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

[@vishalgaware7598]

Where do we get the slides?

[@kevinkuan1756]

Oh my goodness

[@SouravBagchigoogleplus]

New things to try. But migration will be painful

[@jean-paulzimmermann6366]

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

[@MasterA6858]

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.

[@vxcloudxv]

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]

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]

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

[@Dpk950]

There's too much to digest...

[@TheBlackManMythLegend]

ha ha....

[@nguyenhuutinh001]

Flutter Flutter Flutter :))

[@h3w45]

Flutter is still better.

[@keithkaranu4258]

Why

[@h3w45]

@@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]

​@@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]

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

[@zacharylippard2994]

Can you give an example of a complex UI where Flutter provides an easier solution over Compose?