1
00:00:00,480 --> 00:00:01,250
Welcome back.

2
00:00:01,470 --> 00:00:07,350
And this video, we are going to add this little icon here at the top and also this forum here in which

3
00:00:07,350 --> 00:00:13,650
we then can enter an email address of a member that we want to add to our list.

4
00:00:13,950 --> 00:00:16,059
And, yeah, that's pretty much it.

5
00:00:16,090 --> 00:00:17,280
So let's get started with that.

6
00:00:17,790 --> 00:00:22,470
Of course, the code that then triggers the whole event, that's what we're going to do in the next

7
00:00:22,470 --> 00:00:22,820
video.

8
00:00:23,040 --> 00:00:25,290
But let's start with what you have seen there.

9
00:00:25,570 --> 00:00:28,640
So the first thing that I'm going to create is a new menu.

10
00:00:28,650 --> 00:00:32,759
So let me go over to my resources menu.

11
00:00:32,759 --> 00:00:39,870
And here let's create a new menu resource file, which I'm going to call menu at member.

12
00:00:41,540 --> 00:00:48,970
And here I want to add an item as usual, and that item will have an I.D..

13
00:00:52,840 --> 00:00:57,280
Which will be action at member.

14
00:00:58,310 --> 00:01:07,460
Then we need to use an icon and here I'm going to use a plus icon, so I see me look, if I can find

15
00:01:07,460 --> 00:01:08,780
that, I think I don't have one.

16
00:01:10,700 --> 00:01:12,770
I think it makes sense to just create one.

17
00:01:12,980 --> 00:01:15,860
I see this plus I can.

18
00:01:19,360 --> 00:01:25,780
I see Victor add twenty four DP, so I'm going to call it.

19
00:01:27,420 --> 00:01:36,240
All right, I see Victor at 20, 40 deep, then the order and category as we only have one, we're going

20
00:01:36,240 --> 00:01:39,020
to use one hundred and title should be.

21
00:01:39,330 --> 00:01:43,350
And here I think it makes sense to use.

22
00:01:45,260 --> 00:01:51,290
Yeah, using new strength and by the way, we're going to use some more strings and also some more dimensions

23
00:01:51,290 --> 00:01:55,880
so you can just download the updated String and dimensions file.

24
00:01:57,300 --> 00:02:02,190
Here we are using at number then to cancel ad and search member texts.

25
00:02:02,680 --> 00:02:09,240
OK, so all of those strings need to be added as well as if we go to our dimensions, we will need some

26
00:02:09,240 --> 00:02:13,460
more dimensions here because we're using dialogs and everything.

27
00:02:13,470 --> 00:02:20,400
So just download the latest version of this file and then you don't have to type all of that here.

28
00:02:20,900 --> 00:02:22,440
OK, so it's just the dimensions.

29
00:02:22,440 --> 00:02:25,290
We don't want to go through that in too much depth.

30
00:02:25,890 --> 00:02:30,330
OK, then we can finish off the member.

31
00:02:30,600 --> 00:02:32,980
So here we can now go ahead and use it.

32
00:02:33,690 --> 00:02:34,470
So here.

33
00:02:36,020 --> 00:02:39,110
And remember the string here?

34
00:02:40,060 --> 00:02:40,720
And then.

35
00:02:42,440 --> 00:02:48,710
I'm going to say show as action always, so this one should always be visible as an action that can

36
00:02:48,710 --> 00:02:49,460
directly trigger.

37
00:02:50,420 --> 00:02:52,960
OK, so let's add up here as well.

38
00:02:53,300 --> 00:02:56,210
Let's add the namespace create namespace entry.

39
00:02:56,930 --> 00:02:57,340
All right.

40
00:02:57,350 --> 00:02:59,600
So that is it for this menu.

41
00:03:00,910 --> 00:03:02,530
And next, we're going to add this.

42
00:03:03,450 --> 00:03:09,990
Dialogue here, so you can try to build yourself or you can just copy one from the code that we used

43
00:03:09,990 --> 00:03:12,010
in one of the earlier projects.

44
00:03:12,060 --> 00:03:16,020
OK, so now I'm just going to add that file into our project.

45
00:03:16,030 --> 00:03:17,060
You can also download it.

46
00:03:17,820 --> 00:03:20,650
So either you try to build it yourself or you download it.

47
00:03:20,670 --> 00:03:27,580
I think trying it yourself would be a great exercise so that you can just try to add this functionality.

48
00:03:27,780 --> 00:03:28,230
All right.

49
00:03:28,230 --> 00:03:32,190
So let's go and look at this file.

50
00:03:33,630 --> 00:03:35,010
Which I'm going to call.

51
00:03:37,060 --> 00:03:42,670
Dialogue search member, or which is called like that, so let's look at it so we have a frame layout

52
00:03:43,120 --> 00:03:46,590
and then we have a cart view inside of that frame layout.

53
00:03:47,110 --> 00:03:55,270
So it's this cart, you hear, and then we have a text, you an email and two more text use.

54
00:03:55,790 --> 00:03:56,840
It's not buttons, right?

55
00:03:56,870 --> 00:04:01,190
So we have this linear layout in which we then have a text you on.

56
00:04:01,190 --> 00:04:05,860
Then if we have a separator again or a divider, which is this view here.

57
00:04:06,750 --> 00:04:17,130
Then we have an input layout within that, we have an edited text, which is this email here that we

58
00:04:17,130 --> 00:04:17,800
can enter.

59
00:04:18,269 --> 00:04:24,210
Of course you could rename it to add member because we're not really searching.

60
00:04:24,210 --> 00:04:24,510
Right.

61
00:04:24,520 --> 00:04:28,620
So we have this text to you which says search member.

62
00:04:28,980 --> 00:04:31,560
So I'm just going to rename that ED member.

63
00:04:32,700 --> 00:04:34,620
All right, text at member.

64
00:04:37,290 --> 00:04:45,060
Then we have a linear layout which positions the two buttons next to each other, which are not really

65
00:04:45,060 --> 00:04:46,860
buttons, but it's text use.

66
00:04:46,890 --> 00:04:49,710
OK, so we're using those two text use as buttons.

67
00:04:50,160 --> 00:04:53,460
So we have a weight of one so that they have the same with.

68
00:04:53,470 --> 00:04:59,520
That's the idea here, even though we set the with a zero density pixels, but by applying weight to

69
00:04:59,520 --> 00:05:02,720
it, they will be equally wide.

70
00:05:03,320 --> 00:05:03,650
All right.

71
00:05:03,650 --> 00:05:04,650
Then we have some padding.

72
00:05:04,680 --> 00:05:10,820
We have a text that we assign to them the specific text size color, which is our color accent, and

73
00:05:10,820 --> 00:05:14,400
then we have the secondary text color for the other buttons.

74
00:05:14,400 --> 00:05:19,380
So we have to add and cancel button having slightly different text colors here.

75
00:05:20,910 --> 00:05:26,100
OK, but up to this point, this was nothing new, so I'd say let's implement those.

76
00:05:27,620 --> 00:05:33,650
Elements that were just prepared, so first of all, let's implement the menu in our members activity.

77
00:05:34,040 --> 00:05:37,660
So here, as it seems, we don't have a function that it takes care of that.

78
00:05:38,000 --> 00:05:43,000
So whenever you use a menu, you need to add two functions.

79
00:05:43,370 --> 00:05:45,530
So it's the uncreate options menu.

80
00:05:46,250 --> 00:05:49,070
Uncreate options menu.

81
00:05:50,010 --> 00:05:53,910
And then you need them on options, items selected.

82
00:05:53,940 --> 00:05:58,770
So if you want anything to happen, if one of those items is clipped and usually you should want that

83
00:05:59,310 --> 00:06:02,070
like so on options item selected.

84
00:06:02,920 --> 00:06:10,060
So first of all, in the uncreate options menu here, we want to inflate the menu, OK, so we used

85
00:06:10,060 --> 00:06:18,040
the menu inflator and then we inflate our our menu, that menu at member, and then we need to pass

86
00:06:18,060 --> 00:06:24,370
the menu from the on options, create or create options menu function.

87
00:06:25,630 --> 00:06:28,990
Now here the menu inflator should be with a capital I.

88
00:06:29,870 --> 00:06:38,060
And then we can go ahead and at the UNCLICK event, so let's just do that in here so we can just say

89
00:06:39,080 --> 00:06:46,880
one item, that item I.D. is equal to our dot eyed dot.

90
00:06:47,060 --> 00:06:50,300
And here we called this one action at member.

91
00:06:52,150 --> 00:06:57,670
If that one is clicked, then I want to display the dialogue.

92
00:06:58,250 --> 00:07:01,970
OK, so if you want to display the dialogue, you, of course, need to prepare the dialogue.

93
00:07:01,990 --> 00:07:07,690
So I'd say, let's just do that real quick so we will need to create a new function for this.

94
00:07:08,790 --> 00:07:10,440
And I'm going to call this one.

95
00:07:11,800 --> 00:07:13,480
Private fund.

96
00:07:14,680 --> 00:07:17,110
Dialogue search member.

97
00:07:19,150 --> 00:07:29,770
Which them, first of all, creates a dialogue, so we have the dialogue object by dialogue with the

98
00:07:29,770 --> 00:07:31,150
context that we need to pass it.

99
00:07:32,490 --> 00:07:38,550
So it's always the same approach, right, then we can give it a constant view so that it has a specific

100
00:07:38,670 --> 00:07:39,480
appearance.

101
00:07:39,480 --> 00:07:42,420
So dialogue sets content view here.

102
00:07:42,420 --> 00:07:49,680
We say that it should be our art or lay out dialogue search member, which is this XML file that we

103
00:07:49,680 --> 00:07:50,230
created.

104
00:07:50,550 --> 00:07:52,420
So we say, OK, this is how you should look.

105
00:07:53,280 --> 00:07:58,480
Then we add an on click listener for the two buttons.

106
00:07:58,500 --> 00:08:00,810
So one of them is TV ad.

107
00:08:02,140 --> 00:08:04,600
Said on Lisner.

108
00:08:09,240 --> 00:08:12,270
And the other one is dialogue.

109
00:08:15,890 --> 00:08:19,310
But TV cancel and that's the easy one.

110
00:08:20,090 --> 00:08:25,300
So another set and click listener, and here we just dismiss the dialogue.

111
00:08:26,620 --> 00:08:32,500
OK, and of course, we also need to make sure that the dialogue is shown at one point of dialogue that

112
00:08:32,590 --> 00:08:32,990
show.

113
00:08:33,580 --> 00:08:41,169
OK, so now once we click on the button, we want to call this dialogue search member.

114
00:08:42,220 --> 00:08:44,560
OK, so we want to call dysfunction here.

115
00:08:45,040 --> 00:08:50,530
And when we click on the plus button, but then, of course, what do we want to do when we click on

116
00:08:50,530 --> 00:08:51,350
the add button?

117
00:08:51,850 --> 00:09:01,150
Well, here we want to first of all, check if the email or get the email user entered email is going

118
00:09:01,150 --> 00:09:11,080
to be dialogue that etty email search member to text to straight.

119
00:09:12,800 --> 00:09:15,420
Or actually, it's not to text, but it's just a text.

120
00:09:15,920 --> 00:09:18,200
OK, so text to string.

121
00:09:20,430 --> 00:09:26,180
And now we can check is it empty because if the user didn't enter anything, we don't want to do anything.

122
00:09:26,610 --> 00:09:31,320
So email is not empty if it's not empty.

123
00:09:33,820 --> 00:09:34,210
Then.

124
00:09:35,850 --> 00:09:38,730
For now, we will just dismiss the dialogue.

125
00:09:38,970 --> 00:09:42,090
Of course, we will need to implement the logic here.

126
00:09:42,810 --> 00:09:49,560
OK, so here to do implement adding member logic.

127
00:09:50,680 --> 00:09:58,210
And then if it's empty, then we just want to let the user know that he should enter an email address

128
00:09:58,210 --> 00:09:58,510
here.

129
00:09:59,430 --> 00:10:05,370
OK, so I'm just going to do it with the toes here, saying, make text, please enter your email address.

130
00:10:07,160 --> 00:10:14,480
Now, there is one less thing to do, and that is to return true in this case, because then all is

131
00:10:14,480 --> 00:10:18,710
good and we can return true because it expects a billion, which is going to say, all right, all is

132
00:10:18,710 --> 00:10:19,040
fine.

133
00:10:19,520 --> 00:10:23,960
We're done with doing the action when you display this menu.

134
00:10:24,490 --> 00:10:28,520
OK, I think at this point we should be able to test it on our application.

135
00:10:28,520 --> 00:10:29,330
So let's do that.

136
00:10:29,990 --> 00:10:35,020
And we are still missing this dialogue round it.

137
00:10:35,060 --> 00:10:38,540
So the shape here and we can create this drawable resource.

138
00:10:38,600 --> 00:10:41,380
So let's just do that and it will be a shape.

139
00:10:41,810 --> 00:10:43,540
So let's create a new shape here.

140
00:10:46,450 --> 00:10:53,890
OK, so here I want to, first of all, define it as a rectangle.

141
00:10:54,860 --> 00:10:56,120
So if we look at it.

142
00:10:57,070 --> 00:11:02,410
We can see that this here is a rectangle that we're using, so.

143
00:11:04,160 --> 00:11:05,270
That's used to shape.

144
00:11:06,530 --> 00:11:13,040
Rectangle, then I have a solid background, so a solid color, which is just going to be white.

145
00:11:14,300 --> 00:11:17,720
And here, of course, I have to add the hashtag.

146
00:11:19,300 --> 00:11:27,520
And then I have corners here which are around it, so I just give it a radius of 10 density pixels.

147
00:11:29,030 --> 00:11:30,360
All right, and that's it.

148
00:11:30,380 --> 00:11:31,360
So this is our sheep.

149
00:11:31,400 --> 00:11:34,910
I look around XML now let's go ahead and test it.

150
00:11:37,020 --> 00:11:42,930
All right, so that we are approaching Menasche now, let's go over to our board with image.

151
00:11:44,690 --> 00:11:46,670
Here, let's go to members.

152
00:11:48,520 --> 00:11:55,940
Now, let's click the button, you can see the screen opens its console directly is closed.

153
00:11:56,320 --> 00:11:59,590
Click this, you can see please enter members email address.

154
00:12:00,160 --> 00:12:04,180
So I'm just going to say test at test dot com.

155
00:12:05,470 --> 00:12:12,310
But of course, nothing will happen for now when we click this, because just dismisses that dialogue.

156
00:12:12,730 --> 00:12:18,880
OK, so that is it for now and say let's implement the functionality behind the add button in the next

157
00:12:18,880 --> 00:12:19,300
video.

158
00:12:19,330 --> 00:12:20,140
So see you there.