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

2
00:00:01,500 --> 00:00:08,580
And this year, we are going to add the respect of you to our activity exercise XHTML, and that is

3
00:00:08,580 --> 00:00:11,770
going to be a list of elements that we want to display.

4
00:00:12,240 --> 00:00:19,020
There was something called List View in the past which allowed us to create a list of elements that

5
00:00:19,020 --> 00:00:22,380
were displayed in a vertical manner.

6
00:00:23,690 --> 00:00:29,240
But what we want to do is we want to display the lowest elements in the horizontal manner, and in order

7
00:00:29,240 --> 00:00:35,720
to do so, we cannot use list view, which is a deprecated version of a list, but we will need to use

8
00:00:36,140 --> 00:00:37,760
the risk of you.

9
00:00:38,210 --> 00:00:40,030
So let's create a recycle of you.

10
00:00:40,040 --> 00:00:46,130
And that should be displayed at the very bottom of our activity exercise.

11
00:00:47,270 --> 00:00:53,450
So just before this relative layout ends and I'm just going to sit it in here and you might have to

12
00:00:53,450 --> 00:00:57,530
add the dependancy so you might get an error here because it doesn't know recycle you.

13
00:00:57,540 --> 00:01:01,670
So you need to add the dependancy in your cradle will update for this.

14
00:01:01,940 --> 00:01:07,750
But after that, you should be able to use recycled of here in your XML files.

15
00:01:08,090 --> 00:01:11,830
So it gets an ID, which is arvi exercise status.

16
00:01:11,840 --> 00:01:13,790
Are we standing for recycling view?

17
00:01:14,120 --> 00:01:21,380
And it's just going to have the status which can have three states, so to speak, finished, ongoing

18
00:01:21,410 --> 00:01:22,940
or not started yet.

19
00:01:22,970 --> 00:01:24,560
So these are the three different.

20
00:01:25,660 --> 00:01:33,160
States, so to speak, and it's going to wrap its content, so it's just going to display a small element

21
00:01:33,160 --> 00:01:36,850
in there, which is going to be a number that within a circle.

22
00:01:38,490 --> 00:01:44,460
Now, let's go ahead and design such a little circle in order to do so, we need to go to our layout.

23
00:01:44,460 --> 00:01:52,800
And here I'm going to create a new resus file and I'm going to call this one item on the score exercise

24
00:01:52,800 --> 00:01:53,580
status.

25
00:01:54,990 --> 00:01:58,290
And what it should have as its root element.

26
00:01:59,320 --> 00:02:01,330
It's going to be a text you.

27
00:02:02,570 --> 00:02:08,460
All right, so that we are so within this TextView, I want to have certain settings, all right, so

28
00:02:08,490 --> 00:02:11,370
I'm going to change the settings up here a little bit.

29
00:02:11,660 --> 00:02:15,080
So, first of all, I'm going to give it an ID because I want to access it.

30
00:02:16,070 --> 00:02:21,320
And the idea is going to be a TV item, so TextView item.

31
00:02:22,230 --> 00:02:29,640
And then I said the layout with not much apparent, but it's just going to be twenty five density pixels

32
00:02:29,970 --> 00:02:35,430
and to also be twenty five density pixels, then I want to have a little margin here.

33
00:02:35,610 --> 00:02:41,970
So I'm going to give it a margin towards all directions of one density pixel, then I want it to be

34
00:02:41,970 --> 00:02:42,460
centered.

35
00:02:42,600 --> 00:02:44,790
So I'm going to say gravity center.

36
00:02:45,830 --> 00:02:50,850
As the text color, I will said a rather dark color.

37
00:02:50,900 --> 00:02:54,680
So twenty one, twenty one, which is this black ish color.

38
00:02:55,670 --> 00:03:04,790
And as the text size, I'm going to set it as 14 Aspey and the textile will be bold.

39
00:03:06,700 --> 00:03:14,140
So then there is one little thing I'm going to add the tools text to be one, so in the tools that should

40
00:03:14,470 --> 00:03:16,520
display the text is one.

41
00:03:17,350 --> 00:03:19,520
So we need to import tools here.

42
00:03:20,260 --> 00:03:20,650
All right.

43
00:03:20,800 --> 00:03:21,330
There we are.

44
00:03:23,240 --> 00:03:28,610
Now, there's one more thing that is missing are actually two, one is padding one to have a little

45
00:03:28,610 --> 00:03:34,420
bit of padding so that the text has enough space inside of the circle.

46
00:03:34,670 --> 00:03:38,540
And then, of course, in order to make this thing a circle, this texture, because for now it's just

47
00:03:38,540 --> 00:03:38,870
a text.

48
00:03:38,890 --> 00:03:39,230
You're right.

49
00:03:39,230 --> 00:03:40,640
But I want to give it a background.

50
00:03:40,910 --> 00:03:45,170
And in order to give you the background, I need to prepare another file.

51
00:03:45,170 --> 00:03:47,180
And I'm going to do that in the Dropbox folder.

52
00:03:47,510 --> 00:03:55,250
So I'm going to create a new drawable resource, which I'm going to call Hatam circular color.

53
00:03:56,450 --> 00:03:57,050
Ray.

54
00:03:58,030 --> 00:03:58,600
Background.

55
00:03:59,740 --> 00:04:02,080
And as the root element, that's going to have a shape.

56
00:04:03,430 --> 00:04:06,160
All right, so very similar to what we have created before.

57
00:04:06,460 --> 00:04:08,620
I just want this to have a shape.

58
00:04:10,260 --> 00:04:13,700
Of and that should go in here.

59
00:04:15,050 --> 00:04:18,320
Shape oval, and then I need to.

60
00:04:19,250 --> 00:04:20,810
I have a solid color.

61
00:04:21,760 --> 00:04:29,480
As its background, so to say, so I'm going to use C for C for C for for this.

62
00:04:30,040 --> 00:04:30,450
All right.

63
00:04:30,460 --> 00:04:32,800
So this is just going to be the background, this grey background.

64
00:04:32,800 --> 00:04:42,940
And now we can go ahead and use this as the background for our item exercise status and we call the

65
00:04:42,940 --> 00:04:44,680
color ray.

66
00:04:46,470 --> 00:04:48,480
So item color gray.

67
00:04:50,600 --> 00:04:52,190
So Grayback want this one.

68
00:04:53,220 --> 00:04:56,570
Pretty long name, but you can see this is how it's going to look, so it's going to be a circle.

69
00:04:56,850 --> 00:05:00,090
And now if we look at this here and the design.

70
00:05:01,670 --> 00:05:03,560
I can see that it's this little.

71
00:05:04,790 --> 00:05:06,860
Circle here does Quraish Circle.

72
00:05:07,910 --> 00:05:14,420
With the one in there, all right, so that's just a preparation, we don't do anything in code yet,

73
00:05:14,420 --> 00:05:20,120
only XML so far, that's just a preparation and we want to have 12 of those next to each other.

74
00:05:20,360 --> 00:05:22,910
So one, two, three, four and so forth.

75
00:05:22,910 --> 00:05:27,530
And it will be all next to each other and it should be displayed on the bottom of the screen of our

76
00:05:27,530 --> 00:05:29,270
activity exercise.

77
00:05:29,280 --> 00:05:37,160
Xome also here at the bottom, we want to have it within our recycler view that I have had it in here.

78
00:05:37,170 --> 00:05:42,500
As you can see, it's at the very bottom right now and not very happy where it is.

79
00:05:43,520 --> 00:05:46,190
But we will adjust it later on once we get to the point.

80
00:05:46,670 --> 00:05:48,490
OK, so that was just a little preparation.

81
00:05:48,500 --> 00:05:49,840
I didn't want to drag this out.

82
00:05:50,180 --> 00:05:56,600
And we will need to have multiple videos in order to really get something on the screen that is cool

83
00:05:56,600 --> 00:06:04,040
and works as we want it, because even though this is a rather small feature that doesn't add extreme

84
00:06:04,040 --> 00:06:09,410
value, so to speak, but it's an important feature nonetheless, because the user needs to know which

85
00:06:09,410 --> 00:06:14,240
exercise he currently is out of how many, and of course, could make it simple and just display a number

86
00:06:14,390 --> 00:06:16,940
and say you are at exercise one out of 12.

87
00:06:17,180 --> 00:06:24,510
But having 12 little circles there at the bottom is more visual and a lot cooler, too, to look at.

88
00:06:24,530 --> 00:06:25,970
So that's what we're going to build.

89
00:06:26,060 --> 00:06:27,430
So see you in the next video.