State - Android Jetpack Compose - Part 6

hey guys welcome back to a new video in this video i will cover state and jetpack compose which is a very important concept which you might already know from other types of frameworks like flutter or web development state basically describes how our given ui looks at a moment because so far we have only dealt with static content here in this playlist so content that didn't really change but in you in real app we actually have dynamic content so the user can interact with our content with the ui to actually change its appearance to modify it to make it look differently and all these different values that describe together how our ui looks at a specific moment that is called ui state and in general compose when we have a composable function and this composable function makes use of some kind of state so let's say you have a simple increment counter you have a button and when you click on that button just the counter is increased and the button displays that corresponding counter so first one two three and so on then this counter variable would be the state of the button and because every time we press the button the text on that button needs to change which will lead to jetpack compose re-rendering that button because it needs to be redrawn in our ui and this process of redrawing ui components is called recomposing in jetpack compose so just that you know what i'm talking about when i will use that word in future so what i want to do in this tutorial is a little color box so just a box that if we press on that box if we click on it it will change its background color to any random color and that color that background color of that box will be the state that we use here so let's scroll a little down and create our composable function here for that box annotate this without composable and call that colorbox and i'll just pass a modify here from compose ui and set that to the default modifier modify what is wrong here modifier this one now i have it like this and now inside here we just have a simple box you already know that and you also already know how we can apply a background color to a box to any composable just by using a modifier dot background and here we can set that to a background color like yellow and now when we click on this box so we make it clickable then here in this block we actually want to change this background color of our box to a random color so how can we do that and well the answer is by using state we declare our state on top of our composable so here and we call that state color here because well it represents the color the background color of our box and we could create that state by using mutable state off and then set that to color yellow by default for example and then we could take that color and put it here instead of this color yellow into the background property by using color.value and that just refers to whatever we put into this state all right whatever value that state actually represents here and then here in our clickable block we can then just use color.value and reassign that value so if you're familiar with android and mvvm and livedata then you already know this concept of state because live data is nothing else than state so here we can just set and assign a new value to this color state and to randomly generate that we can use color and you can see if we press ctrl p we have the option to pass floats here for each of those colors so for red green and blue that is between zero and one so we can just use random.nextfloat three times here and for the alpha value we can pass one which is actually the default so now what this does is it defines a state here that is initially set to color yellow so our color box will start with yellow with a yellow background color then here we assign that state value to our background and whenever we click on this box then we reassign that state that color state to any random color so whenever we set this state here in this line what this will do is okay it will tell compose hey the state changed so our composable should actually look differently than before so what compose will do behind the scenes is it will recompose this color box so it will redraw it on our ui so that it can actually show that state change so it can actually show that color change and display that box with a different color now the problem here now is that when this composable is recomposed then this function is called again and well if this function is recalled basically then we also reset this state to color yellow here in the first line and that is not optimal of course so that would mean it wouldn't really work here because we always reset the the color state here to yellow in the first line to fix this what we need to do is we need to use what is called remember that is a lambda function that comes from compose need to import that pressing alt plus enter and well it will just remember the value of this state from the last composition so it won't reset that value on every recomposition and you will stumble over this remember keyword here quite a lot in compose so it just means okay when this box is recomposed we actually don't want to reset this value that's all it does and by the way we should use this modify here instead of the default one otherwise that is pretty pointless so now i will scroll up here to set content to actually um use our color box here in our ui and for the modifier i will use modifier dot fill max size to just fill our whole page and let's now run our app take a look here you can see our box just fills our whole screen it's yellow by default and when we click on it it changes to a random color so that is how we can actually change our ui by using state so this was pretty easy so far because this state only affected this color box here so when we clicked on this color box then we also wanted to change the background color of this color box but what actually happens if we want to click on this color box and we want to change the background color of a whole nother box so inside of this composable we actually don't have access to this other box so let's say we have another box here and let's actually wrap these two boxes into a column and that should just fill the max size here and then we put in the color box and we specify another box where we set the modifier to a modifier dot not for max size that come on um dot background and now here we want to have that color value that we actually specified down here in that color box but we don't have access to that so we cannot write color dot value here because it doesn't know color but before we fix that let's actually also assign a weight here to this box of one f and a weight to this color box of one f weight is actually a property we can only apply in rows and columns so what this will do here is it will in our case weigh our both boxes here with the same weight so both will actually get the same space in our column so both will fill the same space and i don't even know if this matters here but let's move this film exercise after that weight and also specify fill mag size here and then let's next fix that little issue here that we don't have access to this color value so first of all what we want to do is we want to define our state not in our color box instead here in our column so here we have a val color it's equal to remember and set it to color yellow by default um i know not color yellow of course because we want to wrap that into a mutable state off like this and then we assign this color yellow here to our second box background here and then in our color box here we can actually remove that that state because now when we click on that color box we want to change the background color not of this box instead of this box so we can remove this here and what we will instead do is we will define a callback function to actually change the state of our parent composable so we can call that for example update color and that will take our color value that we actually updated here when we clicked on this box and it won't return anything so a unit and then here for the background color let's just choose any other color for example red because this time we don't change this background color and when we click on this box we now want to call our lander function with our new color value that we randomly generated here so we actually just use update color and in here we pass that color value and we move this so then when we scroll up we will see okay it misses a parameter here our lambda function we can't specify that here so that lambda block is now called when our color state changes when we clicked on our color box and you can see it gives us the new color so we can then use the color state we defined up here and set its value to the new color and now let's relaunch the app and see if that works so you can see we now have two boxes the top one is our color box and if we click on that then you can see our bottom box now changes the color and the top box doesn't and that is actually considered external state if we have this state here outside of our composable and what we had before if we change the color of the box itself then that was considered internal state but you can imagine for bigger apps doing it like this can become quite messy because you will have a lot of these state values and for that we will actually have other solutions we can just handle state in our review model which we will do later so that will be easier but it's still important that you understand this concept of state here so i hope you like this video if so please take a look in this video's description which will lead you to my website where you will find more advanced android premium courses that will bring your android skills to the next level so please leave me a like and a comment below and i wish you an awesome day see you next video bye bye [Music] [Music] you

Channel: Philipp Lackner

Views: 10,390

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

Id: s3m1PSd7VWc

Length: 12min 44sec (764 seconds)

Published: Tue Apr 13 2021