1
00:00:03,800 --> 00:00:09,570
G'day everyone, welcome back. In the last
few videos we've created a

2
00:00:09,570 --> 00:00:14,160
general-purpose dialogue class, which we
can use whenever we want to give the

3
00:00:14,160 --> 00:00:19,920
users a choice of actions to perform. Our
AppDialog class is intended for

4
00:00:19,920 --> 00:00:25,200
displaying confirmation dialogues of one
sort or another, and provides the user

5
00:00:25,200 --> 00:00:30,340
with one of two options - the positive
button and the negative button.

6
00:00:30,340 --> 00:00:35,640
Although we haven't implemented it in our
AppDialog class, you can also present the

7
00:00:35,640 --> 00:00:40,230
user with a neutral button. Google
suggests that should be used for options

8
00:00:40,230 --> 00:00:46,000
such as "Ask me again later". It wouldn't
be hard to check the contents of the

9
00:00:46,020 --> 00:00:50,489
Bundle, and implement that third button,
when a resource string for its caption

10
00:00:50,489 --> 00:00:56,100
is present in the Bundle. You'd also need
to add another function to the interface,

11
00:00:56,100 --> 00:01:00,719
but you now know everything you need if
you do decide to add a third button to

12
00:01:00,720 --> 00:01:06,060
the class.
AppDialog's very useful, but it's not

13
00:01:06,060 --> 00:01:11,580
suitable for every situation where you
want to display a dialogue. Quite often, a

14
00:01:11,580 --> 00:01:15,630
dialogue's a good way to display
information to the user, without

15
00:01:15,630 --> 00:01:21,300
interrupting the flow of the program by
creating a new activity. As I said

16
00:01:21,300 --> 00:01:26,960
earlier, use dialogues sparingly because
they can disrupt what the users doing.

17
00:01:26,960 --> 00:01:31,740
If the user requests information, though,
then a dialogue can be a good way to

18
00:01:31,740 --> 00:01:38,280
present it to them. One example of this
is an about screen. Let's have a look at

19
00:01:38,280 --> 00:01:43,650
how to create a custom dialogue, to
present information to a user. The

20
00:01:43,650 --> 00:01:50,119
reason for using a custom dialogue is
because you want to use your own layout.

21
00:01:53,660 --> 00:02:04,350
So we'll start by creating a new layout
file, which I'll call about. The default

22
00:02:04,350 --> 00:02:10,590
layout maybe a ConstraintLayout. I want
to use a LinearLayout, which I can do by

23
00:02:10,590 --> 00:02:17,870
changing the root element to Linear
Layout, if I need to, before clicking ok.

24
00:02:19,610 --> 00:02:25,110
I want to show you how to add an icon and
title to a custom dialogue, because there

25
00:02:25,110 --> 00:02:30,300
are a couple of gotchas that you need to
be aware of. Before we can create the

26
00:02:30,300 --> 00:02:34,440
layout of our custom dialogue, we should
decide on what it's going to look like.

27
00:02:34,440 --> 00:02:39,060
A rough sketch on a piece of paper would
do, but as I've got the finished product

28
00:02:39,060 --> 00:02:45,720
I'll show you that instead. If we were
going to create the entire layout, I'd

29
00:02:45,720 --> 00:02:50,370
suggest using a ConstraintLayout. That's
because the top section is a bit more

30
00:02:50,370 --> 00:02:55,230
complex than it appears. If you use the
LinearLayouts for the top part, you'll

31
00:02:55,230 --> 00:03:00,270
have to nest them. In fact, you end up
with three linear layouts, one inside the

32
00:03:00,270 --> 00:03:06,120
other. Remember that a LinearLayout can
either line up widgets side by side, or

33
00:03:06,120 --> 00:03:12,510
one below the other. On the next slide
I've drawn boxes to represent the three

34
00:03:12,510 --> 00:03:16,920
linear layouts that you'll need. We've
got the outer LinearLayout,

35
00:03:16,920 --> 00:03:22,320
then at the top we nest another Linear
Layout inside it, to keep the icon on the

36
00:03:22,320 --> 00:03:28,560
left and the two text views on the right.
That's a horizontal linear layout. The

37
00:03:28,560 --> 00:03:32,910
two text views appear one below the
other, so we'd have to nest another

38
00:03:32,910 --> 00:03:39,770
LinearLayout inside the second one - a
vertical linear layout this time.

39
00:03:39,770 --> 00:03:44,720
When you nest layuots inside each other,
it takes the Android system a lot longer

40
00:03:44,720 --> 00:03:51,050
to size everything correctly. As a result,
the display slows down. Using a

41
00:03:51,050 --> 00:03:55,430
ConstraintLayout, we'd just set
constraints on the widgets keep them in

42
00:03:55,430 --> 00:04:01,220
the correct place, relative to each other.
As I said, I want to show you how to add

43
00:04:01,220 --> 00:04:07,400
an icon to a dialog without using the
layout. Our layout won't include the icon

44
00:04:07,400 --> 00:04:12,620
and the title. That makes it much simpler,
and we can do it easily with a single

45
00:04:12,620 --> 00:04:17,870
LinearLayout. So just to be clear about
what we're doing, we're creating a layout

46
00:04:17,870 --> 00:04:22,910
with just the version number the
horizontal line and everything below

47
00:04:22,910 --> 00:04:28,740
that. The icon and the title will be
provided by the dialogue.

48
00:04:29,160 --> 00:04:38,020
OK, back to Android studio. Make sure the Linear
Layout's set to vertical, then drag a text

49
00:04:38,020 --> 00:04:45,360
view widget onto the design.

50
00:04:45,360 --> 00:04:48,400
Android now provides a
linewidget for the

51
00:04:48,410 --> 00:04:53,810
horizontal line, that separates the icon
from the rest of the content. You'll find

52
00:04:53,810 --> 00:04:58,910
it in the Widgets category. Of course,
these things move around. Look for

53
00:04:58,910 --> 00:05:04,200
horizontal divider if it's not in the
Widgets, when you're watching this video.

54
00:05:04,200 --> 00:05:12,840
Once you've found the horizontal divider
widget, drag it below the text view.

55
00:05:12,840 --> 00:05:19,660
Below the divider, drag four more TextViews,
one below the other.

56
00:05:29,800 --> 00:05:35,700
The only TextView that we're going to be
updating from our code, is the version number.

57
00:05:35,700 --> 00:05:40,620
Strictly speaking, we don't have
to give any of the other TextViews an ID.

58
00:05:40,620 --> 00:05:45,080
If we don't need to find them in
our code, then an ID isn't necessary.

59
00:05:45,080 --> 00:05:50,360
It's a good idea to provide IDs anyway, though.
One reason is that all the widgets are

60
00:05:50,360 --> 00:05:55,400
appearing in the component tree as
textView, and it gets tricky to work out

61
00:05:55,400 --> 00:05:59,090
which one you're dealing with, when
setting the properties. Starting from the

62
00:05:59,090 --> 00:06:09,680
top, the first one will have an ID about_version.

63
00:06:09,680 --> 00:06:17,940
The layout width and the layout height will be
wrap content, for this widget.

64
00:06:17,940 --> 00:06:21,260
We'll be setting the
actual version number from code,

65
00:06:21,260 --> 00:06:26,300
so delete the text contents.

66
00:06:26,300 --> 00:06:29,440
To get an idea of what it
looks like in the layout,

67
00:06:29,440 --> 00:06:40,000
enter 1.0.0 in the tool text property. That's
the one with the spanner or wrench next to it.

68
00:06:40,000 --> 00:06:44,440
The other property that we're
gonna change is the text color. Click on

69
00:06:44,440 --> 00:06:52,440
the symbol to the right-hand side and
select colorPrimary.

70
00:06:52,440 --> 00:07:00,920
This TextView will look better in bold. There's a button to
do that in the textStyle property.

71
00:07:00,920 --> 00:07:10,880
It should appear in the right-hand side of
the screen. Find the layout gravity property.

72
00:07:10,880 --> 00:07:16,480
It's in the all properties, and
tick end,

73
00:07:16,480 --> 00:07:24,400
to correctly handle right-to-left languages such as Persian
Arabic and Hebrew. The only change to the

74
00:07:24,410 --> 00:07:31,240
divider is to set the layout_top margin to 8 dp.

75
00:07:42,010 --> 00:07:46,610
We'll be doing that for all the
remaining textViews too, so they're all

76
00:07:46,610 --> 00:07:49,480
spaced out nicely.

77
00:07:50,720 --> 00:07:59,320
The next one's about_copyright, which
will have the layout width set to match parent,

78
00:07:59,320 --> 00:08:05,380
and the layout height set to wrap
content.

79
00:08:05,380 --> 00:08:09,900
Choose colorPrimary for the text color,

80
00:08:09,900 --> 00:08:16,020
then click the symbol next to
text property.

81
00:08:16,020 --> 00:08:20,220
You're going to use a string resource
for all the remaining TextViews,

82
00:08:20,220 --> 00:08:24,580
so click the Add new resource button,

83
00:08:24,580 --> 00:08:29,800
and choose New string value. Our
TextView IDs are stored in a different

84
00:08:29,800 --> 00:08:33,820
place than the string resources, so
there's no problem at all with making

85
00:08:33,830 --> 00:08:39,159
the resource name the same as the
widgets ID. The resource name will also

86
00:08:39,159 --> 00:08:44,880
be about_copyright.

87
00:08:44,880 --> 00:08:53,760
For the resource value type Copyright, then a space.

88
00:08:53,760 --> 00:08:58,140
Next we want a copyright symbol in
the string, but I'm not aware of a way to

89
00:08:58,160 --> 00:09:03,770
type one in on Linux. On Windows, you can hold down the Alt key and type the

90
00:09:03,770 --> 00:09:08,780
decimal code for the symbol on your
numeric keypad. It doesn't work with the

91
00:09:08,780 --> 00:09:13,610
numbers along the top of the keyboard, so on Windows, you can just hold down alt

92
00:09:13,610 --> 00:09:19,500
and keep it down while typing 0169 on the number pad.

93
00:09:19,500 --> 00:09:27,140
That leading zero's important. On a Mac, you can simply type alt G.

94
00:09:27,140 --> 00:09:34,400
If you're not using Windows or Mac, you can enter
the Unicode character sequence instead. This works on

95
00:09:34,400 --> 00:09:41,990
Windows and Linux, and the sequence we
want is \00a9.

96
00:09:41,990 --> 00:09:49,040
a9 in hexadecimal is 169 in decimal,
and this is the usual way to specify

97
00:09:49,040 --> 00:10:03,800
Unicode characters. Okay, the rest of the
string is 2019 learnprogramming.academy.

98
00:10:03,820 --> 00:10:11,380
What you might see is \u00a9
instead of the copyright symbol.

99
00:10:11,380 --> 00:10:15,960
The reason is that Android Studio's assumed
we want to display a backslash,

100
00:10:16,000 --> 00:10:21,320
and it's escaped the slash with another one. It
should recognize that we're entering

101
00:10:21,320 --> 00:10:26,120
Unicode character code, but at the moment, it doesn't.

102
00:10:26,120 --> 00:10:28,040
If that happens, the cure is

103
00:10:28,040 --> 00:10:37,840
to edit the res/values/strings.xml file,

104
00:10:37,840 --> 00:10:39,260
and remove the extra

105
00:10:39,260 --> 00:10:45,530
slash before the code. Then, when we go
back to the layout, we should see the

106
00:10:45,530 --> 00:10:48,940
copyright symbols showing.

107
00:10:48,940 --> 00:10:51,620
Right, let's end this video here,

108
00:10:51,620 --> 00:10:54,940
and I'll see you in the next one.