Transcript for:
Introduction to Jetpack Compose

hey guys and welcome back to new video and a new android video yay um in this playlist it will be a playlist i will make tutorials about jpeg compose and go through the basics basically so actually everything you need to to make new android uis in 2021 so in case you live behind a rock and you don't know what jetpack composes that is just a new way of designing native android apps using kotlin so no more xml that was terrible in my opinion it was really not much fun and it made things so complicated um because so often you didn't know should i put that in the xml file should i create a drawable file should i put that into our themes file all that were things we don't need to worry about anymore because now we design our android apps in kotlin now we write the business logic in kotlin so we now do everything in kotlin and in case you still use java and you don't know kotlin and you want to learn native android development then i must say the right point to actually learn kotlin was a year ago but because a year ago is already a year ago the right point is now so if you're really serious with android development then learn kotlin i have a great playlist for that so just check it out if you know java it's really a matter of a week or two weeks maybe to switch from java to kotlin and because jetpack compose is very new um it's not included in stable android studio so what we need to do is we need to download uh android studio canary so the canon version of android studio is just um kind of an experimental version so the android team will just publish their changes their new features first into this canary channel so people can try it out can leave feedback um before they will actually publish it for the stable channel but nevertheless that doesn't mean jpeg compose is not stable yet because it is in beta now a very long time it was in alpha and alpha means there can be a lot that changes and here you can mark the words the google team themselves say beta also means api stable we won't change or remove apis i will give them a month but this sounds pretty good so actually i think that is now the right moment to make videos about compose a long time i i didn't want to because i didn't want to make videos that are deprecated within two or three weeks but now that sounds pretty cool so i will make this playlist here if you don't have canary android studio you click on this link here i will actually put this in this video's description you will be linked to this site um you can download the beta build which we don't want because compose is not included in that yet you want to download the cannery build here and depending on when you watch this video i record this here in april 2021 you might also already find jetpack compose in stable android studio then you don't need to do all this then you can just use stable android studio but make sure to download this that will be a zip file and when you unpack that it will basically look like this here so you unpack that zip file open this and then then you go to the binary folder the bin folder scroll down and here this studio 64 file is what you want to start that is just android studio then so with all these new features including jetpack compose if you use a 32-bit system you need to launch this file instead i guess yeah but i think most will actually use a 64-bit system in 2021 and when you launch that file and then this dialog will open up here we just want to create a new project for now so we click on new project and you can see that might look a little different from a stable android studio because here in the project or in the activity dialog in the activity tab we have an option to choose an empty compose activity that is what we want to choose here clicking next you can give your application a name i will give it compose course youtube package name is fine language kotlin of course and that is fine as well clicking finish taking it to this screen and there we go that is now an empty compose project which will just take a few hours to finish building so see you so when gradle is done you might see this main activity so we still have an activity that is quite the same as before but you will notice that this looks quite different from what you know um what we had on stable android studio what we had on xml you can also see if we go to our resource folder there is no layout folder anymore because we don't have xml files anymore the way we will now design the ui of our native android apps is using kotlin as i said and you can see we have our oncreate function which will just be called when our activity is created and in that function we have that set content function so you remember before compose we had set content view that was used to assign a layout resource id so an xml layout to our activity we don't have views anymore because in compose we speak of composables what we called view before is now a composable and you can see that here this function greeting is annotated with at composable oops and that is actually now what was a view before an android so to define ui now in android we simply write functions in kotlin and we annotate these functions with that composable so what we try to do here is we try to separate our ui into single components um if you come from web development if you come from flutter or whatever then you will probably know that concept it's basically separating the ui into components that makes it very reusable so if we consider android studio here you might make this project list composable you might make each individual item of that project listed composable so you can reuse that over and over again without having all that boilerplate code we had in xml because there we just needed to to copy a view if we wanted to have it like five times now with compose we can define how that view looks like just once and reuse that so let's actually see how that works um i will remove this theme here that whole block we don't want to worry about this for now i'll just remove it and since this is a function that composable we can call it here in this set content function so compose not composable of course we want to call greeting here and we need to specify the name so that function just has a parameter here for the name and i'll just write fill up here like this and what this will do is it will call that a greeting composable function and that greeting composable function it contains a text so the text is also composable which is built in android studio which is built in the chatback compose framework and well guess what it's used to display a text and that text will be hello and whatever we put into the name variable so in my case philip so let's launch our app here in our emulator and wait some hours again and when that build is finished we can open up our emulator and you can see here is our text hello philip so that is essentially how that works of course that is super simple now but in this playlist we will dive into quite more complex examples you will learn how to build layouts with compose and just how to do everything you did before with android views how you can do that now with compose and how you can make your uis just look much better than before in a much easier way and you also by the way don't always need to launch your app here to see what you did you can also see there is a default preview function which android studio generated for us and with that function well you also guessed it we can preview our composable so you can see we wrap that greeting composable into our theme we could also just let's let's remove it um just display our greeting composable and you can see in the top right we can now split our code and the design tab and this design tab will display the preview here that you annotated with preview and as you can see here is hello android because for the preview we passed android as the name and also when we update this um if we write fill up here then the preview is out of date we need to build and refresh but sometimes it actually updates that live i don't know why we need to rebuild this now but sometimes it actually does that live so let's let's try again let's see it's still building hello philip and change it back to android and uh now yeah now we changed it live so that's cool so in the end every activity now has its own set content function here which just has all the components or the composables it should actually draw the actual components and composables we will actually put these into these kotlin functions and of course we can put these into single files to structure our project in a nice way so i hope you like this introduction to jetpack compose and i will hope that you will also follow my next videos about this where we will actually make a cool looking ui and just dive deeper into all these composables and yeah that should just learn how all that works thank you for watching this far if you like to see more advanced android courses check out the first link in this video's description it will lead you to my website where you will find paid premium courses and that will take your android skills to the next level other than that i wish you a nice day see you next video bye bye