1
00:00:00,570 --> 00:00:01,380
Welcome back.

2
00:00:01,410 --> 00:00:08,070
We're almost there, we're almost at the point where we can finally sign up and sign in and do stuff

3
00:00:08,070 --> 00:00:08,950
with Firebase, right.

4
00:00:08,970 --> 00:00:11,760
So this is really what this whole application is about.

5
00:00:11,760 --> 00:00:11,980
Right.

6
00:00:12,210 --> 00:00:15,270
So I thought about different approaches when starting this up.

7
00:00:15,280 --> 00:00:22,790
I thought about giving you, like, the whole structure before we even go into the firebase stuff directly.

8
00:00:22,830 --> 00:00:27,720
So the whole project prepared so we can just start with the firebase stuff.

9
00:00:28,050 --> 00:00:32,780
But I still think it's good to look at these minor additional features, which we have not used yet.

10
00:00:32,790 --> 00:00:39,990
For example, changing the typeface, meaning changing the font and then using this handler and so forth.

11
00:00:40,000 --> 00:00:45,170
So there are still some things that we have to cover when it comes to new features.

12
00:00:45,180 --> 00:00:49,320
And as you can see, step by step, you're learning more and more about all of the different things

13
00:00:49,320 --> 00:00:51,900
of Android and how to get things done.

14
00:00:52,260 --> 00:00:57,150
So what we're going to do in this video is we're going to prepare to sign up screens so you can see

15
00:00:57,150 --> 00:00:58,050
this screen here.

16
00:00:58,350 --> 00:00:59,370
It's also very clean.

17
00:00:59,380 --> 00:01:03,030
We just have this back button here, which brings us back to this activity.

18
00:01:03,330 --> 00:01:06,750
And then we have the name email, password and sign up button.

19
00:01:06,960 --> 00:01:09,500
And of course, you can try to set this up yourself.

20
00:01:09,990 --> 00:01:16,530
It's going to be a little bit of effort, but in the end, it's going to be a great start for this application

21
00:01:16,530 --> 00:01:23,760
because the Sinon will be very similar and it will just not have the additional line here.

22
00:01:23,880 --> 00:01:25,380
One less added text.

23
00:01:25,920 --> 00:01:27,420
OK, so let's get started.

24
00:01:28,430 --> 00:01:28,760
All right.

25
00:01:28,770 --> 00:01:32,100
First of all, we need to have a new activity.

26
00:01:32,400 --> 00:01:35,690
So here, new empty activity.

27
00:01:36,360 --> 00:01:39,000
Actually, there is something called new.

28
00:01:40,550 --> 00:01:41,690
Logging activity.

29
00:01:42,630 --> 00:01:47,790
Which is also something that you could potentially lose, but I think building it from scratch is going

30
00:01:47,790 --> 00:01:49,370
to be the way for us.

31
00:01:49,380 --> 00:01:53,130
So sign up activity.

32
00:01:54,000 --> 00:01:55,230
It's going to be the name.

33
00:01:58,770 --> 00:02:03,420
And then when we have the activity, it's always good practice to directly go to the manifest and make

34
00:02:03,420 --> 00:02:04,000
changes.

35
00:02:04,320 --> 00:02:09,180
So, for example, in our case, just the theme and the orientation.

36
00:02:09,180 --> 00:02:13,800
So let's add that to this new sign up activity as well here.

37
00:02:13,800 --> 00:02:17,920
So you can see now it also has to screen orientation and theme here.

38
00:02:18,660 --> 00:02:19,160
All right.

39
00:02:19,560 --> 00:02:22,290
So once that is done, we can go to the next step.

40
00:02:22,290 --> 00:02:27,290
And the thing is, I'm going to use the material design of Google.

41
00:02:27,510 --> 00:02:31,280
So if you want to use that, you always need to add that to your gradle.

42
00:02:31,590 --> 00:02:37,780
So let's go to the great script and go to build that cradle and hear on their dependencies.

43
00:02:37,800 --> 00:02:39,630
Let's add a new implementation.

44
00:02:40,170 --> 00:02:43,830
So here implementation is going to be.

45
00:02:45,000 --> 00:02:52,650
Come that Google, that Android, that material Kolon material, Colen 1.0 1.0.

46
00:02:53,370 --> 00:02:53,970
All right.

47
00:02:54,000 --> 00:02:55,170
So this is the implementation.

48
00:02:55,170 --> 00:02:57,030
Once you have done that, you need to sink it.

49
00:02:57,030 --> 00:03:04,620
So pressing now so that this gradle Project Sync is in progress and we can use the whole classes which

50
00:03:04,620 --> 00:03:10,680
are inside of this dependency or this library that we're implementing here.

51
00:03:11,880 --> 00:03:12,290
All right.

52
00:03:12,300 --> 00:03:18,750
At this point, we can go to our activity, sign up XML and look at what we have here.

53
00:03:19,370 --> 00:03:23,150
OK, so we will need some more dimensions and some more strings.

54
00:03:23,160 --> 00:03:26,910
So let's add those real quick before we look into this file.

55
00:03:27,320 --> 00:03:30,800
So here again, resources, values, dimensions.

56
00:03:31,230 --> 00:03:35,820
So here we're going to have a bunch of new dimensions.

57
00:03:39,080 --> 00:03:46,970
And you can, of course, add the details about this, so you could say something like the this is a

58
00:03:47,810 --> 00:03:50,270
sign of activity.

59
00:03:51,900 --> 00:04:00,630
All right, and there we have the sign up screen button margin, top title, text size authentication,

60
00:04:00,630 --> 00:04:03,150
a screen content margin, top and so forth.

61
00:04:06,590 --> 00:04:10,160
If you want to type that in, you can, of course, post a video and type everything in.

62
00:04:11,920 --> 00:04:18,490
And then we also have to look at the strengths, so let's go to the strengths X amount and here I'm

63
00:04:18,490 --> 00:04:21,250
going to add some more strings.

64
00:04:22,550 --> 00:04:26,120
Which is just going to be generic, one sign up prescription text.

65
00:04:27,810 --> 00:04:29,820
The name, password and email.

66
00:04:32,740 --> 00:04:37,390
All right, now let's look up our sign up activity and check that one out.

67
00:04:37,720 --> 00:04:41,830
So we need to have a background here for this.

68
00:04:43,100 --> 00:04:52,070
So, of course, you could go ahead and use those drawable folders again and put them into the same

69
00:04:52,070 --> 00:04:56,090
folder in your resources, so show an explorer.

70
00:04:58,140 --> 00:05:00,630
And there to resources.

71
00:05:01,790 --> 00:05:05,860
And paste that in here so that it will replace some files here.

72
00:05:07,840 --> 00:05:10,600
And now we should have that icy background as well.

73
00:05:12,830 --> 00:05:17,630
All right, so it's not complaining anymore, as you can see, we have a vertical orientation for our

74
00:05:17,630 --> 00:05:23,240
linear layout and we have a toolbar at the top, which is the sign up toolbar so that we can have a

75
00:05:23,240 --> 00:05:24,060
back button there.

76
00:05:24,470 --> 00:05:28,910
Then as you can see, we have this text here added text three of them.

77
00:05:28,910 --> 00:05:31,850
So to name, email, password and sign up.

78
00:05:32,300 --> 00:05:34,320
And that's how it's going to look in the code.

79
00:05:34,340 --> 00:05:36,950
So here is the text Vue.

80
00:05:38,050 --> 00:05:38,530
Then.

81
00:05:39,450 --> 00:05:42,190
You can see this takes two years, by the way, inside of this toolbar.

82
00:05:42,270 --> 00:05:47,040
OK, so we created Toolbar, which has a height, which is the action bar size height, which comes

83
00:05:47,040 --> 00:05:48,360
from the attribute.

84
00:05:49,110 --> 00:05:52,740
Then we have our linear layout, which is vertical as well.

85
00:05:52,740 --> 00:05:54,510
So stuff is put on top of each other.

86
00:05:54,870 --> 00:06:01,380
And then inside of that we have one TextView, which is this TextView here.

87
00:06:01,720 --> 00:06:03,080
There's one that you can see.

88
00:06:03,570 --> 00:06:10,050
And then we have a card view, which is this beautiful little card which surrounds the three elements

89
00:06:10,050 --> 00:06:13,050
here, or basically they are on top of this cart.

90
00:06:13,050 --> 00:06:16,890
So we have this little card with those three added text and there's one button.

91
00:06:17,370 --> 00:06:18,720
So view.

92
00:06:19,200 --> 00:06:25,980
And inside of this card view, we have the linear layout, which then puts the different text input

93
00:06:26,160 --> 00:06:29,540
layouts which have an added text.

94
00:06:30,030 --> 00:06:31,470
So we're three of those, right?

95
00:06:31,650 --> 00:06:33,710
We've used text input layouts before.

96
00:06:34,140 --> 00:06:41,490
So it's basically always the structure of text input layout and then you have the actual added text

97
00:06:41,490 --> 00:06:44,490
inside of that, and we have that three times.

98
00:06:44,670 --> 00:06:50,850
OK, so one is for the password, one is for the user name and then the other one is for the email.

99
00:06:51,420 --> 00:06:53,280
And finally, we have this little button here.

100
00:06:53,280 --> 00:06:59,130
You can see a lot of details that we can edit here, as you can see in layout margin startup.

101
00:06:59,130 --> 00:07:02,790
And so we have a bunch of settings that we have set up.

102
00:07:04,410 --> 00:07:04,800
All right.

103
00:07:04,830 --> 00:07:06,630
And at that point, to file a stunt.

104
00:07:07,240 --> 00:07:14,010
OK, so now we can go over to this activity and finally do some action.

105
00:07:15,980 --> 00:07:23,600
So what I'm going to set up here is an action bar function because I want to have this little icon here

106
00:07:23,600 --> 00:07:24,410
at the top left.

107
00:07:24,770 --> 00:07:32,060
This I can should bring us back to the activity before or two to sign up for this interactivity, basically.

108
00:07:32,060 --> 00:07:32,330
Right.

109
00:07:32,780 --> 00:07:35,570
So let's go ahead and create a new function here.

110
00:07:35,690 --> 00:07:40,130
Private fund, set up action bar.

111
00:07:41,420 --> 00:07:48,650
And what it's going to do is it's going to call this set support action bar, which is this default

112
00:07:48,650 --> 00:07:49,250
function.

113
00:07:50,820 --> 00:07:54,770
For Android and here you need to say which action bar you want to use.

114
00:07:54,800 --> 00:07:59,910
So I want to use the toolbar sign up activity, OK, and where is it from?

115
00:07:59,930 --> 00:08:02,210
Well, it's inside of our activity sign up.

116
00:08:02,630 --> 00:08:07,230
You can see we have this toolbar that we created which has in text to you inside of it.

117
00:08:07,250 --> 00:08:09,850
So basically, it's this one here.

118
00:08:10,310 --> 00:08:15,320
And I want to set that as our Support Action Bar.

119
00:08:16,900 --> 00:08:22,360
And then we can go ahead and set the bar.

120
00:08:24,910 --> 00:08:36,940
To be the support action bar and check if the action bar exists, so if it's not now, then I want to

121
00:08:36,940 --> 00:08:46,870
go ahead and set some settings for this action by one is to set display home as an able to drill and

122
00:08:46,870 --> 00:09:00,460
then action bar said home as up indicator, also as our outdoor drawable that.

123
00:09:01,340 --> 00:09:07,310
And here it becomes interesting, so it's just as a little icon that I want to use, which is I see

124
00:09:07,820 --> 00:09:13,580
like color back twenty four.

125
00:09:14,660 --> 00:09:16,120
So this one doesn't exist yet.

126
00:09:16,640 --> 00:09:17,690
So let's create it.

127
00:09:18,290 --> 00:09:20,990
OK, so we can go ahead and create a new.

128
00:09:22,160 --> 00:09:31,430
Fekter asset, which I'm going to call just like that, going to select the panic button looking one.

129
00:09:32,020 --> 00:09:33,020
So the back arrow.

130
00:09:34,460 --> 00:09:42,500
So you can decide which one or s or Arabic thing, I'm just going to go with this one Arabic or iOS.

131
00:09:44,740 --> 00:09:50,740
And I'm going to give it this name that I have used, I see Black Color back 24 DPE.

132
00:09:52,860 --> 00:09:54,330
Because if we look at it.

133
00:09:55,960 --> 00:10:02,380
So here, sign up, I can see it's this icon, it's just like the little arrow.

134
00:10:05,260 --> 00:10:06,690
And it's created in there.

135
00:10:06,850 --> 00:10:09,530
All right, so now it exists and the error disappeared.

136
00:10:10,920 --> 00:10:14,120
All right, and of course, we just need to call this function.

137
00:10:14,570 --> 00:10:21,690
I'm just going to call it here, set up action bar now because this code is not really big.

138
00:10:22,790 --> 00:10:28,380
You could of, of course, just created or added to code Indian create methods of this whole code.

139
00:10:28,380 --> 00:10:31,950
But having an extra function is not going to be that much of a hassle.

140
00:10:31,950 --> 00:10:32,220
Right.

141
00:10:32,820 --> 00:10:37,680
OK, so that's all sign up activity and we, of course, need to get there.

142
00:10:37,680 --> 00:10:38,070
Right.

143
00:10:38,100 --> 00:10:39,270
So how do we get here?

144
00:10:39,420 --> 00:10:41,870
Well, we get here from the interactivity.

145
00:10:42,270 --> 00:10:44,830
So let's add the relevant code here.

146
00:10:45,480 --> 00:10:46,860
And how do we do that?

147
00:10:46,890 --> 00:10:48,510
Well, very simple.

148
00:10:49,110 --> 00:10:50,880
We go ahead and add a.

149
00:10:52,400 --> 00:11:00,740
So don't click listener to our pop and sign up, so here, set on Click Listener and what is the code

150
00:11:00,740 --> 00:11:01,820
that we want to run here?

151
00:11:01,850 --> 00:11:10,340
Well, we want to start an activity and we want to start an intent here, which is going to go from

152
00:11:10,340 --> 00:11:12,620
this class to our.

153
00:11:13,810 --> 00:11:23,290
Sign up activity class, but Java and here should be double Koula.

154
00:11:24,620 --> 00:11:26,810
All right, that's important and.

155
00:11:27,740 --> 00:11:29,690
And that should be pretty much it.

156
00:11:29,720 --> 00:11:31,760
So at this point, we should be able to test it.

157
00:11:31,770 --> 00:11:38,630
So when we click on the button, which is our button sign up button, which comes from our sign up activity

158
00:11:38,630 --> 00:11:38,910
here.

159
00:11:39,650 --> 00:11:41,120
And by the way, it's not this one.

160
00:11:41,130 --> 00:11:42,090
So there we are.

161
00:11:42,380 --> 00:11:44,880
So we are using the same name twice.

162
00:11:44,900 --> 00:11:46,130
This is very tricky.

163
00:11:46,700 --> 00:11:50,040
Let's go back to our interactivity.

164
00:11:50,210 --> 00:11:56,150
So here, if I enter button sign up and I was already wondering so you can see we have two which have

165
00:11:56,150 --> 00:11:58,800
the same ID button sign up and button sign up.

166
00:11:59,120 --> 00:12:05,240
So one of them is inside of our sign up XML and the other one is in our interreg simul.

167
00:12:05,900 --> 00:12:08,050
So maybe you want to change the names here.

168
00:12:08,600 --> 00:12:11,060
So let's go to the.

169
00:12:12,750 --> 00:12:17,730
Enteral Ximo actually, so here activity intro.

170
00:12:19,050 --> 00:12:21,240
And let's rename the sign up button.

171
00:12:23,300 --> 00:12:27,140
Because I don't like to have ideas which are non-unique.

172
00:12:28,530 --> 00:12:35,830
So here we have the sign up, button, sign button, sign up intro, so I'm going to call it like I

173
00:12:35,850 --> 00:12:39,260
know we need to make sure that in the interactivity we also make this change.

174
00:12:39,570 --> 00:12:40,900
So sign up intro's.

175
00:12:40,920 --> 00:12:41,760
I don't click listener.

176
00:12:42,630 --> 00:12:46,910
And by the way, while we're at it, why don't we do the same thing for the other button?

177
00:12:48,030 --> 00:12:53,820
So for our button to sign in, let's call this one sign in intro.

178
00:12:54,980 --> 00:13:00,800
OK, so it's also an active activity on the score intro, but I just think it's better to have really

179
00:13:00,800 --> 00:13:06,560
unique names because you might guessed it that in the next video or in the next few videos, we, of

180
00:13:06,560 --> 00:13:10,160
course, also going to have a sign in activity.

181
00:13:11,000 --> 00:13:15,620
OK, so at this point, of course, there are many different solutions to this.

182
00:13:15,620 --> 00:13:15,890
Right.

183
00:13:15,900 --> 00:13:21,230
So one of them is the one that we have here where you come to this screen and you can either sign in

184
00:13:21,230 --> 00:13:28,370
or sign up or you could directly go to this sign up screen or to the screen, and then you would have

185
00:13:28,370 --> 00:13:33,740
a little button here at the bottom saying, do you want to sign in instead or something like that?

186
00:13:34,040 --> 00:13:36,500
And it's just changing the UI.

187
00:13:36,500 --> 00:13:38,920
So it's one activity, but it's changing the UI.

188
00:13:39,170 --> 00:13:40,980
So this really depends on what you want to do.

189
00:13:41,000 --> 00:13:42,320
So both ways are fine.

190
00:13:42,650 --> 00:13:49,220
I think the second one is probably going to be a little quicker, but in most cases you should only

191
00:13:49,220 --> 00:13:55,700
sign up or sign in once and then you will be signed in for a pretty long time usually, I guess, or

192
00:13:55,700 --> 00:13:57,950
at least that's going to be the design that we want to have.

193
00:13:58,970 --> 00:14:05,450
All right, so now let's test it, because we have prepared everything so far, I'd say we are starting

194
00:14:05,450 --> 00:14:10,280
to activity when we click on the button sign up intro.

195
00:14:10,550 --> 00:14:13,420
And that, of course, was the prepared project.

196
00:14:13,430 --> 00:14:14,850
So not the one that we just built.

197
00:14:14,870 --> 00:14:17,090
So let's check it out with our own project.

198
00:14:18,700 --> 00:14:27,880
All right, so that we are proud to manage, then sign up and we get to our sign up activity and one

199
00:14:27,880 --> 00:14:28,480
thing is missing.

200
00:14:28,480 --> 00:14:30,380
You can see we still see the bar here at the top.

201
00:14:30,400 --> 00:14:31,150
I don't like that.

202
00:14:31,160 --> 00:14:32,200
So let's get rid of that.

203
00:14:33,780 --> 00:14:40,200
And in order to achieve that, we, of course, need to add those when those red flags in our sign up

204
00:14:40,200 --> 00:14:41,760
activity as well.

205
00:14:41,770 --> 00:14:49,290
So in uncreate, let's just add those lines here, said flags like full screen and then let's run the

206
00:14:49,290 --> 00:14:50,490
application once again.

207
00:14:52,170 --> 00:14:52,710
All right.

208
00:14:52,710 --> 00:14:54,030
So Projet Manaj.

209
00:14:55,220 --> 00:14:55,970
Sign up.

210
00:14:58,420 --> 00:14:59,440
And beautiful.

211
00:14:59,590 --> 00:15:03,730
All right, so that button doesn't seem to do anything yet.

212
00:15:05,240 --> 00:15:10,710
And in order to add that, we need to go to our set up action bar and add one more line.

213
00:15:10,730 --> 00:15:12,980
So here it's going to be toolbar.

214
00:15:15,760 --> 00:15:19,870
Underscore sign up activity, said navigation.

215
00:15:21,190 --> 00:15:27,850
One click listener and here we're just going to do the same thing as if we had pressed the up and so

216
00:15:27,850 --> 00:15:29,500
on back pressed.

217
00:15:31,450 --> 00:15:34,450
All right, so I was just going to be this year on back.

218
00:15:34,910 --> 00:15:35,710
That's right again.

219
00:15:38,090 --> 00:15:43,520
OK, so Prosumer Nash, sign up and Temperton, perfect.

220
00:15:44,090 --> 00:15:49,580
All right, so I'd say let's go over to the next video where we're going to prepare to sign in or to

221
00:15:49,580 --> 00:15:50,530
sign in activity.

222
00:15:50,660 --> 00:15:51,460
So I'll see you there.