The Jetpack Compose Beginner Crash Course for 2023 💻 (Android Studio Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 พ.ย. 2024

ความคิดเห็น • 285

  • @neogeor2011
    @neogeor2011 2 หลายเดือนก่อน +35

    Hope these timecodes will help someone 😌
    1:30 What will we cover
    1:44 What is Jetpack Compose
    3:00 First app
    7:00 Component Modifiers
    12:30 Position and layouts
    20:17 Images
    22:15 Conditional statements
    24:02 Lists - LazyRow and LazyColumn
    27:35 State
    33:15 State - remember function
    35:50 Example: textfield, button and a list
    37:05 Text fields

  • @grimreaper7059
    @grimreaper7059 ปีที่แล้ว +103

    A lot of tutorials online and on youtube tend to be code-along style which is often bad for new learners. Most of the stuff end up forgotten and many features already used in code are unknown to them too. Like how to write first unit tests (but the test example code has DI, Room, MVVM etc). Better way would be how to write tests for basic sum methods , then for basic gestures , then for the view model and so on . Simple things first are the best way to go before more intermediate and practical stuff. Cheat-sheets are gold too. Tutorials covering them even more so . Video like this crash course is quite great .

  • @MrBottleNeck
    @MrBottleNeck หลายเดือนก่อน +7

    if any1 hated writing
    "modifier = Modifier" as much as I did; (or something else I guess)
    Go to file->settings->Live Templates and press the "+"
    then put your preferred abbreviation, in my case "mod"
    and to Template text write "modifier = Modifier".
    Now, whenever you write mod and then press tab it autocompletes

  • @ralphm.881
    @ralphm.881 ปีที่แล้ว +2

    This is exactly what I needed, thank you! Returning to Android development after not doing it for a few years, I was like, "What the heck is this Composable stuff?!"

  • @bharatpanjwani8518
    @bharatpanjwani8518 ปีที่แล้ว +156

    Hey Man,
    You doing a great job by providing these aesthetic tutorials free of cost, keep up the good work!

  • @nero1375
    @nero1375 ปีที่แล้ว +24

    Composable is very easy to understand if someone already had played with Dart/Flutter. Thanks for this Crash course!

    • @seifenspender
      @seifenspender 2 หลายเดือนก่อน +1

      It also feels almost identical to SwiftUI, but with a few differences in design choices here and there

  • @udaysharma5228
    @udaysharma5228 ปีที่แล้ว +16

    To the point and no nonsense! I will keep this in my favourite list to revise the course when ever I need. Thank you Philipp!

  • @JIUHKK-r6g
    @JIUHKK-r6g ปีที่แล้ว +4

    Man, you've just inspired one more person to get back to his projects. I mean its illegal for recycler view to be so simple. You've got a talent to teach things.

    • @hassanbarre9572
      @hassanbarre9572 8 หลายเดือนก่อน +1

      was l am annoyed

    • @kelvinthuranira8330
      @kelvinthuranira8330 หลายเดือนก่อน

      😅 I Did it in java and XML. It's painful

  • @str8busta
    @str8busta ปีที่แล้ว +26

    Philipp, just wanna say big big thanks for your contributions you are really making a big difference in people's lives and for android development in general. I finally got an android job a month ago and your videos helped me big time through my journey. I am currently refactoring code with bad practices and your big focus on patterns and good code is making a difference even here in Sweden. Next I wanted to learn jetpack compose and boom, you come with an awesomely packaged video. Thanks again man and looking forward to more content.

  • @Kaif_Ali_8302
    @Kaif_Ali_8302 9 หลายเดือนก่อน +1

    Using jetpack after a long time, needed the revision. Your video was a great help as it covers most of the points without wasting any time.

  • @lakshmianjan7424
    @lakshmianjan7424 2 หลายเดือนก่อน

    Just brilliant.. Excellent Phillip..I have been using Android XML files all these years.. U explained the basics of Jetpack Compose so well that makes u feel that it's easy, interesting and learnable . Thanks.

  • @volkovolko
    @volkovolko ปีที่แล้ว +9

    For those who have issues with the newer versions, I found the issue (you need to remove the .fillMaxSize() of the Row and add it to the LazyColumn) :
    here is a repaired script :
    package com.example.myapplication
    import android.os.Bundle
    import android.util.Log
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxHeight
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.width
    import androidx.compose.foundation.lazy.LazyColumn
    import androidx.compose.foundation.lazy.LazyRow
    import androidx.compose.foundation.lazy.items
    import androidx.compose.foundation.text.BasicText
    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.filled.Add
    import androidx.compose.material3.Button
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.Icon
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.OutlinedTextField
    import androidx.compose.material3.Surface
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.graphics.Outline
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.TextStyle
    import androidx.compose.ui.tooling.preview.Preview
    import androidx.compose.ui.unit.TextUnit
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    import com.example.myapplication.ui.theme.MyApplicationTheme
    class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    MyApplicationTheme {
    var name by remember {
    mutableStateOf("")
    }
    var names by remember {
    mutableStateOf(listOf())
    }
    Column(
    modifier = Modifier.fillMaxSize()
    )
    {
    Row (
    ){
    OutlinedTextField(
    value = name,
    onValueChange = {text ->
    name = text},
    modifier = Modifier.weight(1f)
    )
    Spacer(modifier = Modifier.width(16.dp))
    Button(onClick = {
    if(name.isNotBlank()){
    names += name
    }
    }) {
    Text(text = "Add")
    Icon(imageVector = Icons.Default.Add, contentDescription = "")
    }
    }
    LazyColumn(modifier = Modifier.fillMaxSize()){
    items(names){currentName->
    Log.d("COMPOSE", "This get rendered $currentName")
    Text(
    text = currentName,
    modifier = Modifier.fillMaxSize().padding(16.dp)
    )
    }
    }
    }
    }
    }
    }
    }

  • @daffanashwanpramono4149
    @daffanashwanpramono4149 ปีที่แล้ว +2

    My senior recommends your channel for Compose tutorial, and this is just so easy to understand. Much thanks for the tutorial :D

  • @LucasHedegaardGertsen
    @LucasHedegaardGertsen 10 หลายเดือนก่อน +1

    Thank you so much for making this great tutorial!!!
    i have been wanting to create apps for so long
    and i never really liked the way designing UI worked,
    and i LOVE this way using code to make UI!

  • @Narazgul
    @Narazgul ปีที่แล้ว +11

    Hey Philipp, ich hab bei dir häufig das Gefühl, dass du genau das Video machst, was ich in diesem Moment brauche. Nicht nur hier, sondern auch in vielen anderen Fällen in der Vergangenheit. Auch deine Shorts sind fast immer hilfreich! Vielen Dank für deinen absoluten top content!

    • @PhilippLackner
      @PhilippLackner  ปีที่แล้ว +2

      Danke dir, das freut mich!🙌🙏

  • @goblin69_420
    @goblin69_420 11 หลายเดือนก่อน +1

    This new UI way seemed a little mixture of flutter and react and I love this

  • @GTA_33
    @GTA_33 ปีที่แล้ว +12

    I am from india and i loved ur content i started ur playlist from basics of kotlin... And ur way of explaning concept is ossum
    . thanks for this ossum content .....🔥🔥🔥🔥

  • @ChristianMielke
    @ChristianMielke 8 หลายเดือนก่อน +1

    i never worked with Compose, and just a little bit with XML. Also i started to learn Kotlin. And as an Professional Java Developer i can say: This Video is Awesom, with Compose App-Development feels easier like never before!
    Also i like that you share your knowlege with us! Good Job!

  • @deathrain1832
    @deathrain1832 3 หลายเดือนก่อน

    as new learner I can say it's one of the best video I found on youtube, thanks philipp

  • @Thaizer
    @Thaizer ปีที่แล้ว

    Hi,
    I'm a c# programmer (Xamarin)
    Was curious about Android programming with Kotlin.
    Thanks for your good videos they help me a lot.

  • @hossamqandel5303
    @hossamqandel5303 ปีที่แล้ว +5

    No matter how much I thank you, I will never give you the thanks you really deserve, Philip ♥️ You are truly a person of great value to the Android and mobile developer community in general I wish you all the best and give us more ♥️🙏🇪🇬

  • @manjaro675
    @manjaro675 ปีที่แล้ว +2

    Great timing! Am actually converting an existing project from flutter to native for better performance and control of device sensors.

  • @prasadsawant9122
    @prasadsawant9122 ปีที่แล้ว +2

    Best android introduction, straight to point and gives you idea about how things work ui wise , how ui renders , kind of give beginners like me a starting point to explore. Just want to say thank you very much man, and really appreciate all of your efforts.

  • @Remirured
    @Remirured 2 หลายเดือนก่อน

    thank you for this guide. just got into kmp and was watching your video, when you you mentioned that you also have compose guides that one should watch so i did now. I am currently searching for a software dev job as i freshly graduated. But it takes so much time that i though fk it, i ll develope an app and publish it and your videos are a great entry

  • @fuzzy-02
    @fuzzy-02 9 หลายเดือนก่อน

    This tutorial was just great to get me up and going.
    I learned Java and XML in my uni course but I thought it would be better to switch to Kotlin and JetCompose.
    Thanks a lot for this man! Its much better than the tutorials on the android website

  • @brand-konto9377
    @brand-konto9377 หลายเดือนก่อน

    Adding a Column puts the text into separate rows. Good Job Google. Very intuitive :D

    • @PhilippLackner
      @PhilippLackner  หลายเดือนก่อน

      The elements are arranged in a column though. Calling this a row I'd consider the most unintuitive thing ever 😄

  • @wilsonpedrotamegajunior1053
    @wilsonpedrotamegajunior1053 10 หลายเดือนก่อน

    This video is very, very clear and easy to follow and understand. I'm very, very thankful for you, it makes me to start get the idea of jetpack compose, and for sure this is the future of Android UI Design

  • @MaxProgramming
    @MaxProgramming ปีที่แล้ว +7

    This is exactly what I needed in native Android development! The syntax is so cool and easy to understand if you are familiar with React or Flutter. Much better than XML of course! I think I might go all in native if I continue to use Jetpack Compose!
    Thanks a lot Phillip!

    • @yassine-sa
      @yassine-sa ปีที่แล้ว +3

      yes it's a lot like flutter, which is one of its big advantages, it's just so simple to create layouts this way

  • @Rajmanov
    @Rajmanov ปีที่แล้ว +4

    Thank you man, you make this community great!

  • @Imperial_Dynamics
    @Imperial_Dynamics ปีที่แล้ว

    hi from Greece. You were the one who introduced me to xml and now you are the one who introduced me to compose. You explain things very well and the pace is just right. THANK YOU.

  • @David-zb8br
    @David-zb8br ปีที่แล้ว +4

    Man, i wish this type of vid was abailable on yt when i was just starting, this will be very helpful to new compose learners.
    Great content as always philipp

  • @codewithsebastian
    @codewithsebastian 8 หลายเดือนก่อน

    I am Learning Compose, and Unlike many other ways of learning I have used before, I find mixing the Docs and Your tutorials Yours only, to be working. I dont want to go into the tutorial loop just yet, maybe later on when I get most of the basic conepts and can now make the skills as diverse as they can be

  • @СергейБезногов-т6у
    @СергейБезногов-т6у ปีที่แล้ว +2

    It's your the best video!!! And it's the best video in the history of online programming teaching!!!

  • @stockiber7656
    @stockiber7656 ปีที่แล้ว +2

    Hey, Philipp. Danke dir für all deine tollen Videos!! Du erklärst super gut und hilfst mir so sehr in verschiedene Topics einzusteigen und zu wissen, was man alles können sollte, um eine gute Android Developerin zu werden.

  • @prudhvimadasu
    @prudhvimadasu 4 หลายเดือนก่อน

    I can't thank you enough, this is a great crash course for Jetpack compose

  • @Rundik
    @Rundik 2 หลายเดือนก่อน

    The way it works it looks more like imperative than declarative. In declarative style the order usually doesn't matter, and here it does

  • @SouthernPole
    @SouthernPole ปีที่แล้ว +4

    I am waiting for tutorials like this, thanks 👍

  • @eazyfrizzy7983
    @eazyfrizzy7983 ปีที่แล้ว +1

    From watching this video i learned a lot about compose. Thanks keep it up

  • @scottbiggs8894
    @scottbiggs8894 ปีที่แล้ว

    Hands down the best instruction I've seen on jetpack compose. And I've seen tons of vids and scads of websites. Thank you!

  • @haxificality
    @haxificality ปีที่แล้ว +1

    Thank you for this! I totally understand how advantageous Compose is compared to the old style. Now it's Compose for me all the way.

  • @mihaes7172
    @mihaes7172 ปีที่แล้ว +1

    Thanks for this video, much valuable as I am entering this Kotlin - jetpack world from Php

  • @henriquepetters
    @henriquepetters ปีที่แล้ว +2

    Do more compose content, i see a lot of devs struggling with it. And i can totally relate, i'm glad i dived head first when it came out.

  • @begmyratmammedov9357
    @begmyratmammedov9357 ปีที่แล้ว +2

    Thank you Philipp, this is so amazing tutorial with well summarized version of jetpack compose course. Great Work!!!

  • @serlok4688
    @serlok4688 ปีที่แล้ว +1

    I've just started your compose play list. it's good you uploaded it thanks

  • @valeryegorov2616
    @valeryegorov2616 ปีที่แล้ว +1

    The Best Android Teacher!

  • @OCEH6
    @OCEH6 ปีที่แล้ว +1

    Awesome! So cool! You and Compose is Amazing!

  • @vibhuvineet
    @vibhuvineet ปีที่แล้ว +1

    Certainly found it helpful, very clear explanation. A huge thumbsup for the content.

  • @faustipez
    @faustipez 5 หลายเดือนก่อน

    Thank you so much, it really helped me to understand the basics of Jetpack Compose and see the benefits of using it for my current project!

  • @Hobynist
    @Hobynist ปีที่แล้ว

    Came here to find out what is jetpack compose. And got the answer, thanks!

  • @DyotakT
    @DyotakT 10 หลายเดือนก่อน +1

    Hey Philip,
    Amazing job! This is so much better than the official videos provided by Google.
    Thank you! Keep it up. :D

  • @Goose____
    @Goose____ 5 หลายเดือนก่อน

    Glad i decided to check this video out before trying to learn with XML,

  • @AfzalAli-n6d
    @AfzalAli-n6d 11 หลายเดือนก่อน

    One of the best tutorials for compose beginners

  • @masterwayne9790
    @masterwayne9790 2 หลายเดือนก่อน

    Easy to understand from flutter framework. Thanks a lot.

  • @Terik17
    @Terik17 4 หลายเดือนก่อน

    clear and concise intro to jetpack compose, thank you for sharing :)

  • @andreymerc1
    @andreymerc1 2 หลายเดือนก่อน

    Thanks for really well explaining the topic in simple terms!

  • @typosbro_
    @typosbro_ ปีที่แล้ว +1

    Compose feels like Flutter which was inspired by React Native which a variation of React which was created a decade ago.
    I'm new to Android dev btw😇

  • @niazsagor3241
    @niazsagor3241 ปีที่แล้ว

    Thank you Phillipp for these videos. These are gem.

  • @pengottv589
    @pengottv589 ปีที่แล้ว

    Insane Video, Thank you very much for the introduction to Jetpack Compose!
    Your free content helped me so much! Thanks for everything Philipp.

  • @manishprajapati8544
    @manishprajapati8544 ปีที่แล้ว +2

    Amazing tutorial Bro, This introduction was really simple and helpful with clarity Thank you 🙏🙏

  • @jayeshkarale9118
    @jayeshkarale9118 ปีที่แล้ว +2

    i'm not watched fully video but yes i'm 100% sure this is best content. thanks in advance ♥

  • @kyeiiih4422
    @kyeiiih4422 ปีที่แล้ว +1

    Amazing Content Phillip.

  • @MRBala-xx5si
    @MRBala-xx5si ปีที่แล้ว

    Thanks Philipp . You gave a better start to me.

  • @rizwansworld
    @rizwansworld 5 หลายเดือนก่อน

    Cool crash course man. No BS. Just to the point.

  • @alireza-qy8wh
    @alireza-qy8wh หลายเดือนก่อน

    Thank you Philip for your tutorial, it was very helpful.

  • @flaviocatuara7488
    @flaviocatuara7488 ปีที่แล้ว +1

    Thank you as always Philipp Great job. Very useful

  • @Khush-f6s
    @Khush-f6s 22 วันที่ผ่านมา

    Thanks for this video .I was able to understand it very well .

  • @nikinsk
    @nikinsk ปีที่แล้ว +1

    Nice and Epic video for Jetpack compose learners

  • @mergenstudios8779
    @mergenstudios8779 4 หลายเดือนก่อน

    This video acctually did teach me a lot, thank you!

  • @andersmembers1309
    @andersmembers1309 ปีที่แล้ว +1

    stumbled onto this, but it's really great!

  • @HierKommtAlex3
    @HierKommtAlex3 9 หลายเดือนก่อน

    Great video. I love this declarative way of UI programming. I did a lot QML before but now I have to switch to Kotlin and was really afraid of diving into XML^^
    In your video there is just one point that I do not understand: why is it necessary to assign the new text value to the member text value inside the onValueChanged ? Actually I would assume that this slot is called when changing the member. At least in QML it is how it works.

  • @yandimosi
    @yandimosi 3 หลายเดือนก่อน

    nice introduction to jetpack compose, thank you

  • @mikethemonsta15
    @mikethemonsta15 ปีที่แล้ว +1

    Excellent! Thank you so much this really helped me

  • @Mr.YeastMK
    @Mr.YeastMK ปีที่แล้ว +1

    Thank you, that helped me to learn the basics

  • @Dipj01
    @Dipj01 5 หลายเดือนก่อน

    As a React developer, this looks very familiar. Thanks for this

  • @marshal7969
    @marshal7969 ปีที่แล้ว

    Dude I learn a lot and I think jetpack compose is so much better than xml, specially with recycler view

  • @jamsberries
    @jamsberries ปีที่แล้ว

    Thanks for teaching me Compose, Ludwig

  • @dabert5972
    @dabert5972 6 หลายเดือนก่อน

    PHILLIPP YOU ARE THE MAN

  • @williamgiraldo996
    @williamgiraldo996 ปีที่แล้ว +1

    Thank you, this is great to start on jetpack compose

  • @akashmadanu3994
    @akashmadanu3994 ปีที่แล้ว +2

    Phillipp, Thanks for your excellent content,
    if you make an entire Android course and Upload it to Udemy/TH-cam, which is ok if it is paid course which includes all basics and some projects that help many Android (jetpack) learners, you have a 10 week course on your official site. Still, as a student, that is not affordable, hope you keep this in your mind and make an excellent android course that can be enrolled by even students. Thank you again for your great content; I love you so much.

  • @Dibyendu.M
    @Dibyendu.M ปีที่แล้ว +1

    Thank You, Philipp!

  • @СергейБезногов-т6у
    @СергейБезногов-т6у ปีที่แล้ว +2

    I am sure that Kotlin and Jetpack Compose would never survive without hard work of blogger Phillip Lackner!!!

  • @malikkahfi2534
    @malikkahfi2534 ปีที่แล้ว +1

    Love this 😍

  • @ruslanpodurets6289
    @ruslanpodurets6289 ปีที่แล้ว

    Thank you so much, great examples!!

  • @ndanielamaha5618
    @ndanielamaha5618 ปีที่แล้ว +1

    Thank you bro, very succinct and sweet summary

  • @nazimgallo9116
    @nazimgallo9116 4 หลายเดือนก่อน

    Thank you for the video, much appreciated!!!

  • @MaximusMcCullough
    @MaximusMcCullough ปีที่แล้ว

    Totally awesome! Thank you for this information.

  • @irhasdev
    @irhasdev ปีที่แล้ว +2

    please make videos about jetpack compose more

  • @Frentt
    @Frentt ปีที่แล้ว +1

    Coming from iOS development with SwiftUI it’s so funny seeing Google copying Apple. Makes it a lot easier to transition at least. Lol 19:56

  • @semmu93
    @semmu93 10 หลายเดือนก่อน

    this jetpack compose thing seems very similar to how react works, even with the possibility of embedding business logic within the UI code via lambdas. but i guess you also offload them into their own dedicated functions when working on bigger projects.

  • @tranminhviet6416
    @tranminhviet6416 24 วันที่ผ่านมา

    love this video so much!!!

  • @pikazap6672
    @pikazap6672 ปีที่แล้ว +1

    Thank you Philipp!! :3

  • @manishakamble7473
    @manishakamble7473 6 หลายเดือนก่อน

    Very informative and clear 👍

  • @lvterry
    @lvterry 10 หลายเดือนก่อน

    Thanks for the course!

  • @funclips767
    @funclips767 ปีที่แล้ว +3

    Hi Phillip, i appreciate your assistance with developers, but please make a video about how to use machine language in android apps

    • @Rajmanov
      @Rajmanov ปีที่แล้ว +1

      Wtf

    • @pfsh.
      @pfsh. ปีที่แล้ว

      @@Rajmanov same reaction lmao

  • @ewanorr
    @ewanorr 10 หลายเดือนก่อน

    Thank you for this excellent tutorial.

  • @AntoninoDiCarlo-s9b
    @AntoninoDiCarlo-s9b 25 วันที่ผ่านมา

    First, there were function and view joined together in code.
    Then we separate function and view and put view in xml data
    Afterall we create jetpack compose to join functioncode and viewcode alltogether....😁

  • @justmeagain9302
    @justmeagain9302 ปีที่แล้ว +1

    Thanks man, very helpful

  • @vismal2007
    @vismal2007 ปีที่แล้ว

    Thanks man, very good content!

  • @kirgo4720z
    @kirgo4720z ปีที่แล้ว

    Thanks a lot for this video! Its brilliant! So understandable!

  • @shourov331
    @shourov331 13 วันที่ผ่านมา +1

    The states are kinda similar to React states in web dev