Basic layouts in Compose

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

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

50% 1

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

Наука

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

10 май 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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!

@dekus80 Год назад

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.

@farhazulislam4029 Год назад

Great ;) it really works

@AndroidDevelopers Год назад

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 😄

@helenasong8 Год назад

ㅣ🎉

@helenasong8 Год назад

ㅣ🎉🎉

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

Learned more in this video than a full day reading the documentation, amazing presentation.

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

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

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

I agree, an excellent presentation, a great learning resource.

@yasserakbbach7342 Год назад

I hope to keep this kind of workshops with every new API, way better than the docs 👌

@AndroidDevelopers Год назад

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 😎

@rosacristina6459 Год назад

@@AndroidDevelopers################################################################################################################## ################################################### ################################################### ############################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################😂##😂#😂#####😂#😂######################################################################################################################################################################################################################################################################################################

@dineshk7830 Год назад

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.

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

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!

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

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

@liltofer Год назад

This is the most precise workshop video I have ever seen about compose 👌🏾really great work

@AndroidDevelopers Год назад

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

@Sauletekis39 Год назад

Awesome tutorial! Thank you very much! Really more contents like these are needed

@SapphireStudioart Год назад

excellent showcase! thank you for the knowledge! these seem to be some frequently used concepts for the UI, this really helps

@AndroidDevelopers Год назад

Thank you for your kind words! We are happy to help! You can find more on Compose here 😄 → goo.gle/3eBPkaU

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

Thank you for the Compose presentation and CodeLab, learnt a lot.

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

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

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

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.

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

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

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

great video , do more of these

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

Thank you very much!!

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

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

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

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 😀

@farhazulislam4029 Год назад

Amazing Learing Guide for developers, From Jolenda and Simona. You guys should make more videos like Paging in Compose, Animations, DrawerLayout : )

@AndroidDevelopers Год назад

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

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

Awesome!!!

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

Thanks for the video! What about updating preview "on fly"? Or we need tap "refresh"/hotKey every time?

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

Amazing presentation. Very useful!!

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

Thanks for the feedback, Shashank. We're glad that the tutorial was helpful!

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

Very useful! Layouts it's most important theme to create super cool Apps! Thanks a lot!

@AndroidDevelopers Год назад

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

@marcfearby7338 Год назад

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

@marcinzale Год назад

Great content! Thank you.

@AndroidDevelopers Год назад

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 😎

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

thanks a lot!!! great video

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

i forgot to mention, but last screen is much different than in codelab and video (not as planned)

@digitalluxury2033 Год назад

Learned more in this video than I hope if you could do more videos like this adding navigation and click listener to chilled >>>> thaaanks

@AndroidDevelopers Год назад

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

@Hamna120 Год назад

learned a lot appreciated documentation reading is complex as video

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

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!

@MarlosThiam Год назад

Amazing. From Brazil

@floppa9415 Год назад

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.

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

very nice

@waynesmith1863 Год назад

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.

@AndroidDevelopers Год назад

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 🏃

@tabassumfatima2398 Год назад

great video

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

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.

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

nice job

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

Thanks Google Team.

@timmyroberts1 11 месяцев назад

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

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

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!

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

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

@hiteshsarsava563 Год назад

There is issue in alignment of the search icon and placeholder. Both are not in a center horizontal.

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

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?

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

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

@vamsib298 Год назад

As a beginner , what should i learn first in jetpack compose from scrach to deep, i have knowledge on basics of android

@AndroidDevelopers Год назад

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 😀

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

Is there a way to make LazyHorizontalGrid's height to "wrap content" instead of hardcoding it?

@Musa-al-Khwarazmi Год назад

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.

@georgeampartzidis9060 Год назад

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) ] .

@AndroidDevelopers Год назад

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 😎

@movieclips7511 Год назад

Hi, which tools are used to make these type of videos, like having 2 instructors and the screen available in one video

@valneyfaria5599 Год назад

For like a second, I think I saw Camtasin logo

@movieclips7511 Год назад

@@valneyfaria5599 thank you

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

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.🤓🤓🤓🤓🤓🤓🤓☺️☺️☺️😊😊😊😊

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

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!

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

I think it was a missed oppurtunity to tell a bit about Preview-Parameter. But other than that it was super helpful.

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

BottomNavigation is not available in latest release ?

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

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:

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

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.