1 00:00:03,860 --> 00:00:09,580 Welcome back. We'll start our settings dialog by creating the layout for it. 2 00:00:09,580 --> 00:00:20,860 Right click the res/layout folder, and choose New Layout resource file. 3 00:00:20,860 --> 00:00:25,680 I'll call it settings_dialog. 4 00:00:26,880 --> 00:00:34,740 Change the route element to Android X dot constraint layout dot widget constraint layout. 5 00:00:34,740 --> 00:00:41,710 You can save typing by just entering constraint layout, then choosing 6 00:00:41,710 --> 00:00:45,210 the full name from the list. 7 00:00:45,610 --> 00:00:52,789 In the layout designer, select constraint layout in the component tree and set 8 00:00:52,789 --> 00:00:58,160 layout width to match parent. It'll probably already be set to that. The 9 00:00:58,160 --> 00:01:03,290 layout height will need changing, and activity's height is set automatically 10 00:01:03,290 --> 00:01:09,140 to the height of the device. But a dialog sets its height based on the contents 11 00:01:09,140 --> 00:01:13,729 the layout height should be set to wrap content to do that. If you're using a 12 00:01:13,729 --> 00:01:17,780 recent version of Android Studio, it may be better to leave the setting at the 13 00:01:17,780 --> 00:01:22,190 moment, as it makes adding other components simpler. The first widget will 14 00:01:22,190 --> 00:01:27,820 be a TextView, with the ID, firstDayPrompt. 15 00:01:39,140 --> 00:01:45,240 It's width and height should be set to wrap content. For the text property, 16 00:01:45,240 --> 00:01:57,600 choose these settings firstDayPrompt resource. All the settings resources will 17 00:01:57,600 --> 00:02:02,670 be easier to find by typing settings into the search box. That's why I named 18 00:02:02,670 --> 00:02:11,940 them all beginning the settings. For the text color attribute, choose color 19 00:02:11,940 --> 00:02:21,720 Primary from resources. We need to constrain the widget to the left and top 20 00:02:21,720 --> 00:02:31,160 of the layout. The plus buttons in the inspector are an easy way to do that. 21 00:02:36,860 --> 00:02:41,540 The margins should both be set to zero, because I'm going to change the layouts 22 00:02:41,540 --> 00:02:47,450 padding. Okay, next we need a spinner. At the moment, you'll find that in the 23 00:02:47,450 --> 00:03:06,800 containers category, right at the top. Its ID will be firstDaySpinner, 24 00:03:06,800 --> 00:03:14,840 and the width and height should both be set to wrap content. Set it's constraints to the 25 00:03:14,840 --> 00:03:28,610 left and the top, using the plus buttons in the inspector. The top margin should 26 00:03:28,610 --> 00:03:34,790 be 8 dp and the left margin 0. The top should automatically get constrained to 27 00:03:34,790 --> 00:03:39,140 the text view, if you drag the spinner below the TextView. If the top's 28 00:03:39,140 --> 00:03:42,950 constraint doesn't get created to the bottom of the TextView, you know how to 29 00:03:42,950 --> 00:03:50,170 change it. We've got two more attributes to change; the first is the spinner mode. 30 00:03:50,170 --> 00:03:56,959 Here we want to drop down. I wouldn't suggest using dialogue for a spinner, 31 00:03:56,960 --> 00:04:02,020 that's being displayed in a dialogue, but you can experiment with it if you want. 32 00:04:02,020 --> 00:04:06,530 The entries for our spinner will come from the Settings resources. Use the 33 00:04:06,530 --> 00:04:14,050 symbol to choose settingsFirstDays from the array section. 34 00:04:15,420 --> 00:04:32,720 Alright, we need another TextView with an ID of ignoreSecondsTitle. 35 00:04:32,720 --> 00:04:38,340 Again, the width and height should be wrap_content. The text will be our settings 36 00:04:38,340 --> 00:04:41,720 ignoreSecondsTitle. 37 00:04:53,280 --> 00:04:57,960 Use the inspector's plus buttons to set the left and top constraints, and change 38 00:04:57,960 --> 00:05:01,820 the top margin to 24 dp. 39 00:05:08,340 --> 00:05:12,380 Check that the top constraint does get created to the bottom of the spinner. 40 00:05:12,380 --> 00:05:16,160 Android Studio is now pretty good at sorting that out, as long as you drop the 41 00:05:16,170 --> 00:05:20,010 widgets below the one that they should be constrained to. Change the text color 42 00:05:20,010 --> 00:05:32,639 to colorPrimary. That's the heading for our seek bar widget - next we need the 43 00:05:32,639 --> 00:05:42,960 seek bar. You'll find that in the widgets category. I'm going to use a discreet 44 00:05:42,960 --> 00:05:50,580 seek bar. It works the same but it has a different style. Make the ID ignore 45 00:05:50,580 --> 00:06:10,080 Seconds, and set the max to 24. The progress should be set to 1. You'll see 46 00:06:10,080 --> 00:06:14,729 why we're using these values when we write the code. Once again, constrain the 47 00:06:14,729 --> 00:06:19,470 top and the left of the widget. We also want to constrain the right edge to the 48 00:06:19,470 --> 00:06:22,490 right of the layout. 49 00:06:25,949 --> 00:06:35,729 The left and right margins will both be zero. The seek bar should fill the full 50 00:06:35,729 --> 00:06:42,940 width of the layout, so change layout_width to match_constraint. 51 00:06:42,940 --> 00:06:50,279 With version 3.4 and later of Android Studio, the box now shows 0 dp, rather than match 52 00:06:50,279 --> 00:06:56,189 constraint, when you selected it. The XML always contains 0 dp, but it's strange 53 00:06:56,189 --> 00:07:00,419 that Google have decided to reflect that in the designer, when the design is 54 00:07:00,419 --> 00:07:04,379 supposed to shield us from worrying about the XML. But that's how it now 55 00:07:04,379 --> 00:07:09,419 works, and we have to get used to changes like these. That's one reason why we 56 00:07:09,419 --> 00:07:13,770 explain what's going on throughout the course. The Android environment changes 57 00:07:13,770 --> 00:07:18,270 so rapidly, and if you don't understand how things work, it's very hard to cope 58 00:07:18,270 --> 00:07:22,589 with all the changes. Alright, we're nearly done. There's just the two buttons 59 00:07:22,589 --> 00:07:28,160 to add. Drag them next to each other, below the seek bar. 60 00:07:36,200 --> 00:07:45,840 The one on the left will have the ID cancelButton, and its text will be the 61 00:07:45,840 --> 00:07:51,289 cancel string resource, that we've used throughout the other dialogues. 62 00:08:00,700 --> 00:08:12,100 The button on the right will have the ID okButton, and the text will be from 63 00:08:12,100 --> 00:08:23,920 the ok string resource. Constrain the okButton's top to the bottom of the seek 64 00:08:23,920 --> 00:08:32,289 bar, with a margin of 24 dp. It also needs to be constrained to the right edge the 65 00:08:32,289 --> 00:08:40,299 layout with a margin of 8 dp. The cancel Button should have its right edge 66 00:08:40,299 --> 00:08:47,610 constrained to the left edge of the okButton, with a margin of 32 dp. 67 00:08:54,790 --> 00:09:02,070 For its vertical constraint, set a baseline constraint to the okButton. 68 00:09:13,900 --> 00:09:18,880 I like to make sure the cancelButton appears above the okButton in the 69 00:09:18,880 --> 00:09:23,560 component tree. Of course, I'm used to a left-to-right language. It may be more 70 00:09:23,560 --> 00:09:27,220 natural for you to have them the other way around, if you're used to Persian or 71 00:09:27,220 --> 00:09:32,860 Hebrew. Anyway, if I need to, I drag the cancelButton above the okButton in 72 00:09:32,860 --> 00:09:37,210 the component tree. To make the buttons look right in our dialogue, change the 73 00:09:37,210 --> 00:09:42,339 style attribute for the cancelButton to the negative button style, button bar 74 00:09:42,339 --> 00:09:47,500 negative button style. You can use the symbol to go to the resources and search 75 00:09:47,500 --> 00:09:58,839 for button style. You'll find the resource in the theme attributes. The 76 00:09:58,839 --> 00:10:02,680 okButton should be set to the positive button style, button bar 77 00:10:02,680 --> 00:10:11,860 positive style. Again, use the search and look in the Theme attributes. The final 78 00:10:11,860 --> 00:10:16,750 change is to set the padding on the layout. That keeps all our widgets 24 dp 79 00:10:16,750 --> 00:10:20,800 from the edge of the dialog, as Google specify in their material design 80 00:10:20,800 --> 00:10:27,730 guidelines. Select the constraint layout in the component tree and expand the 81 00:10:27,730 --> 00:10:39,850 padding. Use the symbol for the top option padding, to search for dialog. 82 00:10:39,850 --> 00:10:46,390 We want dialogPreferredPadding. That's our layout done. We'll create the 83 00:10:46,390 --> 00:10:52,740 dialog and start writing that code in the next video. See you there.