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

guys and welcome back to new video in this video I got a jetpack compose crash course for you so a whole crash course in a single video and first of all if you just clicked on this video I want to tell you when you should watch this video and maybe if you should also watch my Jetpack compose playlist Maybe you already saw Philip has a playlist about jetpack compose now Philip also uploaded a crash course a single video about jetpack compose other people have that so when should you watch this specific crash course so even though I already have a composed playlist which is a bit older at the moment I still thought it's it's quite helpful for a lot of people if I put everything into a single video and just condense it a little bit to the most important things because people nowadays are busy they don't have a lot of time and they still want to learn the the most up-to-date and most recent Technologies so in this video I will cover everything for compose um starting from absolute beginner so you you don't need to know anything about compose and I will teach you the rough basics of it so you will be able to build some some simple uis add some Behavior so you can click on buttons that these do things you'll learn how you can style your views and compose and things like that so if you're an Android developer and you can only know XML you want to migrate to compose or you're just interested in it and want to see okay how is it like then you can just invest yeah I don't know how long this video will be but maybe an hour or so and then you will have a good understanding of it or at least and a deep enough understanding to estimate if it's worth it to dive deeper into this we will go through a lot of things in this video but at the end of this you will be able to yeah build a simple UI like this that you have a text field where you can enter a name like for example call and then you click add and it gets added to a list where you can then also scroll and before we actually dive into coding I want to quickly talk about what actually is Japan compose so maybe you're just an error developer who just works on your stuff and you start to hear this topic jetpack compose everywhere from other Android developers that you have to learn this so what the heck is actually jetpack compose to yeah just have a little bit of an understanding of it before we dive into this so initially when we were to build a UI in Android then we had to do this with XML so we had XML files where we just specified our so-called views so if you like a text view which displays some text or button or some linear layout constraint layouts and that is what we used initially to build our UI and then we had these activities here in Android which we also still have in which we then yeah inflated these views or these layouts rather and also got a reference to these views maybe with find you buddy or viewbinding and then just yeah did something with this however nowadays we have a more yeah kind of modern approach to this which is Jetpack compose so jetpack compose is a new way of building UI for Android it is a new UI framework and it has a completely different approach and in Jetpack compose we actually build our whole UI in kotlin so we don't have any XML files anymore at least not for building the UI as you can see we have some sample code here and if you don't know how to create this product you simply go to Inner studio file new file new new project and then you need to select empty compose activity and then Android Studio will generate this exact activity I showed you here and there's already a lot of stuff going on here if you take a look at this so we do have the set content function which is the jetpack compose equivalent to set content view which you know from XML which just yeah assigns a certain XML file to our main activity here we use set content and we have these Lambda blocks in which we now Define our so-called composables so what was initially a view in XML is now considered a composable and Let's ignore what is inside of this block here for now and scroll down a little bit to our function greeting that is exactly such a composable I talked about so we do have this composable annotation that is what makes sure that we can kind of apply this special jetpack compose code in this function because a composable in the end is nothing else than a kotlin function so we can create our very own greeting function which is just generated by default here we can give it a name and then we can have the so-called text composable which just comes from the compose UI framework so that is already contained which is the equivalent to a text View so we just call this kotlin function our code now to add this text on our screen and we yeah we just specify a normal kotlin parameter here with a text we want to show on the screen so we just say hello and then whatever we passed for this name then we do also have this default preview function here which yeah the preview is basically what was the layout inspector initially for XML so where we can actually see what we are building and here in the default preview we do have this Java compose crash course theme Let's ignore that from now that just gives our UI some theming attribute I won't get into this in this crash course since it's not yeah not really essential here to build basic UI and then we do have this greeting function which we call here and if we take a look into that so we do pass Android for the name then this greeting function gets called with Android and that will call the text composable which will simply draw a text on the screen that says hello Android and if we go to our split tab here on the top right then this is our preview so if we now want to see what is in our screen we actually need to yeah go to the split Tab and click build and refresh and then whatever we have here in this preview annotated function will be shown in our preview tab here so now interested is actually building this and then you can see initializing and then we see hello Android that is now the text that gets added on the screen that gets drawn on the screen and if we now change this Android text to for example Philip then we also do see that this gets updated here in real time hello Philip Capital H let's remove that like this and then yeah we successfully actually changed our text on the screen so this new way of building UI which actually called the declarative approach so we it's declarative UI design is yeah kind of a new way of thinking because initially with XML we have these views and we were more like commanding them to do something so please view dot text is equal to something so we do actively tell it to change the text now in compose the different in compose we have this concept of State in this case this name would be State and as soon as that state changes our text will also kind of change because here we don't really have a function that we can call on this text so we don't save this text in a variable like this that wouldn't make any sense and compose because it's a new way of thinking and a new way of building UI I will get much more into detail in a States later at this video right now I think this would overwhelm you but let's first of all yeah just to see what else we can do with this text composable here and we can completely ignore this code up here this would be just our production app Whatever Gets shown in the app but for us it's totally fine if we just work on our little greeting composable with our text which we then see in our preview so of course if we display a text there are very often scenarios where we want to kind of start we want the text to be yeah to look different and we can do this by adding just more parameters to this text function to this text composable so only this text is mandatory of course because every text needs a text to be displayed but if we hit Ctrl P here so we see all these parameters we could now apply to this function for example color we could add a color to our text which is simply color dot blue for example let's import that and then if we take a look on the right and then after this loaded we will see that we now have blue text so we now rather just describe how our UI looks like in kotlin rather than having these XML files which we then inflate in kotlin but let's see what else we do have here that we could modify and you can see we have a so-called modifier I will get into that next and that's a little bit of a bigger topic let's skip that for now and take a look at the font size so we could simply specify a font size for that to make it bigger let's say 30 SP how do we do sp here in XML we did this but in kotlin we need to say 30 dot SP and then we can hit Alt Enter to import that and if we take a look on the right and now we have a much bigger text and yeah the same way we can change and manipulate all the other relevant text attributes for example the font style so which font you have the font weight if you want to have a bold text font family letter spacing so you have a lot of options which can now very easily style in your recording code but as I already tease that a little bit let's get into these so-called modifiers next so what is a modified that is a completely New Concept in Jetpack compose which we don't know from XML and these modifiers are well as names has used to modify or review on in compose terms our composable so there are always certain things and certain Transformations maybe alignments that we want to be able to be applicable to any kind of UI component to any kind of view so we take a look at all these text specific attributes here these are of course only relevant if we do have text but for some attributes like for example where we want this text to be positioned on our screen or what kind of background color the Box around this text has that is something that is actually relevant for any type of UI component and for these things we use these modifiers so we can assign a modifier by first of all specifying the modifier and then we can say Dart and we have a ton of different options here that we can use to modify and change the appearance of this composable for example we can say we do have a background color and the background color would be color dot red for example if we then take a look at the right after this loaded then we see we do have a red background now and these modifieds are really applicable to any type of UI component you will be able to assign these to all your composables so what else is a common modifier we use for example padding we know that from XML it just adds spacing to the outer corners and outer edges of our composable in this case here we do have a different overloads where we can which we can use to add padding we just use this all option here to for example add 680p of paddling so 6 in dot DP Alt Enter to import that and if I take a look on the right we now have this padding here around our text and what else could we have here if we can just write a DOT then we do see we also have filler Max width I will get into that later so we can just assign a certain size to our composable we do a functions like clickable to make it clickable so we can assign on click listener to this composable we can give the Border like a we can clip it so we have round round corners or we have a circle shape or whatever shape we want we can give it some Alpha value so make it transparent and a lot more and these view Transformations are now really a lot easier and composed compared to XML for example if you wanted to give a view rounded Corners in XML which is not a card viewer so then you needed to make like an XML file in your drawable folder then add that as a background resource and that was a lot of pain these things are now a lot easier with compose because you don't have these limitations that you need a certain view like a card view to add border radius and what is also very cool about these modifiers is that they are they are working sequentially so what does that mean if we take a look at this then the first function we call here on this modifier will be executed first then this will be executed so in this case we first of all paint our background red and then we add some padding and whatever we now apply only applies to the error where we applied the padding before so if we now add some background again so we can kind of change these and let's say a color.green and take a look on the left on the right and then what we'll see is we now have this green box around our text and the red box around this yeah this big rectangle so we first of all have our red background and then we add 16 DP of padding so we're here and now if we actually apply our green background it applies to this inner rectangle which we applied the padding to before if we were to swap these uh actually let's do it like this then you can already guess what happens then our whole background is green because we first of all apply the red background to everything and then the green background to everything and then we apply the padding so after the padding we don't apply any background anymore which is why the green background is simply overlapping the red one in this case so that is the very Basics about modifiers we will learn more about this in this video but let's show you something else let's remove this modifier and we just take this text and let's say we want to show two texts on top of each other so we add this down here and we say yeah that's something else like hello or um some other text like this and if we now take a look here in our preview you see that is not really what we want because we see that our other text is drawn on top of our hello Phillip text in this case so that is a very very important concept or very important to understand and compose that if you have two composables that you call directly one after another here then whatever is called the latest will be on top of our screen so this is drawn first then this is drawn and if you would have more then these will also be drawn on top of these and of course that is not usually what we want in this case we actually want to first of all have our text hello Philip and then have our other text yeah which says some other text how can we do that well we can achieve that with so-called layouts you already know these layouts from XML we have linear layout to just um yeah lay out certain views video of constrained layout we do have a relative layout and all these common layouts we used in Android and compose we also have these they are just called a little bit differently for example to arrange our composables here on top of each other we use the column composable so we write column we don't need to add something here in the parentheses and then we can take our two texts and move them inside of this column so this block will now contain the layout code and now if we take a look we see that they are now actually laid out exactly as we want and here for this column we again have the option to pass a modifier for example for example we could give this whole column a red background and then if we take a look on the right we will see yeah that's exactly what will happen so to every single composable you are able to apply these modifiers you can also make the whole column clickable for example by saying modifier dot clickable but we get into this later and then let me quickly zoom out a little bit here what we can also do with the column is we can say that we for example have some kind of horizontal alignment so we say how these views are arranged or aligned in this column so we could say okay we say and Alignment dot end if we take a look here then this will push all the composables in this column to its end in horizontal Direction and we also do have the same for vertical Arrangement so here's called Arrangement which we can use to yeah just spread out these views in vertical Direction let's try this vertical arrangement for example Center and if we take a look on the right we will see that actually nothing changes why is that well because our column currently uses the minimum amount of space it gets which is basically equivalent to wrap content in XML so that is the default for composables but yeah that is why it simply does not have any space to arrange something in Center vertically how can we give it some more space well we can use the modifiers for that again that is what it said before so we can add a modify here and what we can do is we can say fill Max size so that is a modifier which will simply telecomposable our column in our case that it should take all the space it can get so in our case because we place it at the root of our UI tree kind of it will simply fill the holes yeah our whole screen the whole width and height of our screen if we do that take a look in our preview and then we need to zoom out a little bit more and now you can see this is now a whole screen and you can also see that our content in our column is now centered vertically if we were to change horizontal alignment for example to Center then you will also see it's actually how's it called Center horizontally then you will see that this this will also Center our text horizontally now sometimes we also only want our column to fill the whole width but not the height of our screen then we can say fill Max width of fill Max height so for example Phil makes width would simply yeah just fill the whole width but not the whole height of our screen or if we want to give the fixed size we can also do that with the size modifier so we can say size and let's say 400 DP then this will be a square that is 400 by 400 DP as you can see here so our column is now the wide Square here and in it we can see our centered texts what is now important here regarding these size modifiers is that if something in our parent composable has another modifier with fill Max size then this will not fill our whole screen this will actually fill the whole size of our parent because our parent has a fixed size so this does not automatically fill our whole screen only actually if our parent composable does not have a fixed size you can see because it is full Max size it also push our other text out of the screen so that is usually not what we want and you probably already guessed it if we have a column we also have a row to arrange items horizontally so here we these attributes are not applicable anymore because they are swapped we do now have a vertical alignment um so vertical how is it called um simply oh it's horizontal arrangement horizontal Arrangement like this for example and and if we now take a look here then our texts are now arranged next to each other so that is basically a linear layout with horizontal orientation and the rest actually works exactly the same for this row as it also did for the column and one more layout I want to show you which you very commonly need is the so-called box layout the box layout is the equivalent to a frame layout in XML so we can say we do have a box and with a box we can place views on top of each other so basically what is the default but it still allows us to kind of arrange these inside of the box so if we get rid of this and just leave the modifier then you can see that is exactly what we had before that our texts are shown on top of each other and the bottom text is on top of the top one but what it now allows us is to also arrange these composables here inside of this box by adding some content alignment and here we can now align our views or composables alignment a DOT and the bottom center the center for example um so basically top left top Center top right um yeah Center end or so it's called and you can see now all the views move to the center of our box they're still on top of each other because this content alignment perimeter applies to all composables here if we don't want that we can also apply modifiers again just to a certain text here so we can say this text should now be put in the bottom end corner so we can say modified at the line and that modifies only available here in this box scope which we have here because otherwise it wouldn't make any sense and then we say we have the bottom and if we now do this then our text will be put in the bottom and corner here and now they're not overlapping anymore so this is very useful in a lot of cases I use bugs yeah all the time and it's definitely important to know about that so that is it for the basic layouts in Jetpack compose we also do have a constraint layout by the way which I never use because these rows columns are actually more efficient in compose so in XML it's the other way around because they are if you Nest layouts that harms the performance of your UI but in compose it actually does not matter so let's get rid of our box and let's get into images just quickly seeing how we can add an image to our UI we can simply do this with the image composable here we need a so-called painter which yeah which kind of just paints our image on the screen kind of we do have different overloads here um if we want to paint a certain resource on our screen then we can do that with painter resource so that's basically the equivalent to having an image view in XML and then calling I think it's set background resources so on that with a given ID so we can say painter resource add a drawable a dot yeah I don't have any images I added here let's just choose the foreground of our launcher icon and we also do want to add a Content description we do have to add one or set it to null I'll just set it to now here that's just for accessibility here and if we now take a look here then we see this little Android symbol we can give the background to make it yeah a little bit more prominent saying modifier is modifier background and let's say color black for example then we should be able to see our white Android head and what is also very useful is instead of images we can use icons an icon is basically the same as an image just that it is Vector only so yeah if you really just want to show a shape on the screen but not any photographs so you can have an icon if we want to choose this overload with the image vector and here compose comes with a lot of predefined icons from the material design Library here we can simply say icons dot default and then for example have or add icon which is simply the plus to add something if we then add a Content description which we set to now we should be able to see our add icon on the screen not sure if it's white it's actually black but we don't have a background so if we zoom in we see we successfully now Drew an icon okay now that we know how to draw images and icons on our screen something else that's very important is what if we actually want to have some kind of conditional UI for example so if we sometimes want to show this icon and sometimes not based on some kind of condition let's say if the name has a length those longer than five or so we want to show this icon and else dot in XML we could simply use an if statement and then yeah just change the visibility to false or so of that view how do we do this here because none of these composables actually has like an attribute visible or so that we can set to false if we want to hide it now in Jetpack compose we can actually also just use normal cotton language which is like if statements so we can for example say if the name the length is larger than five we want to show this icon we move this in here and then if that is actually the case here it is the case it is shown and if it's not the case let's remove some letters then it should not be shown yes now it's actually hidden so these if statements work the same way as before and something that's also very cool is is let's say we move this out of this if statement again if we want to show a lot of these icons then let's add a column um let's just leave it like that and let's say you want to show 10 icons so instead of here yeah just mentioning 10 icons here as a composable we can also just use a for Loop just normally as we as we do it if we want to repeat something so for I in 1 to 10 let's say then move that in here and since we put that in the column these will now be placed on top of each other as you can see here so that is very cool and works yeah very intuitive in my opinion and now when we already have something like this here in our preview which is kind of a list let's get to the next topic which are lists so in XML I'm sure you remember recyclable use recycler views are kind of the standard way in XML that we can use to make lazy loading less loading list is basically just a list where only the items the user is currently seeing are actually rendered on the screen are calculated in terms of logic but all the items that are not on the screen are simply hidden so they don't end up using any resources and if you've ever implemented your own recyclerview and XML you know how much of a pain that can be because you first of only just specified in your XML file then you need to kind of assign a layout manager how the items are actually laid out on the screen and most importantly you need an adapter so you need to override a bunch of functions Define how your unbinding logic actually works and that was a huge pain and it actually took a while to make such a recycler view work and Jetpack compose that is now a lot easier so one way to define a list is simply using a column like we did here and then yeah inserting a bunch of composable using a for Loop however that does not yet have this recycled Behavior since yeah this will simply compose and draw all of our icons on the screen at any time even if these icons are not on the screen and are somewhere out of the screen they will actually be in memory and need resources what do we now do if we want this recycle and lazy loading behavior in compose well we simply need to re replace this column with a lazy column and yeah that's pretty much it all we now need to do is we need to replace this for loop with a specific block that we can only use for lazy columns which is items I'm going to use now let's use this items with a count and then we say we have 10 items and here we then get our index I and if we now check back it's exactly the same result but now we have the lazy loading Behavior so we actually add a modifier here um let's say modifier filmax size so it simply fills the whole size of our screen and we then make use of that here in our actual in our actual app so we can actually open that let's simply remove this surface we don't need this and just have this greeting here we also don't need a name anymore but that doesn't matter let's just leave it like that launch a wrap on our emulator and take a look here that's not launched and yeah here we can see our list these icons are of course very small right now let's increase the size of them so we actually see that it's a real list and we can scroll so here for these icons we can assign a modifier let's say with a size of 100 DP very large icons relaunch this take a look here and then here we have very large icons and we can now scroll in this list so it's yeah the same behavior as we have with the recycler view these icons that are not on the screen are not actually rendered and are not calculated but the other ones are of course in the same way we have a lazy column we of course also have a lazy row which you can simply replace this with so if we use it as a row relaunch this take a look here then you can already guess it we have a row in which we can scroll so this is very cool very easy how we can now do this in compose and it's not as much of a pain anymore as it was with XML so that's it for lazy rows and lazy columns to build some lists and compose the last topic I really want to face here is State and that is a very very important topic so listen carefully after that we'll actually build our little UI that I showed in the beginning where we can enter some text add that to a list and then yeah just dynamically add these items and scroll on our list however as you probably already get just what we did not cover yet is how can we achieve actual Behavior with our UI so that if something happens so if we click on a button for example that a certain part of our UI changes and to understand that more we need to dive a bit deeper into composable functions and in how these work and into the concept of state so first of all what is State a status in the end just a value that can change over time so this could be a text in a text field that could change so in this case this would not be State since it's simply a value that does not change this will never change since we simply hard coded here but if this is text that we could potentially change where maybe let us get added or so then that would be considered state so imagine we want to build exactly that we do have a text and a little button and when we click on that button we want to Simply add some kind of letter to our text how can we achieve this let's simply go to our set content block right in here where we have our greeting we don't need a greeting anymore so let's forget about that and let's also remove this here so it does not confuse you we can remove it here in the preview and simply also close the preview for now and we will just work with our actual app in our emulator so in here we will first of all have a little column nothing new for now we want to add a modifier to Simply fill the whole screen size and then in here we add a little text which might simply yeah just display number let's not just say we we add something to the text but let's rather increment this number and see how we can do that after pressing a button so here we have a text we then have a button we can simply use this button composable for that here we get an on click function when we click on this button obviously then this block of code will be executed and here in this block of code we put in the content of the button so in our case the content is simply text but in compose you're so free that you could also choose images you couldn't put anything you want in this button so we could have a text here that says click me like this and when we click this button then we want to increase this number of our text so if we take a look here if we simply launch there's no emulator and see how this looks like then you see we simply have a number here and the click me text we can also style this a little bit so it's a little bit larger by going in here in our text composable and saying we have a font size of 30 SP let's minimize this again and we then say in our column we have a vertical arrangement of the center and a horizontal alignment of Center horizontally and then we should be able to see a little bit larger text in our center of our screen yes and when we now click this button right now nothing happens but we want to increment this number how does that work well for that we need State because this number would be considered State it's a value that can change over time it's a value that changes when we click the button so how do we declare the state I'm going to go up here and we want to declare the state by Simply Having a vowel since it's a value that can change and this could be considered count and we say by mutable state of that is the way we Define State and compose and we need to import this so Alt Enter import and let's actually also get rid of this by keyword for now I will explain what that is and right now we we get an error here and that is intentional we shouldn't do it like this but let me explain first what happens here so we first of all declare account which we set to this mutable State off and the initial value is zero so that is the the starting value of our account but why if we hover over this does it say creating a state object during composition without using remember so to Now understand why we can't simply call this function in here or what we shouldn't call it in here we need to further understand how compose Works internally so compose is actually a lot smaller than you think if you have such a state such a value that can change over time and you end up using this to yeah just assign that to some kind of parameter in your posable let's say count.2 string and if that value then changes composer smart enough to actually take a look in your UI tree so it will go through all these composables and see where this count is actually used and only for those composables where it is used it will actually redraw these on the screen and that is what we consider a so-called recomposition so whenever a state changes that a certain composable uses then that certain composable will recompose and if another composable which does not use that state also does not recompose we consider that being skipped so in this case this text would recompose if our account is increased however this button would not recompose since it does not use any any of these this count State and this also only works if we Define our state with this mutable State off so this mutable State off contains this information that all the composables should actually listen for these for these mutable States or rather to these states in general and just listen to changes and be recomposed when a certain value changes and since whenever this value now changes this whole function here will be record since all of these things are just functions in kotlin all the lines that are in between like this here will also be recalled and imagine whenever any type of State here changes this line would be recalled that would mean that we simply assign the default the initial value of 0 to our account again so it's not really saved so this would lead to a lot of bugs here if we want to save this we actually need to wrap this around a so-called remember block so we can say remember remember and then here we have this mutable State off so remember we'll basically just make sure that this code is executed once and then the value of it is simply yeah remembered so it won't actually assign the initial value again on every single recomposition we can do it like this and then we can refer to the value of our account by saying count dot value or if we don't want to write value all the time we can use this by keyword and then we can simply use count a tostring so if we now simply go to our button on click listener I always say count plus plus here we simply want to increase count and we launch this app take a look here click this button then you will see that our number is actually increasing and our text will update correspondingly so I know this concept might be very confusing if you are new to this let's go through this again what happens here so we first of all simply declare this count we declare this as a mutable State off so just a value that changes over time it's mutable so we can change it in our own and the initial value is zero then we declare our button here with an on click listener when we click on this button this block will be executed and we increase our account by one as soon as this happens as soon as the number is increased compose will now look in our UI tree and see where this count is actually used in our case it's only used in this text composable so it will actually recompose this text composable with the new value of count so it will simply update the text with one with two three and so on in the same way we could also yeah use the count in here for example plug me colon count and then our button text would a change correspondingly if we take a look in here then now both these values would change in this case yeah this text composer would recompose and this text composer would recompose since both these refer to our account text and now we actually have all the knowledge we need to be able to build our simple UI with a text field where we can enter a value and then add a certain name to a list so let's get rid of all of this here and start to implement that so first of all I want to have a row in the top where we have a text field and a button next to that and then below that row we will have our lazy column in this case which is simply a list of names where we want to add a new name when we click the button and since we first of all want to arrange these items vertically so we first of all have a row and below that we have our laser column we need a column as the most Auto composable the most outer layout we'll just say we have a modifier of modifier fill Max size and we could also add a little bit of paddling here of 16 DP for example and then in here for this column we actually want to have a row first of all which contains the text field and the button so these will be arranged horizontally which is why we use a row for this row we simply want to fill the whole width of our screen so fill Max width otherwise yeah it will occupy all the space we actually need for our lazy column and in here we now want to have our text field and our button a text field can be created simply with a text field composable that is a normal material design text field we also do have an outline text field like this and we do have a basic text field which is yeah which allows us a lot more styling but does not have any fancy functionality like hints or so which the material design text Fields do have let's actually use an outline text field here which I think will look fine press enter and now we need to specify a value on the one hand and an on value change function so text Fields also work quite differently compared to XML so what do we now need to assign for the value the value is simply the text that is currently entered in the text field and on value change is a Lambda that will be called with a new text after it was changed and here we actually need to make this text field text as state since that is a value that can change over time since if we enter it the the text of the text field will change so what do we do we scroll up and in here we declare our state which is called yeah let's just call it name or so since we want to enter name we say bar remember again make sure that everything is imported here and we see a mutable State off and the initial value is simply an empty string so we start our text field state with an empty string it's just an empty text field and we enter our name here as the value and then what happens if the value changes so when the user types something and then we actually need to assign the new value to our name State again so our text field will show that that's actually what we call a two-way binding since yeah the same state that causes the state change will also trigger this on value change function again which will then update this uh the state again so this is just how we have to do it here in compose we should simply say the name is equal to our text so the text that was changed and that change will then actually recompose this outline text field to display the new name and then next to this outline text field we actually want to have a button with a non-click listen again here we want to add our or person or name to our list let's leave that empty for now and just add a text to this button the text is simply add so now we have our very first row or the very first part of our column the second part of our column is then our list that yeah simply reflects all of our names and you already guessed it this list of names is also a value that can change over time so that must be state so we can say VAR names so all of our names that we added so far but I remember we say mutable State off and that is simply an empty list initially of type string and if we now scroll down below our row and we specify a lazy column here since that is what we use to show a bunch of items now we can say we have our items block just as we did before this time we want to choose the second overload since it takes a list of items and we have a list of strings here so that will work perfectly fine and then we can say we actually have our names list open this block of code and here for every single let's call it current name we got the reference here and we can use that to show a certain item for example a text so you can say a text with a current name and that will already be enough to show a list of names let's now go to our button since currently we don't do anything when we click on add in here we want to say we take our names list and we simply add our new name to it so names plus name so whatever the name state currently is let's only do this if our name that we entered in our text field is actually not blank then we do want to add this here so like this if we Now launch this you will note that this looks quite ugly at the moment but it will be a functional UI so here we have our text field we can enter a value for example Philip and if we then click add we will add this value to our list here right now our state does not reset so the the text remains in the text field after we actually clicked out so we can add Philip a lot of times here and it gets added to our list so if we do this until it reaches the the end of our screen we will also see that we can scroll here right now this is of course quite ugly so let's make this a little bit more beautiful by adding some spacing in between here and also filling the whole width of our screen and also to give these yeah individual text a little bit more space Maybe add a little divider or so so let's go to our row here first of all and add a little bit of spacing between our outline text field and button we can do this with a so-called spacer which just takes them out of fire and the modifier can simply be with so we just assign a fixed width amount of let's say six NDP and this will just be an invisible composable which just occupies a little bit of space so if we Now launch this you will see that there will be a little bit of spacing between our text field and our button you also see that our button is not really at the end of our row so this space is more than this space that is big because we have a default kind of width for text fields in compose if we want to change this we can go to our row actually to the the outline text field and add a modifier of modifier that weight one F weight is a modifier that is only applicable in rows and columns which is basically the same as a weight and a linear layout so if we assign a weight of one here that means that this outline text field will simply fill all the space it can get or rather if we um say it differently then these other composables here inside of our Row in this case will take just as much space as they need and this outline text field will take all the remaining space if we were to also add a weight of one to our button then the outline text field and button would share exactly the same amount of space in our row so if we now relaunch this take a look here you will see that now it looks much better but we still have the issue that if we add a name here then it looks very cramped so let's fix that as well we first of all want to go in here in our on click listener for a button I want to reset the name to an empty string after we clicked it so we just yeah say that our text field is empty again after we clicked our button and then here in our lazy column we can actually go ahead and assign a modifier through this text to each one and say we have a modifier first of all to fill our hole with and then we can add a little bit of padding to these so they just have some spacing so padding 16 DP and if you want you can also add a little divider here like this so yeah we see that below every single text if we now relaunch this take a look here then add a name here click add it disappears here and here we have our list item in our list we can add a different name here and so on so now that is looking a little bit better not too fancy but I hope you understand how this now works because every single time we type something here our name State again changes so this one here then compose will actually take a look in all these composables where this name state is used it will find it inside of this composable here it will recompose this and yeah then it will reflect the new name State and the same way if our names state so plural is actually changed which happens when we click on our button compose will see okay the names actually change let's see where this state is actually used it will check here okay no no no no no ah here in this laser column is actually used so this laser column will recompose and it will actually add the new name to our list and in my experience like I've now been working with compose for for one and a half years roughly and the Mexicans this new approach this declarative UI design approach is a lot less or prone since you really manage your whole UI set on your own like in XML for example if you have a text field this kind of State Management logic is already handled inside of the view but here in compose you will need to handle it all but that that really allows you the maximum amount of freedom and since you can now also just take this single yeah parts of your UI and put them in composables like we can simply take this list here and say down here comp which is the abbreviation for composable simply say we have like a name list or so put this in here we pass in a name state which is a list of string here and we should also always provide a modifier if we use if we create such a composable function like this we can set this to the default modifier just that we can change the appearance of this from the outside we can assign this here now that we did this we have a reusable UI component and that is the true power of compose since now we can simply insert such a name list by simply having one single function call like here we can say our names as our names and wherever you now want to use this exact list in your in your project you can just do this with this single call and this is not so easy with XML so you do have these include tags and stuff like that but it really is a pain and for a lot of things you need to implement custom views in XML where you need like a separate class inheritance and all that stuff which is a lot of effort to implement in my experience it's a lot easier to just quickly create such a composable to to maybe have yeah just a custom style button for your app maybe you have some custom branding guidelines and you you need these buttons across your mobile app then you now only need to implement a single composable for the these and you can very easily use this these then across your app so I hope this gave you a good introduction of course there is much more to learn about compose if you're just looking for some more advanced topics then take a look at effect handlers which are quite important to know to not mess things up but these are rather Advanced you can take a look at animations and compose which I also have a video about just as about effect handlers and I would just recommend you to to build some simple UI maybe take a very simple design from dribble also and try to implement that and compose and it's really not an issue if that takes some time because you will definitely learn a lot on that journey and if you want me to help you on that path then I have a lot of Premium courses on Android so if you're looking to become industry ready as an inner developer learn more about compose learn more about architecture then I have a lot of helpful courses about that for you so you can check the first link in this video's description to yeah just learn more about these courses and where you can get these what they will teach you check these out and apart from that thanks a lot for watching this far I hope this video would charge you a lot and I will see you back in the next video have an amazing day bye bye

Channel: Philipp Lackner

Views: 73,234

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: 6_wK_Ud8--0

Length: 48min 27sec (2907 seconds)

Published: Wed Feb 01 2023