1 00:00:04,200 --> 00:00:05,200 Welcome back. 2 00:00:05,560 --> 00:00:08,560 Now we've created the menu for our reports activity, 3 00:00:08,920 --> 00:00:12,220 the next step is to add the code in durations report. 4 00:00:12,820 --> 00:00:15,720 I'll get android studio to generate the stubs, 5 00:00:15,720 --> 00:00:17,920 just after the OnClick function. 6 00:00:18,580 --> 00:00:21,180 We need OnCreateOptionsMenu 7 00:00:21,580 --> 00:00:23,880 and OnOptionsItemSelected. 8 00:00:39,880 --> 00:00:41,880 OnCreateOptionsMenu 9 00:00:41,880 --> 00:00:44,980 just inflates our menu resource, so that's easy. 10 00:01:02,780 --> 00:01:05,280 The work of responding to taps on the menu 11 00:01:05,480 --> 00:01:08,480 will be done in OnOptionsItemSelected. 12 00:01:09,280 --> 00:01:11,640 I'm going to take a top-down approach here. 13 00:01:12,300 --> 00:01:15,300 We'll be calling functions that we haven't yet written. 14 00:01:15,700 --> 00:01:17,800 Obviously, that will give us errors. 15 00:01:17,800 --> 00:01:20,160 But they'll come right when the functions have been written. 16 00:01:20,820 --> 00:01:23,020 I'll delete the nullable type marker, 17 00:01:23,420 --> 00:01:24,710 the question mark 18 00:01:25,610 --> 00:01:29,610 because this function can't be called by selecting something that's null. 19 00:01:57,610 --> 00:02:00,610 I've added branches for the other 2 menu options, 20 00:02:00,860 --> 00:02:02,860 we'll be implementing them later. 21 00:02:02,860 --> 00:02:05,360 The only slightly tricky bit in the code 22 00:02:05,360 --> 00:02:08,160 is the way we're going to toggle the first menu item. 23 00:02:08,560 --> 00:02:12,360 When it's tapped, I'll switch between displaying a single day 24 00:02:12,720 --> 00:02:14,220 or displaying a full week. 25 00:02:15,220 --> 00:02:18,580 Our ViewModel will track whether the report should display a week 26 00:02:19,080 --> 00:02:20,440 or just a single day 27 00:02:20,990 --> 00:02:25,290 and will toggle that true or false when the menu item's tapped, 28 00:02:25,790 --> 00:02:28,290 that call to invalidate options menu 29 00:02:28,690 --> 00:02:30,690 will cause the menu to be redrawn, 30 00:02:31,190 --> 00:02:35,390 which will cause it to display the new menu icon after we've toggled it. 31 00:02:35,940 --> 00:02:39,140 Use ctrl Q or ctrl J on a mac 32 00:02:39,140 --> 00:02:42,440 to see what invalidate menu options does. 33 00:02:45,540 --> 00:02:48,140 When we call invalidate options menu, 34 00:02:48,340 --> 00:02:52,700 it tells android that the menus changed and needs to be redrawn. 35 00:02:53,100 --> 00:02:56,700 When android redraws it, it'll use the other menu icon. 36 00:02:57,100 --> 00:03:00,100 Android doesn't know which icons we want to use of course, 37 00:03:00,350 --> 00:03:03,450 so we have to tell it. We'll do that in 38 00:03:03,450 --> 00:03:05,450 OnPrepareOptionsMenu. 39 00:03:06,150 --> 00:03:10,150 I'll get android studio to generate a stub for that function below 40 00:03:10,150 --> 00:03:12,150 OnOptionsItemSelected, 41 00:03:12,400 --> 00:03:16,500 then add the code. I'll also remove the nullable type marker 42 00:03:16,500 --> 00:03:18,000 from the menu parameter. 43 00:04:05,200 --> 00:04:06,700 It's not doing anything clever, 44 00:04:07,200 --> 00:04:10,200 just swapping the icon and the text for the menu item. 45 00:04:10,750 --> 00:04:13,250 The OnPrepareOptionsMenu function 46 00:04:13,250 --> 00:04:16,350 is the place to make changes to the appearance of menus, 47 00:04:16,950 --> 00:04:21,450 setting the icon and title in on options item selected doesn't work. 48 00:04:22,050 --> 00:04:26,450 All our code is doing is swapping the menu icon and title. 49 00:04:26,850 --> 00:04:31,150 If we're displaying a weak starter, the icon will show one day, 50 00:04:31,150 --> 00:04:34,810 and the title will change to show what will happen when the menu item's tapped. 51 00:04:35,410 --> 00:04:37,660 If display week returns false, 52 00:04:37,660 --> 00:04:40,660 then tapping the menu will cause a week start to be shown, 53 00:04:41,100 --> 00:04:43,700 and the icon title are changed to reflect that. 54 00:04:44,360 --> 00:04:48,760 If that sounds backwards, the icon shows what will be displayed, 55 00:04:48,760 --> 00:04:51,060 not what's currently being displayed, 56 00:04:51,560 --> 00:04:53,860 that will make more sense when you see it running. 57 00:04:54,660 --> 00:04:57,860 We can't run the app until we've made some changes to the ViewModel. 58 00:04:58,410 --> 00:05:01,770 We need to implement the ToggleDisplayWeek function 59 00:05:01,770 --> 00:05:03,970 and add the display week property. 60 00:05:04,470 --> 00:05:05,970 I'll start with the property. 61 00:05:06,570 --> 00:05:09,930 This is a good opportunity to use a read-only property. 62 00:05:10,480 --> 00:05:13,360 We don't want the calling code to set it directly. 63 00:05:13,360 --> 00:05:16,060 We only want to provide the ability to toggle it. 64 00:05:16,660 --> 00:05:20,260 If it was true, it becomes false and vice versa. 65 00:05:20,760 --> 00:05:25,120 I'll add the property after sort order before our initial code. 66 00:05:57,720 --> 00:06:02,080 Code that uses this view model can access the value of display week 67 00:06:02,580 --> 00:06:03,570 but can't change it. 68 00:06:04,230 --> 00:06:08,530 To do that, it'll have to call the ToggleDisplayWeek function. 69 00:06:09,030 --> 00:06:11,230 I'll add that after the init block. 70 00:06:38,030 --> 00:06:42,630 Okay. We should be able to run the app and see the icon change. 71 00:06:54,130 --> 00:06:57,130 Long tapping on a menu icon will display the title. 72 00:06:57,730 --> 00:06:59,530 That's useful for the users 73 00:06:59,530 --> 00:07:02,830 and also lets us make sure that we are setting things correctly. 74 00:07:02,830 --> 00:07:05,090 When we are displaying a single day, 75 00:07:05,090 --> 00:07:07,450 the icon changes to represent a week 76 00:07:08,150 --> 00:07:11,150 and the text changes to show week. 77 00:07:12,140 --> 00:07:14,740 It reflects what tapping the icon will do. 78 00:07:15,540 --> 00:07:19,740 The report doesn't update yet, we're just getting the menu working first. 79 00:07:20,040 --> 00:07:24,240 Now that the menu is working, we need to provide some way for the user 80 00:07:24,240 --> 00:07:26,140 to select the date to display. 81 00:07:26,800 --> 00:07:29,350 We can't write the code to filter the report data 82 00:07:29,350 --> 00:07:31,850 until we've got some way to provide new dates. 83 00:07:32,350 --> 00:07:36,550 In the next video, we'll see how to use a DatePickerDialogue to do that. 84 00:07:36,910 --> 00:07:37,910 I'll see you there.