1
00:00:00,570 --> 00:00:07,020
Welcome back and this video, we are going to set up the profile screen, as you can see here, my profile,

2
00:00:07,020 --> 00:00:13,170
we have this little image here which will later be clickable so that we can edit the image.

3
00:00:13,410 --> 00:00:15,530
Then we have the name that we can change.

4
00:00:15,540 --> 00:00:19,440
Image is not changeable and then the mobile number and we can update that.

5
00:00:19,760 --> 00:00:21,350
Of course, it's not populated yet.

6
00:00:21,360 --> 00:00:23,550
That's what we're going to do in the next video.

7
00:00:23,550 --> 00:00:27,350
But for now, we're just going to set up this activity as it is.

8
00:00:27,360 --> 00:00:29,350
You can, of course, try to build it yourself.

9
00:00:29,580 --> 00:00:35,760
What's important is that this email that it takes is not focused, so we cannot click on it and edit

10
00:00:35,760 --> 00:00:36,740
it, OK?

11
00:00:36,930 --> 00:00:40,620
Of course, they are not populated yet, so it doesn't make any difference.

12
00:00:40,620 --> 00:00:42,130
But later on it will make a difference.

13
00:00:42,540 --> 00:00:47,240
And of course, we have this little back button which then brings us back to our main activity.

14
00:00:47,790 --> 00:00:51,060
So if you want to build this yourself, go ahead and try it yourself, please.

15
00:00:52,810 --> 00:00:57,400
All right, so let's go ahead and do that if you want to do it together, and that's fine as well,

16
00:00:57,400 --> 00:00:59,170
or if you just want to check how I did it.

17
00:00:59,170 --> 00:01:03,940
So I'm just going to create a new activity here, new empty activity.

18
00:01:04,209 --> 00:01:09,430
And I'm going to call this one my profile activity.

19
00:01:12,150 --> 00:01:21,720
And of course, it should inherit from our base activity, so here, that's a base activity, then we

20
00:01:21,720 --> 00:01:23,340
need to import our.

21
00:01:24,340 --> 00:01:28,390
So let's do that because we are in an activities folder and it doesn't find out.

22
00:01:28,810 --> 00:01:33,890
Now it does find it and now we will need to do multiple steps in here.

23
00:01:34,240 --> 00:01:39,360
So, first of all, let's go ahead and make changes to the manifest.

24
00:01:39,820 --> 00:01:41,850
So let's go to the manifest here.

25
00:01:41,900 --> 00:01:45,190
We have this new activity somewhere.

26
00:01:45,310 --> 00:01:47,050
There it is, activity, my profile.

27
00:01:47,050 --> 00:01:49,420
And I want to use the same style for it.

28
00:01:49,720 --> 00:01:55,160
OK, so I'm just going to add those two lines, as I have done with every other activity as well.

29
00:01:55,210 --> 00:01:56,170
It's pretty remote.

30
00:01:56,170 --> 00:01:57,910
And his team put the No Action Bar.

31
00:01:59,060 --> 00:02:03,650
And then let's go to the activity, my profile example.

32
00:02:04,310 --> 00:02:06,790
So here we will need to set up quite something.

33
00:02:08,139 --> 00:02:13,630
And in order for this to not become a type fest, I'm going to go through it.

34
00:02:14,320 --> 00:02:16,030
I have the code prepared here.

35
00:02:16,370 --> 00:02:23,350
But before we do so, let's go to into our dimensions and the strings real quick so that we have the

36
00:02:23,350 --> 00:02:25,480
right dimensions in there as well.

37
00:02:25,750 --> 00:02:30,080
So the dimensions that I'm going to use are going to be the following ones, and it's quite some.

38
00:02:30,650 --> 00:02:32,880
So that's a lot of different dimensions.

39
00:02:32,900 --> 00:02:34,000
So let's look at those.

40
00:02:34,330 --> 00:02:35,890
We have to screen content.

41
00:02:35,890 --> 00:02:38,410
Margin start and end is going to be 16.

42
00:02:38,680 --> 00:02:42,310
The screen content margin, top bottom will be 10 density pixels.

43
00:02:42,310 --> 00:02:44,350
Screen content padding will be 16.

44
00:02:44,710 --> 00:02:46,710
The user image size will be 100.

45
00:02:47,140 --> 00:02:50,890
The margin top for the profile name will be 25.

46
00:02:50,890 --> 00:02:57,580
The added text male margin top will be 20, then mobile margin top editors will be 20 and the button

47
00:02:57,580 --> 00:03:00,310
up to the margin top will be thirty density pixels.

48
00:03:03,460 --> 00:03:08,260
Now, at this point, you could, of course, say, all right, I would like to use the same margins

49
00:03:08,260 --> 00:03:15,340
as we have done in other activities and other examples so that we always have the same sizes, so we

50
00:03:15,340 --> 00:03:16,720
only change one of them.

51
00:03:16,960 --> 00:03:20,470
That is something that you can do and that would probably be a better choice.

52
00:03:20,800 --> 00:03:26,890
That but for other case or for the purpose of this video, it's a lot easier to just do it like this.

53
00:03:26,920 --> 00:03:31,660
OK, so I'm just going to show you the dimensions here and then we're going to use them and then also

54
00:03:31,660 --> 00:03:33,090
the strings that we're going to use.

55
00:03:33,100 --> 00:03:40,930
It's not many, but still, let's add those in here so that we could potentially make our multilingual

56
00:03:40,930 --> 00:03:45,100
later on so we can see here mobile update and my profile.

57
00:03:45,370 --> 00:03:47,440
Those are the terms that are used here.

58
00:03:48,130 --> 00:03:48,660
All right.

59
00:03:49,210 --> 00:03:57,250
So now we can go over to our activity, my profile, and you can see it's a linear layout which has

60
00:03:57,250 --> 00:04:00,580
a much and for with and the orientation is vertical.

61
00:04:00,940 --> 00:04:04,810
And in there I have a bar layout with a toolbar.

62
00:04:04,830 --> 00:04:07,260
So first of all, we start with this toolbar at the top.

63
00:04:07,780 --> 00:04:15,820
You can see here this blue toolbar there, which has the HEPA overlay theme, which is the style that

64
00:04:15,820 --> 00:04:22,270
we created ourself earlier on, which inherits from theme overlay compared to Dark Action Bar.

65
00:04:23,470 --> 00:04:23,920
Then.

66
00:04:25,580 --> 00:04:32,330
We have our toolbar here, which has only the bar size height, which has the color primary background,

67
00:04:32,330 --> 00:04:36,790
which is the blue color and the Pop-Up Overlay as the Pop-Up theme.

68
00:04:38,120 --> 00:04:40,360
And then we have a linear layout here.

69
00:04:40,820 --> 00:04:45,200
So it's this background, linear layout here, which you can only see in the background.

70
00:04:45,200 --> 00:04:46,830
And inside of that we have a card.

71
00:04:46,850 --> 00:04:51,030
So we have this card in which we then have all of the other elements.

72
00:04:51,030 --> 00:04:54,680
So the image to edit that it takes that it takes up update button.

73
00:04:55,430 --> 00:05:00,890
OK, so linear layout, which is the background, which will also use icey background.

74
00:05:02,480 --> 00:05:04,010
Which is adorable, but we have.

75
00:05:05,740 --> 00:05:08,290
OK, then we have the card for you.

76
00:05:10,820 --> 00:05:14,390
With the margins that we have prepared in the dimensions.

77
00:05:16,250 --> 00:05:21,030
And a little elevation, which we also have in the dimension, so that it creates a little shadow.

78
00:05:21,560 --> 00:05:24,280
We have a little corner around it as well, as you can see.

79
00:05:24,290 --> 00:05:28,860
Well, you cannot see it in the design, but you will see it once it's in the application.

80
00:05:29,240 --> 00:05:34,700
So if we go over to my profile, you can see that there is this little rounded corner here at the top

81
00:05:34,700 --> 00:05:37,160
left or at all of the four sides.

82
00:05:37,760 --> 00:05:43,910
Then we have another linear layout so that we can put, for example, the image view and edit text one

83
00:05:44,480 --> 00:05:48,700
to text two and edit text three inside of it.

84
00:05:49,070 --> 00:05:52,100
And then finally, we have our button at the very bottom.

85
00:05:52,910 --> 00:05:54,700
OK, so this is nothing new.

86
00:05:55,040 --> 00:05:57,980
So I think this should be fine that I just rush over it.

87
00:05:58,490 --> 00:06:03,980
If you want to dig deeper into it, of course, check out the XML file, so download it and check it

88
00:06:03,980 --> 00:06:05,440
out in more depth.

89
00:06:07,270 --> 00:06:14,470
There's only one thing that I want to specifically show you, and that is this focus able or focus and

90
00:06:14,470 --> 00:06:20,650
touch mode is set to falls for our combat, which is to email so far our email address.

91
00:06:20,650 --> 00:06:25,120
We don't want to be able to edit it or we don't want to allow the user to edit it.

92
00:06:27,450 --> 00:06:33,060
And of course, the import type is set to text email address so that the user gets the right interface

93
00:06:33,060 --> 00:06:37,440
directly when clicking on it, potentially, of course, not on the screen.

94
00:06:37,440 --> 00:06:43,170
So it doesn't really matter for us, but it's still a good practice to have that when you work with

95
00:06:43,170 --> 00:06:43,630
emails.

96
00:06:43,800 --> 00:06:46,980
But in this case, it wouldn't even really be necessary.

97
00:06:46,980 --> 00:06:52,320
But I think it's still good for you to know that if you want to use email addresses, then use the input,

98
00:06:52,520 --> 00:06:53,400
text, email address.

99
00:06:55,070 --> 00:07:01,310
OK, so now we can go to our high profile activity and set that up, and it will be very similar to

100
00:07:01,310 --> 00:07:04,300
what we have here regarding the action bar.

101
00:07:04,310 --> 00:07:09,110
So let's set up the action bar here as well and the profile activity.

102
00:07:09,440 --> 00:07:10,840
So set up action bar.

103
00:07:10,850 --> 00:07:17,350
It's not to bar main activity, but it's the tool bar on the score and does give me something.

104
00:07:17,350 --> 00:07:19,010
Yes, my profile activity.

105
00:07:19,970 --> 00:07:22,560
And here we won't need those two elements.

106
00:07:22,560 --> 00:07:24,710
So we don't have a navigation icon in there.

107
00:07:25,070 --> 00:07:29,870
But we do have, however, is our action bar.

108
00:07:29,930 --> 00:07:35,030
So Voll Action Bar should be a support action bar.

109
00:07:36,770 --> 00:07:44,930
And then we check if the action bar is now, so if Action Bar is not known to be specific here, so

110
00:07:44,930 --> 00:07:46,940
if it's not now, then set home.

111
00:07:47,950 --> 00:07:59,920
Or display home is up enabled action bar set home display has enabled to truth and then Action Bar.

112
00:08:01,320 --> 00:08:09,540
Set home as an indicator and here we use our dot drawable thought I see.

113
00:08:10,680 --> 00:08:18,510
And here, black color or black color back, even though probably black is not going to be perfect for

114
00:08:18,510 --> 00:08:18,990
this case.

115
00:08:19,000 --> 00:08:22,830
So if you look at it, I could see that we're using a white color here.

116
00:08:22,830 --> 00:08:29,010
So maybe we should use it or we should create another one, which is going to be.

117
00:08:29,980 --> 00:08:31,210
The same one in white.

118
00:08:31,400 --> 00:08:32,770
OK, so let's copy this.

119
00:08:33,860 --> 00:08:36,900
And new or actually, do I have it already?

120
00:08:37,610 --> 00:08:38,120
White.

121
00:08:39,330 --> 00:08:42,240
I know I don't have it, so let's create the white version.

122
00:08:43,799 --> 00:08:52,920
New vector, give it this name and then it's an arrow, so hopefully we find it.

123
00:08:52,960 --> 00:08:54,700
Yeah, it's a throwback.

124
00:08:54,720 --> 00:08:58,860
I was so let's put next Finnish and.

125
00:09:01,220 --> 00:09:02,900
Actually, I gave it the wrong name.

126
00:09:03,290 --> 00:09:04,070
It should be.

127
00:09:05,470 --> 00:09:08,980
Back still here, but this should be white here.

128
00:09:10,340 --> 00:09:11,340
What color back?

129
00:09:12,410 --> 00:09:20,150
So let me see, and the project, if it created this drawable for me, I see black color back.

130
00:09:23,220 --> 00:09:24,670
That is give us all the name.

131
00:09:24,690 --> 00:09:25,110
Well.

132
00:09:27,740 --> 00:09:33,770
And it seemed it did and and created for me, so let's go ahead and do that again, Victor.

133
00:09:35,640 --> 00:09:39,960
Like this, I see white color back and the color should, of course, be white.

134
00:09:41,130 --> 00:09:48,120
So here, six FS will do choose this next and then finish.

135
00:09:49,600 --> 00:09:51,150
OK, and now it's it work.

136
00:09:54,290 --> 00:09:57,840
And then, of course, we can set the title of the action bar as well.

137
00:09:57,860 --> 00:09:59,390
So let's do that action bar.

138
00:10:00,680 --> 00:10:06,350
The title should be something like my profile, even though here, of course, we should use a string.

139
00:10:06,350 --> 00:10:06,700
Right.

140
00:10:07,070 --> 00:10:10,940
So in order to use a string, what we can do is resources.

141
00:10:13,490 --> 00:10:22,550
Don't get string, and then we get the string from our string thought, and here was my profile, even

142
00:10:22,550 --> 00:10:24,650
though now that I see it, I think.

143
00:10:26,340 --> 00:10:31,080
It would be better to call this one my profile title, to be more precise.

144
00:10:31,230 --> 00:10:35,130
OK, so this is also something that you can then, of course, edit later on, but.

145
00:10:35,980 --> 00:10:43,090
I personally think that's going to be a more descriptive string name, and then of course, I want to

146
00:10:43,090 --> 00:10:53,830
give this action bar or this tool bar to be precise, to bar my profile activity I navigation on Click

147
00:10:53,830 --> 00:10:58,240
Listener so that it does something and it should just do Hornback Prest.

148
00:11:00,290 --> 00:11:00,830
All right.

149
00:11:02,670 --> 00:11:08,010
So now, of course, we need to call this function in our uncreate function, so let's just do that

150
00:11:08,010 --> 00:11:10,230
around here, set up action bar.

151
00:11:12,240 --> 00:11:16,270
And now at this point, we should, of course, make sure that we can get there.

152
00:11:16,290 --> 00:11:18,360
So where would be a good spot?

153
00:11:18,390 --> 00:11:24,120
Well, in our main activity, because if you look at it when we're in the main activity and we press

154
00:11:24,120 --> 00:11:26,860
on my profile, that's when we want to get here.

155
00:11:26,880 --> 00:11:33,240
Currently, we just display this little toast here, which says toast, make text my profile.

156
00:11:33,250 --> 00:11:35,760
Now, of course, we want to start an intent.

157
00:11:37,630 --> 00:11:44,230
So let's start the activity here, start activity with the intent.

158
00:11:46,050 --> 00:11:57,570
From this activity to our high profile activity, colon, colon, Kloster, Giwa.

159
00:11:58,840 --> 00:11:59,440
All right.

160
00:12:01,630 --> 00:12:07,360
At this point, we should be able to test it and hopefully I didn't get any minor bugs in there, so

161
00:12:07,360 --> 00:12:11,520
things don't work as intended, but everything should be fine, I think.

162
00:12:13,020 --> 00:12:14,700
All right, so that we are approaching Monash.

163
00:12:16,040 --> 00:12:21,800
Let's go to the profile, my profile of a Muslim son, and you can see it works perfect.

164
00:12:22,040 --> 00:12:23,570
Now let's click on email.

165
00:12:23,600 --> 00:12:25,720
You can see we cannot access it.

166
00:12:26,390 --> 00:12:27,980
We can access the others, however.

167
00:12:29,920 --> 00:12:36,100
All right, so in the next video, we are going to populate the screen with the image to name and so

168
00:12:36,100 --> 00:12:36,380
forth.

169
00:12:37,060 --> 00:12:37,530
All right.

170
00:12:37,720 --> 00:12:39,010
So see you in the next one.