Basic layouts in Compose
Вставка
- Опубліковано 10 тра 2022
- Learn how to implement a realistic and complex UI using Compose Layouts. Use out-of-the-box composables and modifiers to transform designs into Compose code. Discover how to implement a screen from MySoothe, a sample relaxation app. Learn to write the code for each of the screen's separate elements, and then combine those into the complete screen.
Resources:
Basic Layouts in Compose → goo.gle/3P4yjUq
Layouts in Compose → goo.gle/37lSSuk
Modifiers in Compose → goo.gle/3Pek53x
Speakers: Jolanda Verhoef, Simona Stojanovic
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Android and Play at Google I/O 2022 playlist → goo.gle/IO22_AndroidDevs
All Google I/O 2022 workshops → goo.gle/IO22_Workshops
Subscribe to Android Developers → goo.gle/AndroidDevs
#GoogleIO #Featured #JetpackCompose #AndroidDevelopers - Наука та технологія
That is an excellent video! I have a note for other developers. In the HomeScreen where she added a Spacer() instead of padding to solve the issue of contents being clipped when scrolling. Actually, there is another way to do it as well by just doing this:
modifier = modifier
.verticalScroll(state = rememberScrollState())
.padding(vertical = 16.dp)
Modifiers' order matters so when we first add the verticalScroll, this will cause the scroll to be applied before the padding and will not clip the children.
I love compose so much because of this feature as it gives us endless capabilities.
Thank you both, Simona and Jolanda!
And she didn't pass Scaffold padding to HomeScreen. Without this pass I have collections cut in landscape by bottom bar. But I learn on M3 compose from the beginning but suppose it must be same on M2.
P.S. And with M3 and with this video tutorial I had to make some little researches, because M3 has some different classes.
Great ;) it really works
We're so happy to know this lesson from Jolanda and Simona provided some useful guidance, Abdulelah! Thank you for your kind words of support and for sharing knowledge with the community 😄
ㅣ🎉
ㅣ🎉🎉
Learned more in this video than a full day reading the documentation, amazing presentation.
We're happy to hear these Compose layout tips were helpful, Guilherme. You can also check out our guide for more detailed information: goo.gle/3P4yjUq
I agree, an excellent presentation, a great learning resource.
I hope to keep this kind of workshops with every new API, way better than the docs 👌
We're glad to hear you found the tutorial video so helpful, Yasser!
Don't forget to check out the links in the description for more tips and tutorials 😎
@@AndroidDevelopers################################################################################################################## ################################################### ################################################### ############################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################😂##😂#😂#####😂#😂######################################################################################################################################################################################################################################################################################################
This tutorial was damn good with a very good explanation. Google has tons of videos for android but this tutorial is by far the best by a huge margin. Great work from Jolanda and Simona 👏👏
Google please make more such long videos and don't fast forward things like you do in other videos, please make more videos like this one.
Again a big shout out to both the developers who explained everything so clearly. Thanks a bunch, hoping to see more such videos from you two.
Amazing video! Learned a lot of basics and neat tricks in this video. Love it, as I was able to finish the entire codelab faster than I had anticipated. Thank you, Simona and Jolanda. Love the video!
Happy to hear that the video was helpful, Nishanth. We're also delighted that you were able to finish the codelab at your own pace. We recently released a new Compose course, check it here: developer.android.com/courses/android-basics-compose/course
This is the most precise workshop video I have ever seen about compose 👌🏾really great work
We are glad you liked it! We've made a playlist of all the announcements from I/O 2022 you can find here: goo.gle/IO22_AllSessions
We also have some great tutorials in our MAD Skills playlist you might enjoy: goo.gle/3YK0VHD
Awesome tutorial! Thank you very much! Really more contents like these are needed
Thank you for the Compose presentation and CodeLab, learnt a lot.
We're happy to hear this, Murage. If you'd like to learn additional resources regarding Jetpack Compose, check out our guide: developer.android.com/courses/android-basics-compose/course
great video , do more of these
Thank you very much!!
Great tutorial, thanks. For me, the final preview of MySootheApp had huge fonts because I followed your video directly, but I fixed it by wrapping the Scaffold in a MaterialTheme (per step 12 of the written tutorial).
excellent showcase! thank you for the knowledge! these seem to be some frequently used concepts for the UI, this really helps
Thank you for your kind words! We are happy to help! You can find more on Compose here 😄 → goo.gle/3eBPkaU
Amazing Video, I personally was kind of reluctant to learn about compose since I got most of my experience from an Angular and Android's "classic" XML Layouts and Compose looked quite alien for me. But now I get the jist of it, a Composable doesn't seem all that different from an Angular component.
I will definitly continue my learning compose journey, hope the videos about state management and animations are just as good.
This whole UI Framework also shows how big of a move it was to integrate Kotlin into the Android development scene. Something like this would just not fly at all with Java.
This video rocks!!!! I've been thinking about using Jetpack Compose and this video was a nice intro. I'll definitely be playing around with this over the weekend.
Thanks for the feedback, Kirk. If you're interested in learning additional resources, check out the Jetpack Compose walthrough here: developer.android.com/courses/android-basics-compose/course
Thank you for this excellent video. Learnt a lot about JetPack compose from this video. Going through this video as a reference will help in developing own designs
We're happy to hear that the video was helpful! If you’re interested in additional resources, check out the Jetpack Compose pathway courses: goo.gle/compose-pathway
Happy learning 😀
Amazing presentation. Very useful!!
Thanks for the feedback, Shashank. We're glad that the tutorial was helpful!
Amazing Learing Guide for developers, From Jolenda and Simona. You guys should make more videos like Paging in Compose, Animations, DrawerLayout : )
We're glad to hear you thought the video was helpful, Farhazul! Thanks for the great feedback 😎
If you’re interested in additional resources, be sure to check out the Jetpack Compose walkthrough here: goo.gle/3QoJPdj
Thanks for the video! What about updating preview "on fly"? Or we need tap "refresh"/hotKey every time?
learned a lot appreciated documentation reading is complex as video
Awesome!!!
Thanks Google Team.
Amazing. From Brazil
Learned more in this video than I hope if you could do more videos like this adding navigation and click listener to chilled >>>> thaaanks
We're glad the video helped! We definitely enjoy making this sort of content available to you. Make sure you subscribe, so you don't miss any of our videos: goo.gle/AndroidDevs
You can find our getting started guide on Navigation here: goo.gle/3BVeHNU
Very useful! Layouts it's most important theme to create super cool Apps! Thanks a lot!
Happy to hear you enjoyed this! Thanks for the feedback 🙂
If you’re interested in additional resources, check out the Jetpack Compose walkthrough here: goo.gle/3QoJPdj
Great content! Thank you.
We're glad you enjoyed the video, Marcin! If you’re interested in additional resources, check out the Jetpack Compose walkthrough here:
goo.gle/3QoJPdj
😎
nice job
thanks a lot!!! great video
i forgot to mention, but last screen is much different than in codelab and video (not as planned)
This was a really good style of video! I see far too many that are overly scripted and too wooden and unnatural which makes it hard for me to keep mentally tuned-in. If only more programming tutorials were this good!
great video
very nice
For me, this "rubber meets the road" presentation (sorry for the idiom 🤪) captures the essence of the development process. For the first time I am starting to believe that a declarative tool set can be used to capture strict design requirements. Well done.
We always like to go the extra mile, Wayne. You can check out our Jetpack Compose Pathway course here to learn even more: goo.gle/3S0OKBt 🏃
This really helped me to get a grasp on what should I use to build UIs with Compose, especially the workflow to start with the simplest possible components and then just arrange them together.
But I have one question:
I didn't really understand the use of the modifier parameter. When modifiying child elements you often used a new Modifier object instead of the one passed in the parameter list.
What is the reasoning behind using one or the other?
Hi! It's best practice to have all of your composables accept a modifier parameter (and set a default param, just in case), and pass that modifier to its first child that emits UI. Doing so makes your code more reusable and makes its behavior more predictable and intuitive. Check out the links below for more information on this topic:
bit.ly/3xZxwNW
bit.ly/3HyANr2
Miss Florina my favourite tutor. Anyways you guys made the content clean and clear.
I always love watching basic stuffs although have developed few apps with compose.
Thank You!
Thank you so much. I learnt alot in this video and I've got a question. Please how can I change the background color from the brown which is the default for the codelab we implemented to a different color. Thank you.
Is there a way to make LazyHorizontalGrid's height to "wrap content" instead of hardcoding it?
Thanks for this detailed and well explained video! I've got a question: Why do we add the modifier: Modifier = Modifier parameter in almost every function and then pass it as a parameter in the Composables? It seems that we might as well omit it and only add it whenever needed. For example, in the HomeSection function - We don't necessarily need to declare the modifier [ fun HomeSection(modifier: Modifier = Modifier) ] and then pass it as a parameter to the Column below [ Column(modifier) ] .
Hi there!
It's best practice to have all of your composables accept a modifier parameter, and pass that modifier to its first child that emits UI. Doing so makes your code more reusable and makes its behavior more predictable and intuitive. For more detailed info on this, checkout the Compose API guidelines:
goo.gle/3PifZGr
Hope this helps 😎
This is ASMR as a Software Engineer. I LOVE SOFTWARE DEVELOPMENT AND DEVELOPMENT KITS helps me sleep no wonder my Mother doesn’t understand tech like me but it’s okay though hope to work with Google one day and attend events.🤓🤓🤓🤓🤓🤓🤓☺️☺️☺️😊😊😊😊
I think it was a missed oppurtunity to tell a bit about Preview-Parameter. But other than that it was super helpful.
I believe that the practices you used to create a card are not recommended by Google. Card wouldn't be able to adapt to the screen size, user/device accessibility settings and will lead to a content to be cropped/unreadable. To fix that, just don't specify tile width and or height explicitly. Or additional boundaries should be placed: number of lines, characters and etc. There are different ways to handle images, so they would occupy the space required by design... Alternatively, use recommend/min sizing. But in general, a really good intro/starter pack. thanks!
11:37 The search icon and placeholder are not aligned vertically. The tops of icon and placeholder are matching but they should be matching in vertical center.
There is issue in alignment of the search icon and placeholder. Both are not in a center horizontal.
Thanks a ton. The codelab helped alot in adapting intutite approach while building UIs for the app. FYI, for landscape mode the variable " val windowSizeClass" is having value of WindowWidthSizeClass.Medium instead of WindowWidthSizeClass.Expanded, which is suggested in the latest version of codelab. [Dated: April17, 2024].
Hi, which tools are used to make these type of videos, like having 2 instructors and the screen available in one video
For like a second, I think I saw Camtasin logo
@@valneyfaria5599 thank you
As a beginner , what should i learn first in jetpack compose from scrach to deep,
i have knowledge on basics of android
Hi Vamsi, thanks for being a part of the Android Community. If you'd like to learn more about JetPack Compose (including additional tutorials), please visit this link: goo.gle/3da5BmW
Happy learning 😀
BottomNavigation is not available in latest release ?
Bottom navigation in M2 has been renamed to navigation bar in M3. In M2 there are the BottomNavigation and BottomNavigationItem composables, while in M3 there are the NavigationBar and NavigationBarItem composables:
@8.25 they open the textfield definition, how does she do that? I'm using Android Studio and I dont see an option, in the video she just magically appears with the definition open. no worries accidentally discovered if you hold CTRL while clicking it opens it.
Beta tester od roku 2016 oceňujem,
Using `R` to access resources for Compose is a bit of a dead end - it will work on Android, but no other platform, so when you want to get the same app running on desktop, or web, or iOS... you will probably end up rewriting that.
I do wish we had a better solution to resources on non-Android, though. Passing relative paths is fine, but the Android way of doing it is nice because it catches typos. Similar commentary about accessing strings. Android's way of handling plurals is cleaner than what you'd see when loading strings in any other way. I'm not even sure I have seen a clean way to do this on the desktop version of Compose yet.
ok
Tankyou google
light mode. My eyes
Why is she so cute ?🥰 By the way Learned a lot!
Simona is cute
Just guys make sure to wrap your MySootheApp() inside your theme:
setContent {
MySootheTheme {
MySootheApp()
}
}