Preview
Video Player
00:00
00:00
The State of the CheckBoxes
8:14In this video we'll see how we can save and restore the state of the CheckBoxes!
We just finished up the layout
of our ingredients fragment
0:00
by adding a check box for each ingredient.
0:03
We also saw that rotating the app
caused us to lose all of our checks.
0:05
So what we need to do is save the state of
our check boxes when the fragment is being
0:09
destroyed, and then restore that
state when it's being created again.
0:14
Let's start with saving
the state of our check boxes.
0:19
But before we can do that, we'll need to
be able to access our check boxes from
0:22
outside of the setUpCheckBoxes method.
0:26
At the top of the class, let's create
a new array of CheckBoxes as a field.
0:29
Private CheckBox array, and
0:37
let's name it mCheckBoxes.
0:42
Then in onCreateView, right after
we create the ingredients array,
0:46
let's initialize mCheckBoxes to
be a new array of CheckBoxes
0:51
with the same length as
our ingredients array.
0:55
mCheckBoxes equals new
0:58
CheckBox array with the same
length of our ingredients array.
1:02
Next, at the top of
the setUpCheckBoxes method,
1:10
let's create a new int named i and
set it equal to 0.
1:14
We'll use this to iterate
through our mCheckBoxes array.
1:22
Then inside the for each loop, instead
of creating a new CheckBox variable,
1:26
let's use our mCheckBoxes array and
pass in i for the index.
1:33
Then let's copy this and paste it over
the remaining CheckBox variables.
1:42
Finally, at the bottom of the loop,
1:53
let's increment i by 1 to
move on to the next index.
1:55
Now let's get back to saving
the state of our check boxes.
2:01
Just like activities, fragments also
have an onSaveInstanceState method.
2:04
Let's add a line below setUpCheckBoxes.
2:10
And use Ctrl+O to override it.
2:15
saveInstanceState.
2:19
Then let's add a line at the top.
2:22
Then let's create a boolean array to
store the state of each CheckBox,
2:26
true for checked and false for unchecked.
2:32
Let's name this array stateOfCheckBoxes,
and
2:36
set it equal to a new boolean array
with the same length as mCheckBoxes.
2:42
Now we need to loop through our
CheckBoxes, and if a check box is checked,
2:53
we need to set its corresponding
entry in stateOfCheckBoxes to true.
2:58
So just like above, let's create
an int named i and set it equal to 0.
3:03
Then let's loop through each
CheckBox in mCheckBoxes.
3:11
For CheckBox checkBox in mCheckBoxes.
3:16
And inside this loop,
let's set stateOfCheckBoxes
3:23
at index i equal to checkBox.isChecked(),
3:28
which works exactly as you would expect.
3:34
Then let's increment i
by 1 on the next line.
3:40
And now, after this loop has ran,
our stateOfCheckBoxes array will be up
3:45
to date with what's actually
in the check boxes.
3:49
All that's left is to put this array
into the provided Bundle, outState.
3:53
Let's add a line below the loop.
3:59
And type outState.putBooleanArray.
4:03
Then for the key let's type, in all caps,
4:08
KEY_CHECKED_BOXES, and then let's
pass in our stateOfCheckBoxes array.
4:11
Then let's use Alt+Enter
to create the key,
4:19
and set it equal to key_checked_boxes.
4:23
All right.
4:33
That covers saving the state.
4:34
Now we just need to restore it as well.
4:35
Back in the onCreateView method,
4:38
right below where we set mCheckBoxes,
4:42
let's create a new boolean array named
4:46
checkedBoxes to store any
saved instance state.
4:50
And let's set it equal to a new boolean
array with the same length as mCheckBoxes.
4:55
Now we need to populate the checkedBoxes
array with the data we saved, but
5:08
only if there really is saved data.
5:12
On the next line, let's create an if
statement to make sure that our saved data
5:15
exists before we try to access it.
5:20
Let's type if savedInstanceState
is not equal to null,
5:23
to first check that there
is a saved instance state.
5:29
And to make sure that our array is
included in that saved instance state,
5:34
let's type, and
savedInstanceState.getBooleanArray,
5:40
pass in our key and
check that it's not null as well.
5:45
And remember that thanks
to short-circuiting,
5:54
if saved instance state is null, this
second condition will never be evaluated.
5:57
So we're in no danger of
calling getBooleanArray
6:03
on a null savedInstantState.
6:06
Finally, inside the if statement,
let's set our checkedBoxes array
6:09
equal to the boolean array
from our savedInstanceState.
6:14
GetBooleanArray(KEY_CHECKED_BOXES).
6:21
Now that we've retrieved the saved state,
6:27
all that's left is
updating the check boxes.
6:29
Let's add our checkedBoxes array as
the third parameter to setUpCheckBoxes.
6:32
Then let's use Alt+Enter to add
it to the method's signature.
6:41
Then, in the ingredients loop,
right below where we add the view,
6:47
let's determine if a check
box should be checked.
6:51
If checkedBoxes i.
6:55
And if it should be, let's check it.
7:03
mCheckBoxes at position i dot toggle.
7:06
We're finally saving and
restoring the state of our check boxes.
7:13
But before we get to testing, there's one
fragment method we haven't covered yet
7:17
that you should know about.
7:21
And that method is setRetainInstance and
it takes in a boolean.
7:23
If we call setRetainInstance and
pass in true,
7:28
our fragment's instance will be
retained even if we rotate the phone.
7:32
But onCreateView will still be called,
so it's not super helpful in this case.
7:36
But if you'd like to learn more, check out
the link in the teacher's notes below.
7:41
Now let's test the app and
see if we've fixed the issue.
7:46
I'll click Pancakes.
7:53
Then click a few ingredients.
7:55
Yeah, I added the milk.
7:57
Then let's rotate it.
7:59
And great job!
8:02
But what's this?
8:04
I can't seem to scroll down to
see these bottom ingredients.
8:06
We'll see how to fix
this in the next video.
8:10