Welcome back.
And this video, I would like to teach you the concepts of state and recomposition.
So we're going to use something called a text field, which allows us to enter user inputs, and it
is stateless and only displays whatever you tell us to display to make it stateful.
We need to make it own a piece of state that it can change over time.
So let's look at this in an example, because all of these keywords, they don't make sense without
the proper example.
So here what I have is a new compose application.
The jetpack compose one.
You can see that here by having UI theme the here and also it's a component activity.
OK.
So now inside of the green method, I'm not having a text, but what I'm going to use instead is going
to be a column.
Therefore, let's go ahead and add column here, and the parentheses will be empty and not going to
add anything for now, but I will change that later.
And then I'm going to use a text field and this text field needs a value and it needs to have code that
should be executed on every single time that the value has changed.
So when we're entering something, this method here will be called even though it's not a method, but
this lambda here will be call.
So now what we can do is we can also add a little button here.
I'm going to add an on click to it, which will be empty, so nothing will happen.
And then I'm going to add and content for it as well, which will just be a text that will say, display.
OK.
Nothing too fancy.
Really, just a small text here.
So if you run this, we will see that it's not going to look great.
But yeah, that's what we getting.
So this is the text field.
So the text input field and this is the display button, so let's center them.
Therefore, we can change the column properties here.
And in particular, I'm going to use the horizontal alignment one.
So here horizontal alignment, which will be using the alignment center horizontally setting.
And by the way, if you were wondering or get any problems with the button, make sure that you have
my imports because otherwise you might get into trouble using the wrong imports and then the button
doesn't work as intended and then everything is confusing.
So.
If we rebuild, we discovered that our application, so even for rebuild this now with our horizontal
alignment, you can see it is horizontally aligned, but it doesn't look great.
So if we rebuilt, we discovered that it still remains the same.
And this is because the composable does not really understand how to change to the alignment with no
size given to it.
So let's give it a fill max width using the modifier.
So for the column itself, we're going to add the modifier here modifier thought modifier or equals
modifier dot.
And here I'm going to use Phil Macs with, so it should take the entire with available now.
If you run it again, it will at least be in the center.
Like so, but now if you want to center it in the center of our screen and not just on the horizontal
level, we need to add the vertical arrangement as well.
So vertical arrangement will be arrangement center, which is this option right here and centering it
is not enough.
We also need to make sure that we fill the max height as well.
So now you could have used Phil Max size.
It would have done the same trick, but you can see that you can combine them so max with as well as
max height in one line.
So now we have it in the center and we can get started with it.
And in order to prove that Phil Max size works as well, let's just test it.
And we can see it works flawlessly as well.
That's because the column is taking the entire available with and hide and then arranges our items centered
on a vertical level as well as a line that centered horizontally.
We can also make the UI a little better by adding a space in between the elements.
This can be done using a spacer spacer is also a composable.
So let's go ahead and just add a little text here, which will say something like, hello.
Then we have the text field, and maybe we want to have a little space in between by using the spacer,
we can achieve that where we just say how much distance we want to have.
So modifier dot height.
And then we can just say, for example, TNO density pixels is the distance that I would like to have
and therefore would need to import density pixel.
All right.
So hover over it, import it.
And that we should be good.
So now let's use this spacer as well.
After the text field, so it's going to add the spacer between the text field and the button.
So let's rise again real quick.
So you can see this has nothing to do with state, but I just wanted to make sure that we have a little
application running that doesn't look too awful or it still looks awful, but it's not too bad.
So now let's actually get to the state part where we're going to talk about the remember key word and
the mutable state.
So let's get into state and recomposition.
First, let's try to get the value to display on the text element as it changes on the text field within
the greeting block, we create a remember variable of type, immutable of string.
So let's do exactly that.
So here in the greeting method, we have all of the column stuff and so forth.
But first I create this name state.
By remember, so we're using the by keyword and then the member berries, so here, remember?
And import remember as well.
So auld.
Enter and then.
We need to create the mutable state off.
And in this case, it will be an empty string, so let me import mutual state off here as well.
And to use remember, as a delegate, we have to manually add these imports.
So in case this doesn't work properly, runtime remember?
It doesn't seem to be in here.
Let me make sure that I have it, so runtime don't get value.
And then runtime that set value.
OK, and now you see the arrows disappeared.
So now we're using remember as a delegate.
So within the text field, we can now pass it the name state to value and then assign the string from
on value change to it.
So what does that mean?
Well, here in text field, you see we have this value and I'm going to assign a state to it.
So this will be a string, but at the same time, we're going to manage it as a state.
And then on value changed.
I want to make sure that the name state will be overwritten with it.
And what is it?
It's this it hear it, which we get from this lumber here, so on value change, we get the value that
is currently inside of the text field as this it variable, which we then can assign to our name state,
which is the string that we have set up here, which is using the remembered keyword and as the mutable
state of method.
And then I would like to use this name states inside of this text.
Hello.
So instead of saying hello, I want to say hello.
Name states.
So whatever the current name state is, it should be overwritten there.
So let's run this real quick and see what's going to happen there.
So let me add enter something you see.
Hello, Dennis, is this split?
So the display button doesn't do anything, but whatever we do here, you see, it's directly reflected
inside of our text up there.
Even though the text field itself, a stateless, but we assigned the state here, assigned the value
name state to it.
So now what if we only want to display the changes in our string there or in our text here once we clicked
on the button?
So first, we need to declare a variable of type string just below the Remember type, though here.
So here VAR name is going to be an empty string for now.
And once we click on the button, we are going to say that the name should be whatever the name state
currently holds.
And then we just need to replace the name state here with the name.
So basically, we're saying the name state should be constantly updated, right?
That always knows what the current state of that text field is, but only once we click on the button,
the name that we are displaying inside of the text itself should be whatever the name state is at that
point.
So if we run this again?
And I entered Dennis now, and I click on display.
Well, nothing happens.
This is because even when name gets its value from the state, it still does not change at runtime because
itself so the name variable.
This one here has no state.
So the compose elements are rerun to update composition when data changes, which is known as recomposition.
So when this happens, composable regain its data only from a member value.
So we still need to make the name value to be a remembered type with immutable state so that the text
element can receive its data when it changes.
So this basically just means that we need to make sure that this name here is going to have also this
by remember keyword by remember.
And then it is a mutable state of.
So here or uses this mutable state of like so.
So now let's run it again and test this.
And click on this plane, you see now it has changed, so now, Dennis, or whatever I'm doing entering
here, you see, will be displayed there because now our name is remembering whatever stated it has
and it changes whatever is looking at it, so to speak.
OK, so this text is looking at this name, property and when the name property itself is being changed,
then this text knows I need to refresh my UI, so to speak.
So now, even though remember is saved in memory, it does not survive configuration changes.
And if we now rotate the device, the state will be lost.
And this doesn't work on my emulator here, so I will need to show it on my real device.
So let me run it on my Samsung.
And unfortunately, there's something wrong with my emulator.
I don't know what's up, I tried many different solutions.
I would probably have to use a different Android Studio version, but I want to make sure that we are
using all the same Android Studio version.
OK, so there we are.
Let me enter something here.
Let me click this play and then turn it, and you see the data is lost so we don't see the name anymore.
It's just gone.
And this is something we can change by using their remember, savable so far, name by remember.
It's what we used so far.
But there is also by remember savable available and there are inputs, but we're not going to require
them for now.
So if you rerun this now and we check it again and not on the simulator, but on that one here, then
we will see that the state will be saved even though we are rotating the screen.
So I mean, display this, rotate the screen and you see, hello, Dennis is still stored in here,
even though it's not stored in our.
Other text field, so in this text field, you see name state is only remembering, but name is remembering
and saving.
So remember, savable saves the variable even though you're changing the configuration, which means
you're rotating your screen.
So that's really what you need to take away from this.
There is something called state, and whenever you are working with state, you need to use to remember
a keyboard and the mutable state of variable.
Even though the value is going to be empty at start, we are overwriting it and our UI is updating based
on changes, which is really, really cool.
So this allows us not to have to manually call those updates, but they are done automatically, so
to speak, when the data changes, which is really powerful.
So that's it for this video.
See you in.