1
00:00:00,150 --> 00:00:00,870
Welcome back.

2
00:00:01,020 --> 00:00:10,650
So I hope you tried to replicate this UI to rebuild it with your own code and yeah, let's look over

3
00:00:10,650 --> 00:00:11,390
it real quickly.

4
00:00:11,760 --> 00:00:16,040
So what we have is our first text you, which is our calculate your.

5
00:00:16,079 --> 00:00:21,620
Then we have the second one, which is this H, which also has a background color.

6
00:00:22,170 --> 00:00:26,850
Then we have a text view, which is in minutes we have our bottom.

7
00:00:27,680 --> 00:00:31,380
And as you can see, it has a certain color.

8
00:00:31,400 --> 00:00:33,730
So this is this grayish color that we have here.

9
00:00:34,340 --> 00:00:41,150
Ninety nine, two, and of course, you could export to your colors XML file, but I kept it in here

10
00:00:41,150 --> 00:00:41,650
for now.

11
00:00:42,320 --> 00:00:46,930
And then below this button we have this texture which has an ID.

12
00:00:46,940 --> 00:00:52,370
So that's something that we haven't covered yet or we haven't used yet, at least not for text views.

13
00:00:52,560 --> 00:00:59,190
So I'm using this ID in order to communicate with this TextView from my code.

14
00:00:59,540 --> 00:01:09,890
So in my code, from my main product, I can now access this TextView and adjust it and it will be empty

15
00:01:09,920 --> 00:01:12,070
without me adjusting it in code.

16
00:01:12,110 --> 00:01:13,950
As you can see, there is no text in there.

17
00:01:14,060 --> 00:01:16,640
So there's also no text property in this text you.

18
00:01:16,940 --> 00:01:22,950
But we will add text as soon as the user enters a date or selects a date.

19
00:01:23,720 --> 00:01:24,110
All right.

20
00:01:24,110 --> 00:01:25,550
The text color is this.

21
00:01:26,760 --> 00:01:31,090
Dark red ish color, then we have a little margin towards the top.

22
00:01:31,110 --> 00:01:37,980
We have a Texas size of 20 and then we have our text vote, which is just to select text, which has

23
00:01:37,980 --> 00:01:41,400
also this great color and the text size of 18.

24
00:01:42,550 --> 00:01:49,460
And another text with an ID select date in minutes or selected date and minutes.

25
00:01:49,690 --> 00:01:51,490
So this is going to be the.

26
00:01:52,630 --> 00:01:59,740
Text that currently is also empty, but it will contain the actual result of the calculation of how

27
00:01:59,740 --> 00:02:05,740
old we are or of hold the uterus or whatever, many minutes have passed since the selected date.

28
00:02:06,480 --> 00:02:06,790
Right.

29
00:02:06,790 --> 00:02:10,930
Then we have, again, the same color that we had before.

30
00:02:11,320 --> 00:02:12,790
And we have our.

31
00:02:13,930 --> 00:02:15,250
Textiles of 35.

32
00:02:15,630 --> 00:02:22,000
So this is going to be a bigger text below that, we also have a great text here, which is the content

33
00:02:22,000 --> 00:02:25,840
and just says 10 minutes and it's also a great color.

34
00:02:26,170 --> 00:02:26,560
All right.

35
00:02:26,570 --> 00:02:28,410
So it's the same gray color.

36
00:02:28,420 --> 00:02:32,030
So at that point, you might say, right, let's export it.

37
00:02:32,470 --> 00:02:32,860
So.

38
00:02:34,900 --> 00:02:35,620
Let's do that.

39
00:02:37,920 --> 00:02:39,240
Let's create a new color.

40
00:02:41,320 --> 00:02:41,770
Name.

41
00:02:43,100 --> 00:02:46,400
Is equal to light gray.

42
00:02:48,040 --> 00:02:48,790
Text color.

43
00:02:50,270 --> 00:02:54,770
So I'm going to call it, of course, you could have another name here and let's just entered India

44
00:02:55,100 --> 00:03:01,700
and now we can replace this with add color and then a light blue text color.

45
00:03:03,210 --> 00:03:05,100
And the same goes for this one here.

46
00:03:06,090 --> 00:03:06,930
That color.

47
00:03:07,970 --> 00:03:09,740
And light gray tax cut.

48
00:03:09,790 --> 00:03:16,550
So we are using it, so why not also export it so that we can reduce it correctly?

49
00:03:17,270 --> 00:03:18,910
So now the colors will be the same.

50
00:03:18,920 --> 00:03:24,980
And if we decide to change the color here, it will automatically impact this color as well because

51
00:03:25,820 --> 00:03:27,530
we exported it in here.

52
00:03:27,860 --> 00:03:31,580
And that's better designed than having the colors individually.

53
00:03:31,580 --> 00:03:31,870
Right.

54
00:03:33,260 --> 00:03:38,530
OK, so now let's finally see how this is going to look like on an actual device.

55
00:03:39,560 --> 00:03:45,110
And as you can see, it's looking pretty good to text here, ajin minutes, something that I don't like

56
00:03:45,110 --> 00:03:45,500
that much.

57
00:03:45,500 --> 00:03:47,270
So maybe we want to change that.

58
00:03:47,840 --> 00:03:50,070
But overall, I think this is cool.

59
00:03:50,090 --> 00:03:53,960
The button seems to work, or at least it appears to be a button.

60
00:03:54,490 --> 00:03:59,570
Of course, we don't have this empty text and neither this empty text appearing here because it's empty

61
00:03:59,570 --> 00:04:02,650
text and we need to pop related vehicle.

62
00:04:02,660 --> 00:04:04,820
And that's something that we're going to do in the next few days.

63
00:04:05,120 --> 00:04:07,730
But for now, let's just change the title here.

64
00:04:08,210 --> 00:04:15,310
And that's something that we have to change in an actual value in our strengths.

65
00:04:15,880 --> 00:04:22,970
So here on the values interests in the rest folder, we have this string's XML and in here we have the

66
00:04:22,970 --> 00:04:24,410
name of our app.

67
00:04:24,860 --> 00:04:27,200
So the app name is in minutes.

68
00:04:27,200 --> 00:04:28,790
And of course we can change that.

69
00:04:29,450 --> 00:04:35,090
We can do something like your age in minutes.

70
00:04:36,440 --> 00:04:43,430
So if we save that and we make a quick refresh, we will see that it says your age and minutes.

71
00:04:45,700 --> 00:04:52,150
All right, so I hope you managed to create this UI similarly to what you can see here, and if it's

72
00:04:52,150 --> 00:04:53,850
not exactly the same, that's totally fine.

73
00:04:53,860 --> 00:04:57,890
It doesn't have to be, but it's just important that you have all of the elements in there.

74
00:04:57,910 --> 00:05:00,560
And now we can finally start with the actual code.

75
00:05:00,580 --> 00:05:03,520
So with the calling code and our main activity.

76
00:05:03,820 --> 00:05:05,230
So see you there.