The State of the CheckBoxes8:14 with Ben Deitch
In 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
You need to sign up for Treehouse in order to download course files.Sign up