Column Layouts with Jetpack Compose

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

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

  • @puhgeh
    @puhgeh 4 года назад +11

    i was sold with the drawing.

  • @3riodokaos333
    @3riodokaos333 3 года назад +11

    For newer versions image is loaded by :
    Image(
    painter = painterResource(id = R.drawable.happy_meal_small),
    contentDescription = "Happy Meal"
    )

  • @mishaeliseev
    @mishaeliseev 3 года назад +5

    Hey, Mitch! You are my best teacher now !

  • @davidscammell9823
    @davidscammell9823 3 года назад +2

    Glad to see you doing Jetpack Compose! Just starting to look at it, but looks like a load of refactoring will be needed! Also, great to hear you on the Fragmented podcast! 👍👍

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

    You mentioned the video number on the thumbnail, that's a good idea, it will give u immediate insight like that its a part of a playlist...as always u r a great teacher...thnx mitch

  • @mal7othify
    @mal7othify 4 года назад +3

    Amazing work Mitch!! I like this series. I do have some suggestions for enhancements:
    * In the image API, it is easier to use bitmap = imageResource(id= R.drawable.imagename). Rather than use imageFromResource( … )
    * In Text API you do not need to call the “text= …” every time. Compose is mart enough to know that when you write a text in double quotation that it is the text without specifying.
    * In the Text API, it is useful to define all TextStyles inside the UI/Type.kt file. Then specify what style to use in the text by defining the “style = …” then we call the style we defined like this “style = typography.h1 or whatever other styles you defined, style body1 may be.
    * In Text API again :( , we can specify the fontSize = 16.sp directly without the text unit.
    Keep up the good work.

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

    Mitch exposing his artistic skills

  • @chiragpatel6410
    @chiragpatel6410 4 года назад +39

    This looks like flutter in native!!

    • @codingwithmitch
      @codingwithmitch  4 года назад +5

      Yeah pretty much

    • @testwhwhja
      @testwhwhja 3 года назад +1

      @@codingwithmitch
      we can use xml instead
      why usinq jetpack compose

    • @thearpansircar
      @thearpansircar 3 года назад +11

      @@testwhwhja You can also light a fire by rubbing stones, why do you use a lighter?

    • @jatinvashisht4293
      @jatinvashisht4293 3 года назад

      @@thearpansircar 😂 dope

    • @rajiac7552
      @rajiac7552 3 года назад

      Exactly, so what will happen, flutter adopted as native 🙄

  • @ZeDzszedl
    @ZeDzszedl 3 года назад +1

    Keep it up! First programming series from a long time that I enjoy listening. 👍

  • @dbtechprojects2392
    @dbtechprojects2392 3 года назад

    This is so much more pleasing than XML

  • @mahdizareei4575
    @mahdizareei4575 3 года назад

    I want to say really really thank you so much, my friend,
    I learn many things from you,
    I love you so much, you are the best in the world

  • @brianssendagire262
    @brianssendagire262 4 года назад +1

    Your caption images are exceptional. I like each one of them

  • @anuradhaamarasinghe9649
    @anuradhaamarasinghe9649 3 года назад +3

    Some how the scrollable column was not available for me. So I had to use the following for that. Thanks Mitch. Keep up the good work. Stay safe.
    setContent {
    Column(modifier = Modifier
    .fillMaxHeight()
    .fillMaxWidth()
    .background(Color(0xFFF2F2F2))
    .verticalScroll(
    rememberScrollState()
    )) {
    Image(
    painter = painterResource(id = R.drawable.happy_meal_small),
    contentDescription = "none",
    modifier = Modifier.height(250.dp),
    contentScale = ContentScale.Crop
    )
    Column(modifier=Modifier.padding(16.dp)) {
    Text("Happy meal", style= TextStyle(fontSize = 26.sp))
    Spacer(modifier = Modifier.padding(top = 10.dp))
    Text("800 Calories", style= TextStyle(fontSize = 17.sp))
    Spacer(modifier = Modifier.padding(top = 10.dp))
    Text("$5.99", style= TextStyle(fontSize = 17.sp), color = Color(0xFF85bb65))
    }
    }
    }

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

    Hey Mitch, here’s your engagement ;)
    Seriously amazing content! Very grateful to you.

  • @ssSFrankSss
    @ssSFrankSss 3 года назад

    Hi I am a paid member and I support you! I have just started, I hope it is not outdated. As soon as I start at 4:30 I could only make it work with following code: Image(painter = painterResource(id = R.drawable.happy_meal), contentDescription = "")
    Please go through your project and check for outdated code thank you. Keep up the good work ;)

    • @ssSFrankSss
      @ssSFrankSss 3 года назад

      Later on: Unresolved reference: ScrollableColumn, Also it took me time to change font size (i had to figure out how to make it work) so I will ask for a refund totally disappointed unfortunately....

    • @KshitijJain
      @KshitijJain 3 года назад

      @@ssSFrankSss What will you ask refund for LOL :p. This is a free course. Please use Google if you face any such issue. Compose was in alpha, and there are a lot of API changes, until an API is stable. Solution is to use
      Column(modifier = Modifier.verticalScroll(rememberScrollState())) instead of ScrollableColumn

  • @unknown710
    @unknown710 4 года назад +1

    I'm currently studying flutter but I got more interested in compose just after watching this video.

  • @devrajsingh7207
    @devrajsingh7207 3 года назад +1

    Thank you for explaining from a very basic level.
    Here is your engagement,
    Thanks...
    now going to see your next video on same topic :D

  • @anshumandhal
    @anshumandhal 3 года назад

    Here's your engagement. Best of luck, Mitch 👍

  • @lukewithey6548
    @lukewithey6548 2 года назад +3

    Pretty sure some of this is out of date now my code seems to work just trying to brush up on compose after coming from xml way of doing things here is my code as of today (in setContent{}):
    setContent {
    Column(
    modifier = Modifier
    .verticalScroll(
    state = ScrollState(0),
    enabled = true
    )
    .background(color = Color(0xFFF2F2F2))
    .fillMaxSize()
    ) {
    Image(
    painterResource(id = R.drawable.happy_meal_small),
    contentDescription = "",
    modifier = Modifier.height(300.dp),
    contentScale = ContentScale.Crop
    )
    Column(modifier = Modifier.padding(16.dp)) {
    Text(
    text = "Happy Meal",
    style = TextStyle(
    fontSize = 26.sp
    )
    )
    Spacer(modifier = Modifier.padding(8.dp))
    Text(
    "800cal",
    style = TextStyle(
    fontSize = 18.sp
    )
    )
    Spacer(modifier = Modifier.padding(8.dp))
    Text(
    "£5.99",
    style = TextStyle(
    color = Color.DarkGray,
    fontSize = 18.sp
    )
    )
    }
    }
    }

  • @devgabriel6898
    @devgabriel6898 4 года назад +3

    Hi Flutter :p. I love it!! This changes all for Android native develop :D

  • @KimKim-ko7sy
    @KimKim-ko7sy 3 года назад

    Hey mitch. This Jetpack Compose sounds great.

  • @aayushbisen
    @aayushbisen 3 года назад +1

    Great Introduction Mitch.
    PS: I like your shirt, it's looking very good.

  • @ravidadhania6722
    @ravidadhania6722 3 года назад +1

    Hey, Mitch! Nice Tutorial Brother.

  • @sheenfabile9460
    @sheenfabile9460 4 года назад +3

    You become more better on how to explain things on android. Maybe you can upload vids about your workout routine. Stay safe Android Mitch!

  • @ashuonlineforall8308
    @ashuonlineforall8308 4 года назад

    Very nice video - to the point and real hands-on. 1 thing worth notice with this kind of declarative-style UI development ( which i did in react-native and Flutter for 2 apps) is that the only way to test your UI changes is by running an app on to device/emulator. Is there an equivalent of "design preview" which we are used to in the Android Studio Layout editor that you might have came across for these declarative-style UI development tools - such as Jetpack compose or Flutter?

  • @Tamerthedark
    @Tamerthedark 3 года назад

    Hey Mitch
    Thank you for amazing tutorials.

  • @mithilmehta1501
    @mithilmehta1501 4 года назад +5

    Don't you think this approach is adding UI related boilerplate in Activities or Fragments instead of layout xml?

    • @codingwithmitch
      @codingwithmitch  4 года назад

      No it's superior

    • @DerCheckerzeigts
      @DerCheckerzeigts 4 года назад +1

      You can do all of this with composable functions as well, so this does not have to be inside a fragment / activity..

  • @mr.jinxist
    @mr.jinxist 2 года назад

    Nice work on this Mitch. But, yes, a lot of refactoring is needed. Will still be following this tutorial though.

  • @farukarnaut90
    @farukarnaut90 3 года назад

    Hello Mitch, thank you for the amazing tutoring. 😁

  • @vicky22702
    @vicky22702 3 года назад +1

    👍 amazing drawing skills 😂
    Great work 👍

  • @igor.tkachenko
    @igor.tkachenko 3 года назад +1

    I just wanted to say thank you

  • @SamuelToloza
    @SamuelToloza 4 года назад +1

    Hey Mitch.. you are the best!!

  • @ravisorathiya1756
    @ravisorathiya1756 3 года назад

    Incredible mitch!

  • @vishnumohan2018
    @vishnumohan2018 4 года назад +1

    Mitchy and his osm drawing skills 😍🤪

  • @ChrisAthanas
    @ChrisAthanas 4 года назад +1

    Great example

  • @devOmarAZ
    @devOmarAZ 3 года назад

    The emulator crashes due to very large Image , simply move the image to mipmap and it will work fine
    Greate tutorial :3

  • @nitinnegi9343
    @nitinnegi9343 3 года назад

    YOU ARE THE BEST.

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

    awesome mitch !

  • @aaryamanbhardwaj4610
    @aaryamanbhardwaj4610 3 года назад

    Hey mitch, here's your engagement, XD. oh btw, isn't there any way to allow like and comments from your website?

  • @ZiPMo85
    @ZiPMo85 3 года назад

    Hey Mitch, here's your engagement!

  • @seyidtakele8158
    @seyidtakele8158 4 года назад +1

    Thank you for usual useful video.
    Still i didn't get why should i switched to jetpack compose ?
    is that easier than constraint layout ?

    • @codingwithmitch
      @codingwithmitch  4 года назад +1

      Overall yes I'd say layout building is much more pleasurable with compose. Also the animation capabilities are simpler

  • @ShubhamSinghMusic
    @ShubhamSinghMusic 3 года назад

    Hey mitch! Here's your engagement 😂

  • @somersmatthews2749
    @somersmatthews2749 3 года назад

    make a playlist with all of your jetpack compose videos

  • @hareshlakhwani4721
    @hareshlakhwani4721 3 года назад

    You are the best man

  • @androiddeveloper1
    @androiddeveloper1 3 года назад

    Hey Mitch, first of all, thank you. So Android is getting rid of the Layouts, XML files? This is fun to develop but kind of dragging the components on the screen was faster? I am so confused now. Can you explain?

  • @javidsattar281
    @javidsattar281 3 года назад

    that's good for the start
    *thanks*

  • @hirendesai8261
    @hirendesai8261 4 года назад +1

    is there any bug in android studio canary 4.2? cause whenever i make changes in jetpack compose app i need to uninstall the app and then have to install it again in order to see changes. I'm not able to see changes after running app or instant run feature.

    • @basimsherif
      @basimsherif 3 года назад

      Check this - developer.android.com/jetpack/videos/jetpack-compose-preview.mp4

  • @ДанилСычев-г1р
    @ДанилСычев-г1р 3 года назад

    Great lesson, thank you a lot!

  • @KIRILLINGUSS21
    @KIRILLINGUSS21 4 года назад +1

    Thanks a lot for your effort

  • @kunalkotiyal9566
    @kunalkotiyal9566 3 года назад +1

    I came like Android view -> Flutter -> Compose. Due to familiarity with Flutter, many fundamental doubts got cleared.

  • @hagar-9-
    @hagar-9- 4 года назад +1

    there is a code lab called "Layouts in Jetpack Compose" could you explain it into your tutorials as it was a little bit complex to me

  • @hellosagar
    @hellosagar 3 года назад

    Thanks, Mitch

  • @Christopher-pe6zj
    @Christopher-pe6zj 3 года назад

    Hey Mitfh! Here is your engagement!

  • @alvaroisea2259
    @alvaroisea2259 3 года назад

    thanks for the video man

  • @alirezafaraji
    @alirezafaraji 3 года назад

    Hey Mitch. keep up the good work. and keep that beard it looks great on you, man!

  • @alanramirez1031
    @alanramirez1031 4 года назад +1

    Low key got hungry at 1:14

  • @pansgami8954
    @pansgami8954 3 года назад

    Hy mitch it is awesome!!!!

  • @leonardosibela
    @leonardosibela 3 года назад

    In my project, I'm defining a toolbar on my styles xml file.
    When I rotate my screen, the image is bellow the toolbar.
    Any idea why this is happening?

  • @safionweb
    @safionweb 3 года назад

    What makes Compose better than the old XML layouts?

  • @bboydarknesz
    @bboydarknesz 3 года назад +1

    I have problems
    1. I don't know why, but my newest compose version 1.0.0-beta01 cannot use bitmap = imageResource
    But I use Image(painterResource(id = ...), contentDescription)
    2. ScrollableColumn not found, instead I found in documentation use
    Column(Modifier.verticalScroll(rememberScrolLState())
    My God, I hope they don't make too much changes....
    Why Developing Android always like this though

  • @myexperience_me_4646
    @myexperience_me_4646 3 года назад

    But if we need to create more more complex row in list how to do that

  • @anantawasthy4892
    @anantawasthy4892 3 года назад +1

    Thanks!

  • @Michael-bm1jr
    @Michael-bm1jr 3 года назад

    which one is the previous video? How can I go to the previous video ???

  • @ilyasipek8515
    @ilyasipek8515 3 года назад +1

    Love it thanks

  • @kmaximoff
    @kmaximoff 3 года назад

    Awesome, thank you!

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

    Very cool, thank you

  • @daniloterzic1568
    @daniloterzic1568 3 года назад

    Hey Mitch, here's your engagement

  • @roshanfx369
    @roshanfx369 4 года назад +1

    Lets go!

  • @abdifatahmohamed8600
    @abdifatahmohamed8600 3 года назад

    Hey Mitch, Here's your engagement :)

  • @soja0524
    @soja0524 3 года назад

    It reminds me of flutter a lot!

  • @sydfx3333
    @sydfx3333 3 года назад

    Love you Mitch! However so many things have been replaced

  • @raqeebabdul1650
    @raqeebabdul1650 3 года назад

    ScrollableColumn is deprecated in the new version of compose

  • @kmbengineer
    @kmbengineer 3 года назад

    What does the layout inspector show?

  • @HaniHashemi
    @HaniHashemi 3 года назад

    Amazing, thanks 👍

  • @alij3fer
    @alij3fer 4 года назад +1

    Thanks ❤️

  • @СергейИлюхин-к9р
    @СергейИлюхин-к9р 3 года назад

    important information

  • @nayanagarwal5312
    @nayanagarwal5312 3 года назад

    Hey mitch here is your engagement.

  • @mkmk6499
    @mkmk6499 3 года назад

    Superb

  • @khaxbiker
    @khaxbiker 3 года назад

    This line "Image(bitmap = imageResource(res = resources,resId = R.drawable.happy_meal_small),null)" is not working anymore... :-(. There are other ways to draw images

  • @sudhanshusharma9159
    @sudhanshusharma9159 3 года назад

    I just fixed setContnet issue, Now imageFromResources not found :(

  • @СергейХрулев-ж3ъ
    @СергейХрулев-ж3ъ 3 года назад

    Best video

  • @cinnybun739
    @cinnybun739 3 года назад

    Here is the engagement bro lol

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

    Hey mitch here is your engagement

  • @amanaggarwal5884
    @amanaggarwal5884 4 года назад

    Hi, I want to fix which i have missed. As where i have learnt android my mentor was a fake teacher and he told me all the bad practices. I am good with linear and Relative layout but when i made a bigger project then i realise to make a responsive design and compatible we have to use Constraint Layout. Can jetpack eliminate my weakness for Constraint layout and coordinator layout?? Jetpack Seems like a bootstrap Grid System

  • @mohammedoucif217
    @mohammedoucif217 4 года назад

    Is there margin property in compose or just padding ?

  • @penguimTwo
    @penguimTwo 3 года назад

    I heard the last bit as "Hey bitch, here's your engagement"

  • @MuhammadSalman-me5ks
    @MuhammadSalman-me5ks 4 года назад +1

    hii mitch here is you engagement

  • @bekjanomirzak224
    @bekjanomirzak224 3 года назад +1

    Hello, thanks for this amazing totorial. If you have some challenges in your course, it would be the the best tutorial on Earth:)

  • @prasantht4278
    @prasantht4278 3 года назад

    Can we see our design in studio or not?? Or we need to run our application to see our changes every time 🙄🙄

  • @jitendrapratap6327
    @jitendrapratap6327 4 года назад +1

    giving me react-native vibes.

  • @TheMyth2.9
    @TheMyth2.9 2 года назад

    Thank you, good tutorial, Im just giving my humble 2 cents for what its worth, please don't take it the wrong way. Your tutorials are great, but it would be better if you stuck to the subject and kept them to the point.
    If its about Columns, its better to explain columns in depth and then show how it could be practically applied to a realistic theme.
    This entire 17 minute video, I learnt nothing about the basics about Column Layouts, nothing about arrangement, alignment, how to customise that by spacing it by x/y axis?
    A lot of Time goes in making this fancy layout, it becomes distracting as the tutorial ends up about layouts and not columns
    If you have covered these concepts, than it must have completely slipped my mind as I got distracted.
    For example: Too much time spent on images and text styling instead of talking about Columns, not learnt much
    Otherwise, your tutorials have been very helpful

  • @yoyman740
    @yoyman740 4 года назад

    Oi, I don't care if anyone makes a "no one cares" reply, but I am second comment.

  • @tomwilliam7299
    @tomwilliam7299 3 года назад

    I got this error:
    Unresolved reference: happy_meal_small
    🤔🤔🤔🤔🤔🤔🤔🤔🤔

    • @codingwithmitch
      @codingwithmitch  3 года назад

      Then you didn't add the image

    • @tomwilliam7299
      @tomwilliam7299 3 года назад

      @@codingwithmitch No, I added it, but anyway the problem is solved. I think the problem was with mix name in import

  • @randomrainforest
    @randomrainforest 4 года назад +1

    comment for the algorithm

  • @johnybaby9574
    @johnybaby9574 3 года назад

    0:48
    lol accidentally clicked the "back" button

  • @elmerluz0
    @elmerluz0 4 года назад +1

    It looks like flutter

  • @shadiossaili7377
    @shadiossaili7377 4 года назад

    Oh no, This is the exact reason why I stopped using flutter!

    • @DerCheckerzeigts
      @DerCheckerzeigts 4 года назад +3

      Well, you don't have to use it. Layout.xmls still exist and will

  • @VIKASROYv
    @VIKASROYv 3 года назад

    5:18 there is no image composable with bitmap

    • @VIKASROYv
      @VIKASROYv 3 года назад +1

      sorry my bad i was using a older version of compose.

  • @maksym1266
    @maksym1266 4 года назад +1

    Don't like it. xml + viewBinding much better for me.

  • @manishpanwar2517
    @manishpanwar2517 3 года назад

    RIP Xml