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.