Welcome back. We'll start our settings dialog by creating the layout for it.
Right click the res/layout folder, and choose New Layout resource file.
I'll call it settings_dialog.
Change the route element to Android X dot constraint layout dot widget constraint layout.
You can save typing by just entering constraint layout, then choosing
the full name from the list.
In the layout designer, select constraint layout in the component tree and set
layout width to match parent. It'll probably already be set to that. The
layout height will need changing, and activity's height is set automatically
to the height of the device. But a dialog sets its height based on the contents
the layout height should be set to wrap content to do that. If you're using a
recent version of Android Studio, it may be better to leave the setting at the
moment, as it makes adding other components simpler. The first widget will
be a TextView, with the ID, firstDayPrompt.
It's width and height should be set to wrap content. For the text property,
choose these settings firstDayPrompt resource. All the settings resources will
be easier to find by typing settings into the search box. That's why I named
them all beginning the settings. For the text color attribute, choose color
Primary from resources. We need to constrain the widget to the left and top
of the layout. The plus buttons in the inspector are an easy way to do that.
The margins should both be set to zero, because I'm going to change the layouts
padding. Okay, next we need a spinner. At the moment, you'll find that in the
containers category, right at the top. Its ID will be firstDaySpinner,
and the width and height should both be set to wrap content. Set it's constraints to the
left and the top, using the plus buttons in the inspector. The top margin should
be 8 dp and the left margin 0. The top should automatically get constrained to
the text view, if you drag the spinner below the TextView. If the top's
constraint doesn't get created to the bottom of the TextView, you know how to
change it. We've got two more attributes to change; the first is the spinner mode.
Here we want to drop down. I wouldn't suggest using dialogue for a spinner,
that's being displayed in a dialogue, but you can experiment with it if you want.
The entries for our spinner will come from the Settings resources. Use the
symbol to choose settingsFirstDays from the array section.
Alright, we need another TextView with an ID of ignoreSecondsTitle.
Again, the width and height should be wrap_content. The text will be our settings
ignoreSecondsTitle.
Use the inspector's plus buttons to set the left and top constraints, and change
the top margin to 24 dp.
Check that the top constraint does get created to the bottom of the spinner.
Android Studio is now pretty good at sorting that out, as long as you drop the
widgets below the one that they should be constrained to. Change the text color
to colorPrimary. That's the heading for our seek bar widget - next we need the
seek bar. You'll find that in the widgets category. I'm going to use a discreet
seek bar. It works the same but it has a different style. Make the ID ignore
Seconds, and set the max to 24. The progress should be set to 1. You'll see
why we're using these values when we write the code. Once again, constrain the
top and the left of the widget. We also want to constrain the right edge to the
right of the layout.
The left and right margins will both be zero. The seek bar should fill the full
width of the layout, so change layout_width to match_constraint.
With version 3.4 and later of Android Studio, the box now shows 0 dp, rather than match
constraint, when you selected it. The XML always contains 0 dp, but it's strange
that Google have decided to reflect that in the designer, when the design is
supposed to shield us from worrying about the XML. But that's how it now
works, and we have to get used to changes like these. That's one reason why we
explain what's going on throughout the course. The Android environment changes
so rapidly, and if you don't understand how things work, it's very hard to cope
with all the changes. Alright, we're nearly done. There's just the two buttons
to add. Drag them next to each other, below the seek bar.
The one on the left will have the ID cancelButton, and its text will be the
cancel string resource, that we've used throughout the other dialogues.
The button on the right will have the ID okButton, and the text will be from
the ok string resource. Constrain the okButton's top to the bottom of the seek
bar, with a margin of 24 dp. It also needs to be constrained to the right edge the
layout with a margin of 8 dp. The cancel Button should have its right edge
constrained to the left edge of the okButton, with a margin of 32 dp.
For its vertical constraint, set a baseline constraint to the okButton.
I like to make sure the cancelButton appears above the okButton in the
component tree. Of course, I'm used to a left-to-right language. It may be more
natural for you to have them the other way around, if you're used to Persian or
Hebrew. Anyway, if I need to, I drag the cancelButton above the okButton in
the component tree. To make the buttons look right in our dialogue, change the
style attribute for the cancelButton to the negative button style, button bar
negative button style. You can use the symbol to go to the resources and search
for button style. You'll find the resource in the theme attributes. The
okButton should be set to the positive button style, button bar
positive style. Again, use the search and look in the Theme attributes. The final
change is to set the padding on the layout. That keeps all our widgets 24 dp
from the edge of the dialog, as Google specify in their material design
guidelines. Select the constraint layout in the component tree and expand the
padding. Use the symbol for the top option padding, to search for dialog.
We want dialogPreferredPadding. That's our layout done. We'll create the
dialog and start writing that code in the next video. See you there.