G'day everyone, welcome back. In the last few videos we've created a
general-purpose dialogue class, which we can use whenever we want to give the
users a choice of actions to perform. Our AppDialog class is intended for
displaying confirmation dialogues of one sort or another, and provides the user
with one of two options - the positive button and the negative button.
Although we haven't implemented it in our AppDialog class, you can also present the
user with a neutral button. Google suggests that should be used for options
such as "Ask me again later". It wouldn't be hard to check the contents of the
Bundle, and implement that third button, when a resource string for its caption
is present in the Bundle. You'd also need to add another function to the interface,
but you now know everything you need if you do decide to add a third button to
the class. AppDialog's very useful, but it's not
suitable for every situation where you want to display a dialogue. Quite often, a
dialogue's a good way to display information to the user, without
interrupting the flow of the program by creating a new activity. As I said
earlier, use dialogues sparingly because they can disrupt what the users doing.
If the user requests information, though, then a dialogue can be a good way to
present it to them. One example of this is an about screen. Let's have a look at
how to create a custom dialogue, to present information to a user. The
reason for using a custom dialogue is because you want to use your own layout.
So we'll start by creating a new layout file, which I'll call about. The default
layout maybe a ConstraintLayout. I want to use a LinearLayout, which I can do by
changing the root element to Linear Layout, if I need to, before clicking ok.
I want to show you how to add an icon and title to a custom dialogue, because there
are a couple of gotchas that you need to be aware of. Before we can create the
layout of our custom dialogue, we should decide on what it's going to look like.
A rough sketch on a piece of paper would do, but as I've got the finished product
I'll show you that instead. If we were going to create the entire layout, I'd
suggest using a ConstraintLayout. That's because the top section is a bit more
complex than it appears. If you use the LinearLayouts for the top part, you'll
have to nest them. In fact, you end up with three linear layouts, one inside the
other. Remember that a LinearLayout can either line up widgets side by side, or
one below the other. On the next slide I've drawn boxes to represent the three
linear layouts that you'll need. We've got the outer LinearLayout,
then at the top we nest another Linear Layout inside it, to keep the icon on the
left and the two text views on the right. That's a horizontal linear layout. The
two text views appear one below the other, so we'd have to nest another
LinearLayout inside the second one - a vertical linear layout this time.
When you nest layuots inside each other, it takes the Android system a lot longer
to size everything correctly. As a result, the display slows down. Using a
ConstraintLayout, we'd just set constraints on the widgets keep them in
the correct place, relative to each other. As I said, I want to show you how to add
an icon to a dialog without using the layout. Our layout won't include the icon
and the title. That makes it much simpler, and we can do it easily with a single
LinearLayout. So just to be clear about what we're doing, we're creating a layout
with just the version number the horizontal line and everything below
that. The icon and the title will be provided by the dialogue.
OK, back to Android studio. Make sure the Linear Layout's set to vertical, then drag a text
view widget onto the design.
Android now provides a linewidget for the
horizontal line, that separates the icon from the rest of the content. You'll find
it in the Widgets category. Of course, these things move around. Look for
horizontal divider if it's not in the Widgets, when you're watching this video.
Once you've found the horizontal divider widget, drag it below the text view.
Below the divider, drag four more TextViews, one below the other.
The only TextView that we're going to be updating from our code, is the version number.
Strictly speaking, we don't have to give any of the other TextViews an ID.
If we don't need to find them in our code, then an ID isn't necessary.
It's a good idea to provide IDs anyway, though. One reason is that all the widgets are
appearing in the component tree as textView, and it gets tricky to work out
which one you're dealing with, when setting the properties. Starting from the
top, the first one will have an ID about_version.
The layout width and the layout height will be wrap content, for this widget.
We'll be setting the actual version number from code,
so delete the text contents.
To get an idea of what it looks like in the layout,
enter 1.0.0 in the tool text property. That's the one with the spanner or wrench next to it.
The other property that we're gonna change is the text color. Click on
the symbol to the right-hand side and select colorPrimary.
This TextView will look better in bold. There's a button to do that in the textStyle property.
It should appear in the right-hand side of the screen. Find the layout gravity property.
It's in the all properties, and tick end,
to correctly handle right-to-left languages such as Persian Arabic and Hebrew. The only change to the
divider is to set the layout_top margin to 8 dp.
We'll be doing that for all the remaining textViews too, so they're all
spaced out nicely.
The next one's about_copyright, which will have the layout width set to match parent,
and the layout height set to wrap content.
Choose colorPrimary for the text color,
then click the symbol next to text property.
You're going to use a string resource for all the remaining TextViews,
so click the Add new resource button,
and choose New string value. Our TextView IDs are stored in a different
place than the string resources, so there's no problem at all with making
the resource name the same as the widgets ID. The resource name will also
be about_copyright.
For the resource value type Copyright, then a space.
Next we want a copyright symbol in the string, but I'm not aware of a way to
type one in on Linux. On Windows, you can hold down the Alt key and type the
decimal code for the symbol on your numeric keypad. It doesn't work with the
numbers along the top of the keyboard, so on Windows, you can just hold down alt
and keep it down while typing 0169 on the number pad.
That leading zero's important. On a Mac, you can simply type alt G.
If you're not using Windows or Mac, you can enter the Unicode character sequence instead. This works on
Windows and Linux, and the sequence we want is \00a9.
a9 in hexadecimal is 169 in decimal, and this is the usual way to specify
Unicode characters. Okay, the rest of the string is 2019 learnprogramming.academy.
What you might see is \u00a9 instead of the copyright symbol.
The reason is that Android Studio's assumed we want to display a backslash,
and it's escaped the slash with another one. It should recognize that we're entering
Unicode character code, but at the moment, it doesn't.
If that happens, the cure is
to edit the res/values/strings.xml file,
and remove the extra
slash before the code. Then, when we go back to the layout, we should see the
copyright symbols showing.
Right, let's end this video here,
and I'll see you in the next one.