Basic layouts in Compose

Поделиться
HTML-код
  • Опубликовано: 4 ноя 2024

Комментарии • 85

  • @AbdulelahAGR
    @AbdulelahAGR 2 года назад +27

    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
      @dekus80 2 года назад

      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
      @farhazulislam4029 2 года назад

      Great ;) it really works

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

      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 Год назад

      ㅣ🎉

    • @helenasong8
      @helenasong8 Год назад

      ㅣ🎉🎉

  • @GuilhermeHolz
    @GuilhermeHolz 2 года назад +54

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

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +6

      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
      @RobinYoulton 2 года назад

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

  • @yasserakbbach7342
    @yasserakbbach7342 2 года назад +21

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

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

      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
      @rosacristina6459 Год назад

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

  • @dineshk7830
    @dineshk7830 Год назад +4

    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.

  • @liltofer
    @liltofer Год назад +2

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

    • @AndroidDevelopers
      @AndroidDevelopers  Год назад +1

      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

  • @nishanthnagella
    @nishanthnagella 2 года назад +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
      @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

  • @farhazulislam4029
    @farhazulislam4029 2 года назад +5

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

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

      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

  • @MrMoggz
    @MrMoggz 2 года назад +1

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

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

      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

  • @SapphireStudioart
    @SapphireStudioart 2 года назад +1

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

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

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

  • @Sauletekis39
    @Sauletekis39 Год назад

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

  • @vengateshm2122
    @vengateshm2122 2 года назад +1

    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!

  • @andrewdunbar828
    @andrewdunbar828 Год назад

    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!

  • @marcfearby7338
    @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).

  • @chandra_83
    @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
      @AndroidDevelopers  2 года назад +1

      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 😀

  • @digitalluxury2033
    @digitalluxury2033 2 года назад

    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
      @AndroidDevelopers  2 года назад

      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

  • @rwxyz
    @rwxyz 2 года назад +1

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

  • @mohitgoel2353
    @mohitgoel2353 6 месяцев назад +1

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

  • @waynesmith1863
    @waynesmith1863 2 года назад

    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
      @AndroidDevelopers  2 года назад

      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 🏃

  • @shashankkapsime492
    @shashankkapsime492 2 года назад +1

    Amazing presentation. Very useful!!

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

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

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

  • @avdim88
    @avdim88 2 года назад +1

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

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

      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

  • @abderrahimelgomri1626
    @abderrahimelgomri1626 2 года назад +1

    great video , do more of these

  • @marcinzale
    @marcinzale 2 года назад +1

    Great content! Thank you.

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

      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
      😎

  • @MarlosThiam
    @MarlosThiam Год назад

    Amazing. From Brazil

  • @Hamna120
    @Hamna120 2 года назад

    learned a lot appreciated documentation reading is complex as video

  • @wrabzidea
    @wrabzidea 7 дней назад

    This is amazing

  • @TheRastaDan
    @TheRastaDan 2 года назад +1

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

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

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

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

    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.

  • @rockyknight007
    @rockyknight007 2 года назад +1

    Thanks Google Team.

  • @jawwadali8276
    @jawwadali8276 2 года назад +1

    Thank you very much!!

  • @tabassumfatima2398
    @tabassumfatima2398 Год назад

    great video

  • @Hooperlink
    @Hooperlink 2 года назад +1

    thanks a lot!!! great video

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

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

  • @georgeampartzidis9060
    @georgeampartzidis9060 2 года назад +1

    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
      @AndroidDevelopers  2 года назад

      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 😎

  • @VilRapt
    @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!

  • @ananjaygurjar
    @ananjaygurjar 2 года назад +1

    Awesome!!!

  • @vamsimusicbeats
    @vamsimusicbeats 2 года назад +1

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

    • @AndroidDevelopers
      @AndroidDevelopers  2 года назад +1

      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 😀

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

    nice job

  • @schinsky6833
    @schinsky6833 2 года назад +1

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

  • @mattolinallc8888
    @mattolinallc8888 Год назад

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

  • @Ahmed7255
    @Ahmed7255 Год назад +1

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

    • @valneyfaria5599
      @valneyfaria5599 Год назад

      For like a second, I think I saw Camtasin logo

    • @Ahmed7255
      @Ahmed7255 Год назад

      @@valneyfaria5599 thank you

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

    very nice

  • @Musa-al-Khwarazmi
    @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.

  • @timmyroberts1
    @timmyroberts1 Год назад

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

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

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

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

    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.

  • @ajh158
    @ajh158 Месяц назад

    How were the parameter names autofilled @4:20?

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

    BottomNavigation is not available in latest release ?

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

      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:

  • @arunpandiyan3101
    @arunpandiyan3101 2 года назад +4

    Why is she so cute ?🥰 By the way Learned a lot!

  • @jansprlak110
    @jansprlak110 2 года назад +1

    Beta tester od roku 2016 oceňujem,

  • @jabrane1564
    @jabrane1564 Год назад

    light mode. My eyes

  • @albab790
    @albab790 Год назад

    Tankyou google

  • @xpopcornx1747
    @xpopcornx1747 2 года назад +5

    Simona is cute

  • @haykmkrtchyan7093
    @haykmkrtchyan7093 2 года назад +1

    Just guys make sure to wrap your MySootheApp() inside your theme:
    setContent {
    MySootheTheme {
    MySootheApp()
    }
    }