1 00:00:01,130 --> 00:00:01,819 Welcome back. 2 00:00:02,060 --> 00:00:06,680 And this video, I would like to teach you the concepts of state and recomposition. 3 00:00:07,010 --> 00:00:14,780 So we're going to use something called a text field, which allows us to enter user inputs, and it 4 00:00:14,780 --> 00:00:20,690 is stateless and only displays whatever you tell us to display to make it stateful. 5 00:00:20,690 --> 00:00:24,980 We need to make it own a piece of state that it can change over time. 6 00:00:25,400 --> 00:00:30,350 So let's look at this in an example, because all of these keywords, they don't make sense without 7 00:00:30,350 --> 00:00:31,250 the proper example. 8 00:00:31,640 --> 00:00:35,480 So here what I have is a new compose application. 9 00:00:35,930 --> 00:00:37,100 The jetpack compose one. 10 00:00:37,100 --> 00:00:43,640 You can see that here by having UI theme the here and also it's a component activity. 11 00:00:43,960 --> 00:00:44,260 OK. 12 00:00:44,720 --> 00:00:50,780 So now inside of the green method, I'm not having a text, but what I'm going to use instead is going 13 00:00:50,780 --> 00:00:51,560 to be a column. 14 00:00:52,740 --> 00:00:58,470 Therefore, let's go ahead and add column here, and the parentheses will be empty and not going to 15 00:00:58,470 --> 00:01:00,780 add anything for now, but I will change that later. 16 00:01:01,110 --> 00:01:09,030 And then I'm going to use a text field and this text field needs a value and it needs to have code that 17 00:01:09,030 --> 00:01:12,780 should be executed on every single time that the value has changed. 18 00:01:13,230 --> 00:01:17,700 So when we're entering something, this method here will be called even though it's not a method, but 19 00:01:17,700 --> 00:01:19,050 this lambda here will be call. 20 00:01:19,440 --> 00:01:23,640 So now what we can do is we can also add a little button here. 21 00:01:23,940 --> 00:01:29,850 I'm going to add an on click to it, which will be empty, so nothing will happen. 22 00:01:29,850 --> 00:01:37,620 And then I'm going to add and content for it as well, which will just be a text that will say, display. 23 00:01:37,860 --> 00:01:38,160 OK. 24 00:01:38,250 --> 00:01:39,210 Nothing too fancy. 25 00:01:39,210 --> 00:01:40,650 Really, just a small text here. 26 00:01:41,100 --> 00:01:44,850 So if you run this, we will see that it's not going to look great. 27 00:01:44,850 --> 00:01:46,380 But yeah, that's what we getting. 28 00:01:46,380 --> 00:01:48,690 So this is the text field. 29 00:01:48,870 --> 00:01:52,800 So the text input field and this is the display button, so let's center them. 30 00:01:53,130 --> 00:01:56,520 Therefore, we can change the column properties here. 31 00:01:56,520 --> 00:02:02,210 And in particular, I'm going to use the horizontal alignment one. 32 00:02:02,220 --> 00:02:09,270 So here horizontal alignment, which will be using the alignment center horizontally setting. 33 00:02:09,690 --> 00:02:14,280 And by the way, if you were wondering or get any problems with the button, make sure that you have 34 00:02:14,280 --> 00:02:19,440 my imports because otherwise you might get into trouble using the wrong imports and then the button 35 00:02:19,440 --> 00:02:22,950 doesn't work as intended and then everything is confusing. 36 00:02:23,520 --> 00:02:23,880 So. 37 00:02:25,450 --> 00:02:31,780 If we rebuild, we discovered that our application, so even for rebuild this now with our horizontal 38 00:02:31,780 --> 00:02:35,170 alignment, you can see it is horizontally aligned, but it doesn't look great. 39 00:02:35,500 --> 00:02:38,980 So if we rebuilt, we discovered that it still remains the same. 40 00:02:39,250 --> 00:02:45,070 And this is because the composable does not really understand how to change to the alignment with no 41 00:02:45,070 --> 00:02:46,700 size given to it. 42 00:02:46,750 --> 00:02:51,880 So let's give it a fill max width using the modifier. 43 00:02:52,510 --> 00:03:01,720 So for the column itself, we're going to add the modifier here modifier thought modifier or equals 44 00:03:01,720 --> 00:03:02,770 modifier dot. 45 00:03:03,890 --> 00:03:12,050 And here I'm going to use Phil Macs with, so it should take the entire with available now. 46 00:03:12,050 --> 00:03:16,070 If you run it again, it will at least be in the center. 47 00:03:16,160 --> 00:03:21,380 Like so, but now if you want to center it in the center of our screen and not just on the horizontal 48 00:03:21,380 --> 00:03:25,990 level, we need to add the vertical arrangement as well. 49 00:03:26,000 --> 00:03:34,070 So vertical arrangement will be arrangement center, which is this option right here and centering it 50 00:03:34,070 --> 00:03:34,930 is not enough. 51 00:03:34,940 --> 00:03:39,590 We also need to make sure that we fill the max height as well. 52 00:03:39,950 --> 00:03:42,620 So now you could have used Phil Max size. 53 00:03:43,220 --> 00:03:50,060 It would have done the same trick, but you can see that you can combine them so max with as well as 54 00:03:50,060 --> 00:03:51,290 max height in one line. 55 00:03:51,680 --> 00:03:54,650 So now we have it in the center and we can get started with it. 56 00:03:55,130 --> 00:03:59,750 And in order to prove that Phil Max size works as well, let's just test it. 57 00:04:02,430 --> 00:04:04,590 And we can see it works flawlessly as well. 58 00:04:04,620 --> 00:04:12,810 That's because the column is taking the entire available with and hide and then arranges our items centered 59 00:04:13,050 --> 00:04:17,370 on a vertical level as well as a line that centered horizontally. 60 00:04:19,930 --> 00:04:24,880 We can also make the UI a little better by adding a space in between the elements. 61 00:04:25,120 --> 00:04:31,000 This can be done using a spacer spacer is also a composable. 62 00:04:31,150 --> 00:04:35,920 So let's go ahead and just add a little text here, which will say something like, hello. 63 00:04:36,820 --> 00:04:42,460 Then we have the text field, and maybe we want to have a little space in between by using the spacer, 64 00:04:42,460 --> 00:04:46,660 we can achieve that where we just say how much distance we want to have. 65 00:04:46,660 --> 00:04:48,310 So modifier dot height. 66 00:04:48,730 --> 00:04:53,410 And then we can just say, for example, TNO density pixels is the distance that I would like to have 67 00:04:53,410 --> 00:04:56,710 and therefore would need to import density pixel. 68 00:04:57,310 --> 00:04:57,670 All right. 69 00:04:58,180 --> 00:05:01,120 So hover over it, import it. 70 00:05:01,120 --> 00:05:02,140 And that we should be good. 71 00:05:02,500 --> 00:05:04,540 So now let's use this spacer as well. 72 00:05:04,740 --> 00:05:10,810 After the text field, so it's going to add the spacer between the text field and the button. 73 00:05:11,860 --> 00:05:13,480 So let's rise again real quick. 74 00:05:13,660 --> 00:05:17,380 So you can see this has nothing to do with state, but I just wanted to make sure that we have a little 75 00:05:17,380 --> 00:05:22,680 application running that doesn't look too awful or it still looks awful, but it's not too bad. 76 00:05:23,980 --> 00:05:30,130 So now let's actually get to the state part where we're going to talk about the remember key word and 77 00:05:30,130 --> 00:05:31,360 the mutable state. 78 00:05:31,720 --> 00:05:34,120 So let's get into state and recomposition. 79 00:05:34,330 --> 00:05:41,880 First, let's try to get the value to display on the text element as it changes on the text field within 80 00:05:41,890 --> 00:05:47,470 the greeting block, we create a remember variable of type, immutable of string. 81 00:05:47,800 --> 00:05:49,510 So let's do exactly that. 82 00:05:49,660 --> 00:05:54,420 So here in the greeting method, we have all of the column stuff and so forth. 83 00:05:54,430 --> 00:05:57,010 But first I create this name state. 84 00:05:59,430 --> 00:06:06,750 By remember, so we're using the by keyword and then the member berries, so here, remember? 85 00:06:07,260 --> 00:06:09,780 And import remember as well. 86 00:06:10,440 --> 00:06:11,190 So auld. 87 00:06:12,300 --> 00:06:13,560 Enter and then. 88 00:06:15,160 --> 00:06:19,560 We need to create the mutable state off. 89 00:06:20,260 --> 00:06:25,510 And in this case, it will be an empty string, so let me import mutual state off here as well. 90 00:06:27,910 --> 00:06:32,890 And to use remember, as a delegate, we have to manually add these imports. 91 00:06:33,250 --> 00:06:38,380 So in case this doesn't work properly, runtime remember? 92 00:06:39,410 --> 00:06:40,740 It doesn't seem to be in here. 93 00:06:40,760 --> 00:06:45,380 Let me make sure that I have it, so runtime don't get value. 94 00:06:47,150 --> 00:06:50,570 And then runtime that set value. 95 00:06:53,330 --> 00:06:55,880 OK, and now you see the arrows disappeared. 96 00:06:57,480 --> 00:06:59,610 So now we're using remember as a delegate. 97 00:07:01,190 --> 00:07:08,060 So within the text field, we can now pass it the name state to value and then assign the string from 98 00:07:08,060 --> 00:07:09,350 on value change to it. 99 00:07:09,890 --> 00:07:10,850 So what does that mean? 100 00:07:10,880 --> 00:07:17,780 Well, here in text field, you see we have this value and I'm going to assign a state to it. 101 00:07:18,050 --> 00:07:24,230 So this will be a string, but at the same time, we're going to manage it as a state. 102 00:07:24,770 --> 00:07:26,360 And then on value changed. 103 00:07:26,720 --> 00:07:31,010 I want to make sure that the name state will be overwritten with it. 104 00:07:31,700 --> 00:07:32,570 And what is it? 105 00:07:33,600 --> 00:07:41,130 It's this it hear it, which we get from this lumber here, so on value change, we get the value that 106 00:07:41,130 --> 00:07:48,510 is currently inside of the text field as this it variable, which we then can assign to our name state, 107 00:07:48,510 --> 00:07:56,850 which is the string that we have set up here, which is using the remembered keyword and as the mutable 108 00:07:56,850 --> 00:07:58,710 state of method. 109 00:07:59,160 --> 00:08:02,800 And then I would like to use this name states inside of this text. 110 00:08:02,820 --> 00:08:03,240 Hello. 111 00:08:03,360 --> 00:08:06,780 So instead of saying hello, I want to say hello. 112 00:08:06,810 --> 00:08:07,380 Name states. 113 00:08:09,090 --> 00:08:12,510 So whatever the current name state is, it should be overwritten there. 114 00:08:15,590 --> 00:08:19,940 So let's run this real quick and see what's going to happen there. 115 00:08:20,270 --> 00:08:22,740 So let me add enter something you see. 116 00:08:22,760 --> 00:08:24,380 Hello, Dennis, is this split? 117 00:08:24,950 --> 00:08:30,680 So the display button doesn't do anything, but whatever we do here, you see, it's directly reflected 118 00:08:31,130 --> 00:08:33,730 inside of our text up there. 119 00:08:34,669 --> 00:08:39,240 Even though the text field itself, a stateless, but we assigned the state here, assigned the value 120 00:08:39,260 --> 00:08:40,100 name state to it. 121 00:08:42,059 --> 00:08:51,720 So now what if we only want to display the changes in our string there or in our text here once we clicked 122 00:08:51,720 --> 00:08:52,260 on the button? 123 00:08:53,180 --> 00:08:59,660 So first, we need to declare a variable of type string just below the Remember type, though here. 124 00:09:00,440 --> 00:09:05,180 So here VAR name is going to be an empty string for now. 125 00:09:05,480 --> 00:09:11,930 And once we click on the button, we are going to say that the name should be whatever the name state 126 00:09:11,930 --> 00:09:12,830 currently holds. 127 00:09:16,250 --> 00:09:21,620 And then we just need to replace the name state here with the name. 128 00:09:22,160 --> 00:09:26,600 So basically, we're saying the name state should be constantly updated, right? 129 00:09:26,600 --> 00:09:33,140 That always knows what the current state of that text field is, but only once we click on the button, 130 00:09:33,380 --> 00:09:39,440 the name that we are displaying inside of the text itself should be whatever the name state is at that 131 00:09:39,440 --> 00:09:39,830 point. 132 00:09:40,880 --> 00:09:42,530 So if we run this again? 133 00:09:44,970 --> 00:09:48,050 And I entered Dennis now, and I click on display. 134 00:09:48,060 --> 00:09:49,020 Well, nothing happens. 135 00:09:49,140 --> 00:09:55,710 This is because even when name gets its value from the state, it still does not change at runtime because 136 00:09:55,710 --> 00:09:58,320 itself so the name variable. 137 00:09:58,350 --> 00:10:00,300 This one here has no state. 138 00:10:01,020 --> 00:10:08,400 So the compose elements are rerun to update composition when data changes, which is known as recomposition. 139 00:10:08,970 --> 00:10:14,070 So when this happens, composable regain its data only from a member value. 140 00:10:14,220 --> 00:10:21,540 So we still need to make the name value to be a remembered type with immutable state so that the text 141 00:10:21,540 --> 00:10:24,510 element can receive its data when it changes. 142 00:10:25,410 --> 00:10:32,310 So this basically just means that we need to make sure that this name here is going to have also this 143 00:10:32,310 --> 00:10:35,520 by remember keyword by remember. 144 00:10:36,840 --> 00:10:40,530 And then it is a mutable state of. 145 00:10:41,670 --> 00:10:45,360 So here or uses this mutable state of like so. 146 00:10:46,960 --> 00:10:50,920 So now let's run it again and test this. 147 00:10:52,210 --> 00:10:58,630 And click on this plane, you see now it has changed, so now, Dennis, or whatever I'm doing entering 148 00:10:58,630 --> 00:11:06,850 here, you see, will be displayed there because now our name is remembering whatever stated it has 149 00:11:06,850 --> 00:11:11,200 and it changes whatever is looking at it, so to speak. 150 00:11:11,230 --> 00:11:17,350 OK, so this text is looking at this name, property and when the name property itself is being changed, 151 00:11:17,350 --> 00:11:22,120 then this text knows I need to refresh my UI, so to speak. 152 00:11:23,700 --> 00:11:29,460 So now, even though remember is saved in memory, it does not survive configuration changes. 153 00:11:30,030 --> 00:11:33,480 And if we now rotate the device, the state will be lost. 154 00:11:33,660 --> 00:11:39,000 And this doesn't work on my emulator here, so I will need to show it on my real device. 155 00:11:41,720 --> 00:11:43,490 So let me run it on my Samsung. 156 00:11:45,050 --> 00:11:48,080 And unfortunately, there's something wrong with my emulator. 157 00:11:48,560 --> 00:11:51,470 I don't know what's up, I tried many different solutions. 158 00:11:51,470 --> 00:11:56,570 I would probably have to use a different Android Studio version, but I want to make sure that we are 159 00:11:56,570 --> 00:11:58,790 using all the same Android Studio version. 160 00:12:02,040 --> 00:12:03,270 OK, so there we are. 161 00:12:03,420 --> 00:12:05,670 Let me enter something here. 162 00:12:05,730 --> 00:12:12,800 Let me click this play and then turn it, and you see the data is lost so we don't see the name anymore. 163 00:12:12,810 --> 00:12:13,530 It's just gone. 164 00:12:14,100 --> 00:12:23,180 And this is something we can change by using their remember, savable so far, name by remember. 165 00:12:23,190 --> 00:12:24,360 It's what we used so far. 166 00:12:24,360 --> 00:12:30,660 But there is also by remember savable available and there are inputs, but we're not going to require 167 00:12:30,670 --> 00:12:31,290 them for now. 168 00:12:31,890 --> 00:12:38,700 So if you rerun this now and we check it again and not on the simulator, but on that one here, then 169 00:12:39,090 --> 00:12:44,580 we will see that the state will be saved even though we are rotating the screen. 170 00:12:44,580 --> 00:12:49,860 So I mean, display this, rotate the screen and you see, hello, Dennis is still stored in here, 171 00:12:50,250 --> 00:12:51,870 even though it's not stored in our. 172 00:12:53,710 --> 00:13:02,020 Other text field, so in this text field, you see name state is only remembering, but name is remembering 173 00:13:02,020 --> 00:13:02,770 and saving. 174 00:13:03,010 --> 00:13:08,650 So remember, savable saves the variable even though you're changing the configuration, which means 175 00:13:08,650 --> 00:13:10,270 you're rotating your screen. 176 00:13:10,930 --> 00:13:14,230 So that's really what you need to take away from this. 177 00:13:14,440 --> 00:13:19,150 There is something called state, and whenever you are working with state, you need to use to remember 178 00:13:19,150 --> 00:13:22,180 a keyboard and the mutable state of variable. 179 00:13:22,270 --> 00:13:29,950 Even though the value is going to be empty at start, we are overwriting it and our UI is updating based 180 00:13:29,950 --> 00:13:32,170 on changes, which is really, really cool. 181 00:13:32,590 --> 00:13:40,510 So this allows us not to have to manually call those updates, but they are done automatically, so 182 00:13:40,510 --> 00:13:43,570 to speak, when the data changes, which is really powerful. 183 00:13:44,560 --> 00:13:45,730 So that's it for this video. 184 00:13:45,970 --> 00:13:46,480 See you in.