1 00:00:00,420 --> 00:00:01,230 Welcome back. 2 00:00:01,380 --> 00:00:06,410 And this video we are going to start with is BMI calculator functionality. 3 00:00:06,420 --> 00:00:10,500 And as you can see, there is a little button here currently centered, but later on, we will have 4 00:00:10,500 --> 00:00:13,890 multiple buttons here next to each other for now, just two. 5 00:00:13,890 --> 00:00:15,980 But still, you could extend it any time. 6 00:00:16,710 --> 00:00:23,430 But as you can see here, we have this BMI button, and once we click on it, this window opens up. 7 00:00:23,430 --> 00:00:28,020 And here we will then later do the calculations of the BMI. 8 00:00:28,030 --> 00:00:30,840 So we will need to set up a lot of things in here. 9 00:00:30,840 --> 00:00:32,460 And that's what we're going to do later on. 10 00:00:33,630 --> 00:00:37,020 But for now, let's just start with what we can see here, so we need this. 11 00:00:38,090 --> 00:00:46,530 But in here at the bottom bottom, the BMI calculator and what I need to do, of course, is to adjust 12 00:00:46,530 --> 00:00:55,460 my activity, Maine, and that will be inside of my project here, resources, layout, activity, Maine, 13 00:00:56,010 --> 00:00:58,920 because I need to add another button here at the bottom. 14 00:00:58,920 --> 00:00:59,160 Right. 15 00:00:59,190 --> 00:01:08,610 So in order to do so, I'm just going to add a linear layout just underneath the linear layout that 16 00:01:08,610 --> 00:01:09,780 we had in here. 17 00:01:13,480 --> 00:01:15,730 So I'm going to put it in here. 18 00:01:19,500 --> 00:01:26,910 Now, this linear layout is going to be just underneath the linear layout where we had our start, let's 19 00:01:26,910 --> 00:01:30,160 look at it, we can see that this is how it's going to look. 20 00:01:30,180 --> 00:01:32,130 So we create this whole area here. 21 00:01:32,140 --> 00:01:37,560 This is my linear layout here at the bottom, and it takes the whole available space towards the top 22 00:01:37,560 --> 00:01:38,280 and the right. 23 00:01:38,970 --> 00:01:39,950 So let's look at it. 24 00:01:40,680 --> 00:01:43,020 We can see that it's this one here. 25 00:01:43,650 --> 00:01:46,920 It matches the parent in with and the parent in height. 26 00:01:46,920 --> 00:01:48,420 So it takes the whole space. 27 00:01:48,420 --> 00:01:51,120 It's centered and the orientation is vertical. 28 00:01:51,120 --> 00:01:53,780 So things will be on top of each other. 29 00:01:54,060 --> 00:02:02,790 And then there I also have another linear layout, which is for now my BMI linear layout, which contains 30 00:02:02,790 --> 00:02:11,070 the text view, which is says BMI, and it has a background which is our item, circular color accent. 31 00:02:12,200 --> 00:02:19,010 Background, OK, so it's this file that we created, which is a shape that is oval and has a solid 32 00:02:19,520 --> 00:02:20,950 background color, which is green. 33 00:02:20,990 --> 00:02:25,700 So it's just a green circle and that's exactly what we have there. 34 00:02:25,850 --> 00:02:30,170 So you can see here at the left hand side, it's a green circle. 35 00:02:30,320 --> 00:02:31,760 That's this big circle. 36 00:02:31,760 --> 00:02:34,340 On top of that, we have a text. 37 00:02:34,520 --> 00:02:42,440 So we have this TextView saying by the text, color is white, the text size is 22, and it only wraps 38 00:02:42,440 --> 00:02:42,890 its content. 39 00:02:42,900 --> 00:02:47,360 So it only takes as much space as it really requires the Texas head to Bolt. 40 00:02:47,570 --> 00:02:54,650 And underneath that, I have another text view, which is then just saying, call you later. 41 00:02:55,410 --> 00:02:55,870 All right. 42 00:02:55,880 --> 00:03:00,230 I have some margin towards the top, the height and with our content. 43 00:03:00,230 --> 00:03:03,620 And I have this green color as the text size. 44 00:03:03,620 --> 00:03:07,940 So you can see here, this is this calculator text that we have here at the bottom. 45 00:03:09,230 --> 00:03:14,030 All right, the next thing we need to do is to set up another activity, because I want this to open 46 00:03:14,030 --> 00:03:16,100 up and a different activity. 47 00:03:16,130 --> 00:03:21,510 So let's go ahead and create a new activity and it's going to be an empty activity. 48 00:03:21,530 --> 00:03:24,710 I'm going to call this one VMI activity. 49 00:03:26,780 --> 00:03:34,130 And then instead of this being my activity, well, the first thing we need to look at is how we design 50 00:03:34,130 --> 00:03:37,280 it and I'm going to design it the same way I did for the other one. 51 00:03:37,300 --> 00:03:47,570 So I'm also going to set the orientation to portrait and the theme to be in a combat light action. 52 00:03:48,620 --> 00:03:53,220 No action bar and here I'm going to shorten the coat. 53 00:03:53,500 --> 00:03:57,030 OK, so that is step number two and three. 54 00:03:57,140 --> 00:04:04,760 Now, let's go ahead to the next step, which is to create a activity BMI layout. 55 00:04:04,940 --> 00:04:10,070 So we have this activity on the scoreboard, on the score and on the score. 56 00:04:10,370 --> 00:04:12,590 So maybe it's not the best name. 57 00:04:12,840 --> 00:04:15,830 So you could change that if you want to on the score BMI. 58 00:04:16,250 --> 00:04:17,959 And I'm just going to leave it for now. 59 00:04:17,990 --> 00:04:20,950 I get this and what I want to add in here. 60 00:04:21,290 --> 00:04:28,310 So what I want to put in there is a toolbar and I'm going to make this whole thing, this constraint 61 00:04:28,310 --> 00:04:29,950 layout, a relative layout. 62 00:04:29,960 --> 00:04:33,370 So I want to put stuff relatively there. 63 00:04:33,980 --> 00:04:37,100 So I'm going to use a relative layout here. 64 00:04:38,680 --> 00:04:43,210 And as you can see now, the arrow disappeared, so now it works to have a toolbar here. 65 00:04:43,450 --> 00:04:46,600 As you can see, the orientation should be vertical. 66 00:04:48,770 --> 00:04:50,870 Because stuff should be on top of each other. 67 00:04:51,710 --> 00:04:54,890 Next, I want to set up the BMI activity itself. 68 00:04:54,890 --> 00:04:59,300 So inside of this uncreate method, I'm going to prepare the action bar. 69 00:04:59,570 --> 00:05:10,060 So let's create a support action bar here, tool bar on the score, BMI on the score activity. 70 00:05:10,550 --> 00:05:13,040 And then I'm going to create an action bar. 71 00:05:13,070 --> 00:05:13,460 So. 72 00:05:13,460 --> 00:05:15,020 Well, action bar. 73 00:05:18,240 --> 00:05:21,210 Which will the Support Action Bar? 74 00:05:22,430 --> 00:05:27,980 And if the bar isn't empty, so if it exists, then I want to. 75 00:05:30,220 --> 00:05:33,040 Set something up, so I'm going to say. 76 00:05:35,340 --> 00:05:41,520 The action bar should be set to set display home has enabled. 77 00:05:42,570 --> 00:05:43,380 To true. 78 00:05:45,180 --> 00:05:51,660 This will set the back button, so now we will have a back button on this action bar and then I set 79 00:05:51,660 --> 00:05:52,180 the title. 80 00:05:52,800 --> 00:05:54,840 So I want to have the title of. 81 00:05:56,900 --> 00:05:58,040 Calculate BMI. 82 00:06:00,690 --> 00:06:06,690 All right, so this sets the title of the action bar, and then the next thing I want to do is to add 83 00:06:06,690 --> 00:06:10,020 an on press event once we click on the back button. 84 00:06:10,470 --> 00:06:20,510 So Toolbar EMI activity should be set navigation on Click Listener and it's going to call on back press. 85 00:06:20,520 --> 00:06:26,290 So the same functionality that you would expect when you press the button on your phone. 86 00:06:26,580 --> 00:06:30,350 OK, not just on the top left on the navigation bar, watches the back button on your phone. 87 00:06:30,720 --> 00:06:33,240 It's going to do the same thing now here. 88 00:06:34,180 --> 00:06:40,480 This site navigation is called on the toolbar activity, if you were wondering, that's this toolbar 89 00:06:40,720 --> 00:06:41,500 that I created. 90 00:06:41,510 --> 00:06:44,370 So it has this idea called toolbar PMI activity. 91 00:06:44,590 --> 00:06:46,040 That's how I can access it. 92 00:06:46,540 --> 00:06:50,400 OK, now there's one thing left, of course, and that is to get to this activity. 93 00:06:50,560 --> 00:06:55,270 And in order to get there, we, of course, need to add something in our main activity. 94 00:06:55,390 --> 00:06:57,280 So if we look at our. 95 00:06:58,210 --> 00:07:02,290 Main activity we saw earlier in our. 96 00:07:03,800 --> 00:07:06,170 Layouts that we added this little. 97 00:07:08,210 --> 00:07:10,310 Button, which we called. 98 00:07:11,550 --> 00:07:16,800 LLB, so it's not the button, it's a linear layout, but it's going to behave like a button. 99 00:07:16,810 --> 00:07:22,200 So I'm just going to say, once we click on LLB, my then we should go to the beach, my activity. 100 00:07:22,920 --> 00:07:27,090 OK, so let's go back to our main activity and do that. 101 00:07:29,140 --> 00:07:31,750 And I'll be am I? 102 00:07:32,880 --> 00:07:34,140 Set on Click Listener. 103 00:07:35,690 --> 00:07:40,190 And in there, I'm just going to create the new intent, so I'm going to do the same thing as we had 104 00:07:40,190 --> 00:07:46,650 here, only that now the class that we want to go to is our BMI activity, OK? 105 00:07:46,670 --> 00:07:47,890 And that should already be it. 106 00:07:47,930 --> 00:07:50,840 That's enough for us to test the application. 107 00:07:52,120 --> 00:07:53,410 OK, so there we are. 108 00:07:53,560 --> 00:08:00,910 Let's press on BMI and we can see we get to this other screen, calculate BMI is the title, which is 109 00:08:00,910 --> 00:08:02,070 exactly what I wanted. 110 00:08:02,320 --> 00:08:05,560 And then, of course, we need to create the design here. 111 00:08:05,560 --> 00:08:11,480 And that will be a little more complicated because we need to take two things into consideration. 112 00:08:11,500 --> 00:08:19,030 The calculation is done differently for the US as it is done or than it is done for other countries 113 00:08:19,030 --> 00:08:20,390 which use the metric system. 114 00:08:20,410 --> 00:08:29,830 So when you weigh yourself in pounds and you measure your height and feet and and in inches, then you 115 00:08:30,220 --> 00:08:36,970 need another calculation, also another UI then when using the metric system and that's what we will 116 00:08:36,970 --> 00:08:37,600 need to set up. 117 00:08:37,600 --> 00:08:39,100 So see you in the next video.