1
00:00:00,970 --> 00:00:06,910
Welcome back in this video, we are going to built the screen that you see here, and the goal is to

2
00:00:06,910 --> 00:00:10,480
really have a screen that is as close as possible to this screen.

3
00:00:10,690 --> 00:00:12,610
You can try to build this yourself.

4
00:00:12,910 --> 00:00:14,380
And I would really recommend it.

5
00:00:14,710 --> 00:00:20,350
And the only thing that you haven't seen the used before is this card view here.

6
00:00:20,620 --> 00:00:23,860
And this is just a card view widget.

7
00:00:23,860 --> 00:00:28,240
So you can just go to the XML file and try to build it using a card view.

8
00:00:28,480 --> 00:00:33,230
I'm going to use a linear layout here, and you can see that we have a text in here.

9
00:00:33,260 --> 00:00:38,800
Then this card view, which has a linear layout in itself where we have another text view, text view

10
00:00:39,070 --> 00:00:40,560
added to text, as well as.

11
00:00:40,570 --> 00:00:45,280
But so we have four items inside of the card view linear layout.

12
00:00:45,550 --> 00:00:47,410
And of course, we have a background here.

13
00:00:47,860 --> 00:00:52,900
You can, of course, choose to use your own background, but you can download this background from

14
00:00:53,170 --> 00:00:58,030
the files that are available at this lecture slash chapter.

15
00:00:58,120 --> 00:01:03,060
So just download the project and you can get the files there so you will find the background here.

16
00:01:03,070 --> 00:01:04,200
I CBG.

17
00:01:04,420 --> 00:01:09,550
So I see on the school background is going to be this background, and there you find the files for

18
00:01:09,550 --> 00:01:10,570
the different sizes.

19
00:01:11,200 --> 00:01:13,300
So screen density sizes.

20
00:01:13,760 --> 00:01:15,520
OK, let's get back to our project.

21
00:01:16,000 --> 00:01:18,400
And first of all, import those troubles.

22
00:01:19,450 --> 00:01:26,380
I'm just going to drag in my PNG file in here, and this will then be my background that I will be using

23
00:01:26,650 --> 00:01:27,640
for this project.

24
00:01:28,330 --> 00:01:32,770
OK, so now let's go ahead and set up our activity.

25
00:01:32,770 --> 00:01:38,800
Main example, and I'm going to use a linear layout here because it's a lot easier to set everything

26
00:01:38,800 --> 00:01:41,680
up in the style that I want to have there.

27
00:01:42,100 --> 00:01:46,690
If we're using a linear layout, we won't need to have all of these constraints, which will make it

28
00:01:46,690 --> 00:01:50,380
a lot easier in terms of setting it up in the Aksum al coat.

29
00:01:52,670 --> 00:01:59,960
So let's start with the first entry here, and this will be quiz app like so.

30
00:02:00,240 --> 00:02:06,230
So this will be the text that we have, and currently there's not really much to see there, just as

31
00:02:06,230 --> 00:02:09,590
a little text that says, Quiz, let's style it a little bit.

32
00:02:09,740 --> 00:02:11,540
Let's give it the better size here.

33
00:02:11,540 --> 00:02:19,340
So I'm going to give it a text size of 25 MP and I'm going to make the textile bold.

34
00:02:20,470 --> 00:02:23,050
So that it's going to be significantly thicker.

35
00:02:23,680 --> 00:02:25,840
So you see this up there we are.

36
00:02:26,170 --> 00:02:27,190
Looks a little bigger.

37
00:02:27,670 --> 00:02:33,520
Then I also want to make sure that it's with it's not going to be wrapped content, but it's actually

38
00:02:33,520 --> 00:02:37,780
going to take the entire width of the parents or matched it with off the parent.

39
00:02:38,560 --> 00:02:45,850
Also, the text should be centered, so the gravity should be said to center here, which will allow

40
00:02:45,880 --> 00:02:47,890
our text to be in the middle.

41
00:02:47,920 --> 00:02:51,550
You can see it takes the entire width and then it's centered in the middle.

42
00:02:52,450 --> 00:02:59,780
Now, as the text color, I would like to use a white color, so text should be white.

43
00:02:59,800 --> 00:03:05,920
Now we won't see it because, well, we don't have a background where it would be visible, so we need

44
00:03:05,920 --> 00:03:07,330
to add a background.

45
00:03:07,750 --> 00:03:14,470
And here's how I'm going to do that is I'm just going to use my eye CPG.

46
00:03:14,620 --> 00:03:20,860
So this file that I just import it, which is this trouble file here.

47
00:03:21,430 --> 00:03:21,780
OK.

48
00:03:21,820 --> 00:03:25,000
This one, you can of course, use an own file if you want to.

49
00:03:25,330 --> 00:03:27,790
You don't have to use this particular background.

50
00:03:28,630 --> 00:03:30,910
OK, so let's look at how this is going to look like.

51
00:03:30,910 --> 00:03:36,640
We see, OK, there we have the white text which has this app, and then we have our background.

52
00:03:37,060 --> 00:03:42,400
OK, so now the important part comes in and that is going to be the card view.

53
00:03:42,760 --> 00:03:47,470
OK, so this card view is basically going to be this whole part right here.

54
00:03:47,800 --> 00:03:49,510
And let's set it up.

55
00:03:50,080 --> 00:03:57,460
Therefore, we will need to use this widget card view here, which comes from, well, I'm going to

56
00:03:57,460 --> 00:03:58,390
use the material one.

57
00:03:58,810 --> 00:04:00,790
So this material card to you?

58
00:04:01,890 --> 00:04:02,250
All right.

59
00:04:02,430 --> 00:04:07,770
And in terms of with, I'm going to much to parent and in terms of height, it should only take as much

60
00:04:07,770 --> 00:04:09,510
height as it actually needs.

61
00:04:10,380 --> 00:04:17,970
So then inside of this card view, I want to have a bunch of information and bunch of UI elements.

62
00:04:18,240 --> 00:04:20,490
But first, let's style this card for you a little bit.

63
00:04:20,880 --> 00:04:28,080
So I want to have a little bit of margin at the start of, let's say, 20 density pixels and at the

64
00:04:28,080 --> 00:04:30,870
end of 20 density pixels also.

65
00:04:31,320 --> 00:04:33,600
So just a bit of distance towards the edges.

66
00:04:34,380 --> 00:04:36,030
The background should be white.

67
00:04:36,450 --> 00:04:40,050
So I'm going to use the white color as the background.

68
00:04:40,470 --> 00:04:47,820
And currently, we don't see our card for you yet because there's nothing to display, and I'm going

69
00:04:47,820 --> 00:04:49,560
to add some more properties later on.

70
00:04:50,040 --> 00:04:55,890
For now, let's create a new linear layout in here, which will then contain all of the details that

71
00:04:55,890 --> 00:04:56,340
we have.

72
00:04:56,670 --> 00:05:02,400
So I'm going to give this a width of match parent and the height of content.

73
00:05:02,820 --> 00:05:09,150
So again, it should only take the height that it really requires and the entire width of the screen.

74
00:05:10,140 --> 00:05:13,760
Now on top of that, I want to add more settings here.

75
00:05:13,770 --> 00:05:22,440
First of all, a margin of 16 density pixels towards all directions and an orientation, because otherwise

76
00:05:22,440 --> 00:05:23,970
you can see we get an error here.

77
00:05:23,970 --> 00:05:30,150
There's just a red icon, which says that our linear layout doesn't have an orientation, so it doesn't

78
00:05:30,150 --> 00:05:35,040
know how to treat the orientation of the inner linear layout.

79
00:05:35,070 --> 00:05:40,050
So once you're using multiple linear layouts, you need to set up the orientation.

80
00:05:40,350 --> 00:05:45,510
And here I also want it to be vertical, so I want items to be stacked on top of each other.

81
00:05:45,990 --> 00:05:48,120
And that's what this linear layout allows us to do.

82
00:05:48,660 --> 00:05:53,640
Now, inside of this linear layout, I want to have a text view and me just copy this text you hear.

83
00:05:55,010 --> 00:05:56,390
And put it in there.

84
00:05:56,660 --> 00:06:02,000
So now, instead of saying quiz app, it should say who will come?

85
00:06:02,960 --> 00:06:08,720
OK, so it should also wrap its contents in terms of height and match apparent in terms of width, and

86
00:06:08,720 --> 00:06:14,330
what I want for this text to do is I want it to be centered as well, you can see here on the right

87
00:06:14,330 --> 00:06:14,900
hand side.

88
00:06:15,440 --> 00:06:17,530
It's also changed the text color of it.

89
00:06:17,540 --> 00:06:24,260
So here text color will not be white, but I'm going to hard code a color here, so I'm going to use

90
00:06:24,590 --> 00:06:29,840
three six three eight four three and you can of course, use a different color, but it's going to be

91
00:06:29,840 --> 00:06:31,130
this gray that you see here.

92
00:06:31,520 --> 00:06:39,560
So now we have this welcome text for our text view and the text is centered, so the gravity is towards

93
00:06:39,560 --> 00:06:40,460
the center.

94
00:06:41,210 --> 00:06:44,840
That's changed to size to 30, so it should be a little bigger.

95
00:06:45,200 --> 00:06:53,510
And then we can go to our next text view, which for a C here says, please enter your name.

96
00:06:53,720 --> 00:06:55,340
So we have this welcome now.

97
00:06:55,700 --> 00:06:57,950
Now, let's add more items in there.

98
00:06:58,520 --> 00:07:05,260
So first of all, I'm just going to copy this text view and then it will match apparent content.

99
00:07:05,270 --> 00:07:15,810
The text should be, please enter your name, and then I'm going to use the text color of seven a eighty

100
00:07:15,860 --> 00:07:16,520
eighty nine.

101
00:07:16,880 --> 00:07:19,250
And of course, you can use a different one if you want to.

102
00:07:19,520 --> 00:07:23,180
But this is going to be this like great that you can see here on the left hand side, and you can just

103
00:07:23,570 --> 00:07:28,130
choose a color from here by using the selector, which is pretty useful.

104
00:07:28,940 --> 00:07:33,350
So now we have the text size, color and text.

105
00:07:33,560 --> 00:07:37,340
It should also be gravitated towards the center and.

106
00:07:38,550 --> 00:07:44,400
If you look at it, it's pretty close together, so I would like there to be a little bit of distance

107
00:07:44,730 --> 00:07:51,510
so we can just add a margin here towards top, so margin top of 16 density pixels.

108
00:07:51,510 --> 00:07:55,050
This will give us a little bit of distance between those two items you can see now.

109
00:07:55,050 --> 00:07:56,190
There's just white space.

110
00:07:56,760 --> 00:07:58,630
And this is also what we want here.

111
00:07:58,650 --> 00:08:01,770
You see, there's a distance of 16 dpi roughly.

112
00:08:02,070 --> 00:08:06,060
And then next will come and text entry field.

113
00:08:06,510 --> 00:08:11,550
And in order to get such a text entry field, we can use to text input.

114
00:08:12,120 --> 00:08:13,770
So text input.

115
00:08:14,740 --> 00:08:15,260
Layouts.

116
00:08:15,700 --> 00:08:22,210
OK, so here it is, this text input, a layout which in turn has an app composite added text.

117
00:08:22,210 --> 00:08:28,060
So that's just how it's done, and you just have to follow along like this if you want to use it.

118
00:08:28,840 --> 00:08:31,230
So let's see.

119
00:08:31,240 --> 00:08:37,000
So first of all, you have this text input layout, which is inside of the material library and then

120
00:08:37,000 --> 00:08:37,960
on their text field.

121
00:08:38,559 --> 00:08:44,950
So I'm going to match the parent and rap content and then inside of it, we need to add an app.

122
00:08:44,950 --> 00:08:45,650
Comput.

123
00:08:45,920 --> 00:08:46,780
Add added text.

124
00:08:47,230 --> 00:08:51,640
So this will be the actual edit text where we can then, well, enter stuff.

125
00:08:51,850 --> 00:08:57,130
So let's match the parent and draw up the content in terms of width and height here.

126
00:08:57,610 --> 00:09:03,070
And then we need to add some more settings for this at its text.

127
00:09:03,940 --> 00:09:06,330
And, of course, also for the input layout and so forth.

128
00:09:06,340 --> 00:09:10,730
But generally speaking, this is how the result currently is looking like.

129
00:09:10,730 --> 00:09:12,130
You see, we have this welcome.

130
00:09:12,130 --> 00:09:15,190
Please enter your name then to text input field.

131
00:09:15,550 --> 00:09:17,380
So let's design those a little bit.

132
00:09:17,860 --> 00:09:25,150
First of all, I'm going to add some settings here to my text input layout, where I'm going to define

133
00:09:25,150 --> 00:09:32,050
a style and the style should be the outline in box.

134
00:09:32,050 --> 00:09:38,080
So this this text input, a layout outline box.

135
00:09:38,380 --> 00:09:39,010
This one here.

136
00:09:39,670 --> 00:09:41,190
So this will give it a different style.

137
00:09:41,200 --> 00:09:45,490
You see, now it is white and it's just generally a different style.

138
00:09:45,760 --> 00:09:47,740
And there's also the style that I'm using here.

139
00:09:48,040 --> 00:09:50,920
You see the has an outline and then it's a box.

140
00:09:51,070 --> 00:09:55,150
So that's what we achieve by using this line here.

141
00:09:55,450 --> 00:09:59,110
And now I'm just going to give it a little bit of margin towards the top.

142
00:09:59,350 --> 00:10:03,520
So margin top of, let's say, 20 density pixels.

143
00:10:03,520 --> 00:10:06,490
So it's not going to be glued to please enter your name.

144
00:10:06,490 --> 00:10:09,970
So also a little bit of distance, a little more than we had before, even.

145
00:10:10,900 --> 00:10:18,250
OK, so now let's style or set the settings for our app compat at its text.

146
00:10:19,000 --> 00:10:24,190
So here I can use the property hint to say what the user should enter.

147
00:10:24,370 --> 00:10:28,520
So you know this which says name so here, for example, enter your name.

148
00:10:28,540 --> 00:10:29,530
Well, guess what?

149
00:10:29,530 --> 00:10:30,460
You should enter your name.

150
00:10:30,460 --> 00:10:35,650
So a hint could be John or something like that.

151
00:10:36,100 --> 00:10:37,180
So, e.g. John.

152
00:10:37,420 --> 00:10:37,750
OK.

153
00:10:38,380 --> 00:10:41,030
So what would be the name that you need to enter?

154
00:10:41,050 --> 00:10:46,480
Well, something like John or whatever, then the input type.

155
00:10:46,480 --> 00:10:50,560
And here you can see there are different types of settings that you have here.

156
00:10:50,740 --> 00:10:57,190
So if you define the input type, you will limit the user's options what he can actually enter.

157
00:10:57,400 --> 00:11:00,730
So if the input type is data, then the user can only enter dates.

158
00:11:00,730 --> 00:11:04,660
If it's a number, he cannot enter letters, for example, and so forth.

159
00:11:05,050 --> 00:11:08,980
So I'm going to use text cap words here.

160
00:11:09,190 --> 00:11:17,560
So this will limit us to use text in terms of words, and then let's give it a text color that will

161
00:11:17,560 --> 00:11:19,060
be slightly different as well.

162
00:11:19,330 --> 00:11:22,270
So I'm going to use three, six, three, a 43.

163
00:11:22,300 --> 00:11:28,420
We had to use this color before, which is the one that we use here for our first text view, which

164
00:11:28,420 --> 00:11:29,080
says, welcome.

165
00:11:29,950 --> 00:11:34,660
OK, so now let's also change the text color hint.

166
00:11:35,440 --> 00:11:41,110
So here, for example, this e.g. John, you can change that as well, and I'm going to hardcoded to

167
00:11:41,440 --> 00:11:44,470
seven a eighty eighty nine.

168
00:11:44,980 --> 00:11:49,570
Of course, you can create separate colours for this as well in the colours file, but I think this

169
00:11:49,570 --> 00:11:50,290
will do the trick.

170
00:11:52,170 --> 00:11:57,570
And by the way, if you were wondering about anything that I'm using here, feel free to just hover

171
00:11:57,570 --> 00:12:01,350
over the property and you will find more details.

172
00:12:01,680 --> 00:12:06,690
So here, for example, the type of data being placed in a text field used to help an input method to

173
00:12:06,690 --> 00:12:09,300
decide how to let the user enter text.

174
00:12:09,600 --> 00:12:12,600
And then you can see the values they daytime.

175
00:12:12,600 --> 00:12:15,060
None, no, no decibel and so forth.

176
00:12:15,600 --> 00:12:20,160
And if you want to know even more about it, definitely just check them out in the documentation.

177
00:12:21,650 --> 00:12:27,620
So here, for example, if you search for input type, then you will find all kinds of information,

178
00:12:27,620 --> 00:12:34,430
you see there's a lot of details that you can find about it and type time, variation time and so forth.

179
00:12:34,430 --> 00:12:36,590
So there's really a lot going on here.

180
00:12:36,770 --> 00:12:42,380
But you can just read through it step by step to get a better idea of what it actually does for you.

181
00:12:43,430 --> 00:12:51,610
OK, so now that we have that out of the way, let's get back to the project and I see here that this

182
00:12:51,650 --> 00:12:52,850
looks already pretty good.

183
00:12:53,150 --> 00:12:58,730
It's not positioned correctly yet, which means we need to change something on the top level.

184
00:12:59,090 --> 00:13:01,430
And also, we don't have the start button yet.

185
00:13:01,670 --> 00:13:05,420
So let's add this button and it's still in this linear layout, right?

186
00:13:05,780 --> 00:13:12,020
So we add this new button here, which matches the parents and wraps the content.

187
00:13:12,380 --> 00:13:18,560
So again, I want it to be as wide as the screen and only be as high as the content that it needs to

188
00:13:18,560 --> 00:13:19,130
display.

189
00:13:19,130 --> 00:13:19,970
Not more than that.

190
00:13:20,600 --> 00:13:23,030
So here, let's close this button.

191
00:13:23,030 --> 00:13:27,950
And by the way, you can either use to greater then sign it and the button will be closed.

192
00:13:27,980 --> 00:13:33,590
And then you can add something inside of the button, which we don't do in this case, or you can just

193
00:13:33,590 --> 00:13:36,140
close it with the slash created and sign.

194
00:13:36,470 --> 00:13:43,400
So now you can set up the settings for your button directly here, and I'm going to set up 16 dpi for

195
00:13:43,400 --> 00:13:44,600
the margin top here.

196
00:13:45,140 --> 00:13:52,390
And then I'm going to give this button a background and I'm going to use the primary color and here

197
00:13:52,640 --> 00:13:57,770
designed default color primary, which will be this purple that you can see here.

198
00:13:58,070 --> 00:14:00,860
So if you wanted to use a different color, of course you can do so.

199
00:14:01,760 --> 00:14:08,930
OK, and here are the different colors which we have in our values XML and I'm just going to use the

200
00:14:08,930 --> 00:14:09,410
purple one.

201
00:14:09,410 --> 00:14:16,940
You can, of course, use any color you want, and to text for this button should say start and then

202
00:14:16,940 --> 00:14:19,040
accordingly, text color itself.

203
00:14:19,490 --> 00:14:20,900
I want to be white.

204
00:14:21,320 --> 00:14:23,660
OK, so let's make this on white as well here.

205
00:14:24,140 --> 00:14:27,850
The text size, let's define it as 18 ESP.

206
00:14:28,610 --> 00:14:34,700
Now let's look at it, and we can see this is the button that we get to the general, oh well, general

207
00:14:34,700 --> 00:14:35,540
view that we get.

208
00:14:35,540 --> 00:14:42,830
So here this is our card view where items are on top of each other, which is why we are using a linear

209
00:14:42,950 --> 00:14:43,640
layout.

210
00:14:44,030 --> 00:14:50,240
OK, so here you see, the card view has a linear layout inside of it, which is oriented vertically

211
00:14:50,240 --> 00:14:52,100
where items are on top of each other.

212
00:14:53,300 --> 00:14:59,600
OK, so now that we have all of those buttons, let's make some changes to our card view, as well as

213
00:14:59,600 --> 00:15:05,420
to the top linear layout, which apparently doesn't want to display everything in the format that we

214
00:15:05,420 --> 00:15:05,750
want.

215
00:15:05,930 --> 00:15:08,690
That is because we don't have the gravity set up yet.

216
00:15:08,780 --> 00:15:14,930
So I want the gravity to be at the center, which will now make sure that everything is gravitating

217
00:15:14,930 --> 00:15:20,120
towards the center, which means that Quispe is not here quite close to our.

218
00:15:21,610 --> 00:15:22,390
Centred.

219
00:15:23,300 --> 00:15:23,900
Card for you.

220
00:15:25,510 --> 00:15:30,970
Now, I want to have a little bit of distance between this text and the next item that comes after it.

221
00:15:31,270 --> 00:15:37,030
And you can achieve that by just adding a margin towards the bottom so we can just go ahead and say,

222
00:15:37,030 --> 00:15:42,700
OK, I want to have 30 density pixels of distance between this quiz app text and then the.

223
00:15:43,700 --> 00:15:46,700
Beautiful little card for you that we have here.

224
00:15:47,120 --> 00:15:52,010
So now let's change something about the card for you that I really like, and that is the corner radius.

225
00:15:52,280 --> 00:15:55,820
So currently our card view is very hard Kornet.

226
00:15:55,820 --> 00:15:58,370
But you see here there's a little bit of a round the corner.

227
00:15:58,550 --> 00:16:02,720
OK, so in order to achieve that, you can use that card.

228
00:16:03,080 --> 00:16:08,720
Corner Radius property and you can define how many density pixels the radius should be.

229
00:16:08,750 --> 00:16:12,230
So the bigger this value is, the more rounded it will be.

230
00:16:12,500 --> 00:16:17,630
So let's test this real quick just to see if this is going to create this around that effect.

231
00:16:17,630 --> 00:16:21,920
And you see, we have this around that the fact if you were to change this to, let's say, 3D density

232
00:16:21,920 --> 00:16:25,910
pixels, the rounded effect would be significantly larger, as you see here.

233
00:16:26,300 --> 00:16:29,030
It's a lot more rounded, so you can really decide what you prefer.

234
00:16:29,600 --> 00:16:32,840
But overall, I'd say this looks pretty close to what we had before.

235
00:16:33,170 --> 00:16:37,580
Now there's one big thing that we still need to change, and that is that we still have this bar here

236
00:16:37,580 --> 00:16:38,090
at the top.

237
00:16:38,450 --> 00:16:39,530
How can we get rid of it?

238
00:16:41,130 --> 00:16:43,020
Well, we can go to our styles.

239
00:16:44,760 --> 00:16:47,430
And we had our theme here.

240
00:16:49,460 --> 00:16:52,670
And there we can define a setting.

241
00:16:54,690 --> 00:16:59,640
So this is the the style that we're using right there, no action bar style.

242
00:17:00,710 --> 00:17:02,270
Which was called my quiz app.

243
00:17:02,480 --> 00:17:12,109
That's the name of our style here, and we can add an item which has the name of Android window full

244
00:17:12,440 --> 00:17:15,650
screen, and we set the value to true.

245
00:17:18,089 --> 00:17:22,950
Now, if a rerun the application, we will see that now the top bar is gone.

246
00:17:23,280 --> 00:17:25,510
So now the status bar is gone entirely.

247
00:17:25,770 --> 00:17:27,030
And this is how you achieve it.

248
00:17:27,329 --> 00:17:30,830
So this is the theme that we are using in the Android Manifest, right?

249
00:17:30,950 --> 00:17:34,920
You have defined the theme here as the style for the entire application.

250
00:17:35,310 --> 00:17:40,050
And then we just did once and it's done throughout the entire app.

251
00:17:41,130 --> 00:17:43,680
OK, so that's pretty much it for this video.

252
00:17:44,310 --> 00:17:51,030
I hope you tried to create some of this UI yourself and you generated your own style, so to speak.

253
00:17:51,360 --> 00:17:58,140
And yeah, let's keep on building the app up in the next video where we're going to create the question

254
00:17:58,140 --> 00:17:59,970
model and prepared to question.