1 00:00:01,300 --> 00:00:01,900 Welcome back. 2 00:00:02,320 --> 00:00:06,280 And this video, we're going to implement this functionality that you see here, so first of all, a 3 00:00:06,280 --> 00:00:10,600 little green button with a calculator text underneath, and once I click on it, it will open up this 4 00:00:10,600 --> 00:00:15,700 new activity called calculate BMI or at least BMI calculator or something like that. 5 00:00:15,940 --> 00:00:22,030 I'm going to call this activity just BMI, because that's going to be descriptive enough for our purposes. 6 00:00:22,360 --> 00:00:23,530 So let's get started. 7 00:00:23,830 --> 00:00:28,720 Therefore, the first thing that I'm going to add are going to be a couple of UI elements here. 8 00:00:28,730 --> 00:00:31,810 So what I will do is I'm going to keep it simple. 9 00:00:31,810 --> 00:00:37,310 I'm just going to copy this frame layout that I had created already for our circle. 10 00:00:37,330 --> 00:00:40,570 Here, you see, because it's basically the same thing that we want to achieve, right? 11 00:00:40,960 --> 00:00:43,420 Want to have a circle with a text inside of it. 12 00:00:43,420 --> 00:00:47,890 The circle should be smaller and the background should be different, but the same while the rest is 13 00:00:47,890 --> 00:00:48,790 the same, basically. 14 00:00:49,150 --> 00:00:51,790 So let's give this a different name. 15 00:00:51,790 --> 00:00:55,690 Let's call this one f hell be am I? 16 00:00:56,380 --> 00:01:01,600 And then accordingly, this text view may double check. 17 00:01:02,110 --> 00:01:09,220 Well, let's leave it as it is actually and get rid of this constraint here and replace it with bottom 18 00:01:09,220 --> 00:01:11,980 to bottom of parent. 19 00:01:13,170 --> 00:01:16,590 And top tip, top of parents as well. 20 00:01:18,950 --> 00:01:20,810 And then we can make changes once we need them. 21 00:01:21,170 --> 00:01:28,720 So in our AFL BMI here, I want this to be underneath my AFL start. 22 00:01:29,160 --> 00:01:34,430 OK, so top to bottom of a false start, then it should be bottom to bottom off. 23 00:01:36,120 --> 00:01:37,050 The parent as well. 24 00:01:38,350 --> 00:01:43,960 OK, so should drag towards the boy, the parent, I want to have a different background color, so 25 00:01:43,960 --> 00:01:49,720 I'm just going to use my accent background, which I had created earlier, which is there's this circle, 26 00:01:49,720 --> 00:01:50,020 right? 27 00:01:50,170 --> 00:01:53,050 You recall it was this shape, just a green circle. 28 00:01:54,340 --> 00:01:54,750 All right. 29 00:01:54,760 --> 00:01:55,270 And now. 30 00:01:57,410 --> 00:02:02,930 We just need to change its size, so I'm going to go with 70 density pixels for width and height. 31 00:02:04,440 --> 00:02:10,020 In both directions and then to TextView inside of it will just display a different text, so it will 32 00:02:10,020 --> 00:02:11,460 just display BMI. 33 00:02:12,670 --> 00:02:13,050 OK. 34 00:02:13,080 --> 00:02:16,890 And then I need another text view underneath this frame layout. 35 00:02:16,890 --> 00:02:20,250 So if we look at it, this is the BMI that we're currently getting. 36 00:02:20,250 --> 00:02:23,790 Our actually that might change the color of my. 37 00:02:24,990 --> 00:02:26,280 BMI here as well. 38 00:02:26,310 --> 00:02:34,350 So if this text for you, I want to use white as the color, OK, because I think brown or gray in green 39 00:02:34,350 --> 00:02:35,340 doesn't look as good. 40 00:02:35,850 --> 00:02:41,640 So now let's add another texture underneath here, and I'm just going to say that it should be underneath 41 00:02:41,640 --> 00:02:43,470 the BMI frame lay out. 42 00:02:43,890 --> 00:02:46,200 It will have the text of calculator. 43 00:02:46,200 --> 00:02:49,230 We'll use the green color to ESP and we'll be bold. 44 00:02:49,230 --> 00:02:56,340 And by the way, we could of course, use this button size text default setting here as well if we wanted 45 00:02:56,340 --> 00:02:56,640 to. 46 00:02:57,630 --> 00:03:03,330 OK, and now let's look at the design and could see we have this BMI plus the calculator texture underneath. 47 00:03:03,900 --> 00:03:10,860 Now, once we click on this frame layout BMI, I want to start a new activity and I want to open this 48 00:03:11,370 --> 00:03:12,830 activity that we're going to create. 49 00:03:12,840 --> 00:03:15,480 Let me call it BMI activity. 50 00:03:17,850 --> 00:03:22,740 And let's call this activity BMI. 51 00:03:23,550 --> 00:03:26,400 This lay out activity on the score by. 52 00:03:29,510 --> 00:03:33,230 And now what do we want to have inside of this activity, BMI? 53 00:03:33,350 --> 00:03:35,720 Well, I just want to have the toolbar in there. 54 00:03:35,810 --> 00:03:36,310 OK. 55 00:03:36,590 --> 00:03:42,800 So let me go over to activity BMI and change it. 56 00:03:42,800 --> 00:03:45,770 So for now, I'm going to use a relative layout in here. 57 00:03:47,210 --> 00:03:49,280 We can change it later on if we need to. 58 00:03:49,820 --> 00:03:52,010 But the relative layout will be fine. 59 00:03:52,020 --> 00:03:55,130 The orientation should be vertical. 60 00:03:56,930 --> 00:04:00,890 And so thing is this layout is empty for now, right? 61 00:04:00,890 --> 00:04:05,270 The only thing that I want to have for now is going to be the toolbar and we will later see what we 62 00:04:05,270 --> 00:04:06,080 want to do with it. 63 00:04:06,350 --> 00:04:07,910 OK, so much parent. 64 00:04:08,330 --> 00:04:11,360 And the height should be the height of an action bar. 65 00:04:11,510 --> 00:04:22,040 OK, so here we need to use Android's colon 8r dart action bar size or slash action bar size, as we've 66 00:04:22,040 --> 00:04:22,670 done before. 67 00:04:23,000 --> 00:04:25,760 OK, and then I'm going to give it the white background. 68 00:04:27,920 --> 00:04:28,490 Like so. 69 00:04:29,720 --> 00:04:30,830 Now, let's just give it an ID. 70 00:04:31,580 --> 00:04:39,800 So here I.D. will be toolbar on the score, BMI on the score activity. 71 00:04:41,820 --> 00:04:42,480 OK. 72 00:04:44,170 --> 00:04:48,640 So that's our activity, BMI looks as of now. 73 00:04:49,210 --> 00:04:55,650 Let's see how the BMI activity will be set up, so here we need to use binding. 74 00:04:55,750 --> 00:05:02,110 So let's set up the activity binding here activity BMI binding for it to be used. 75 00:05:02,650 --> 00:05:07,330 So let's import it, then we need to set the binding object. 76 00:05:08,530 --> 00:05:15,040 So you're binding, initialize it with activity binding, inflate layout and Fletcher, as we have done 77 00:05:15,910 --> 00:05:19,420 before, then we need to set this to be the root of the binding. 78 00:05:19,420 --> 00:05:24,270 So binding that route, you see many things, they really just repeat and repeat. 79 00:05:24,280 --> 00:05:26,500 It's always the same when working with activities. 80 00:05:27,160 --> 00:05:30,400 And then I want to use the action bar, OK? 81 00:05:30,400 --> 00:05:34,090 And we have used action bar in the exercise activity, for example. 82 00:05:34,120 --> 00:05:36,640 So here, let's just copy this entire part here. 83 00:05:37,060 --> 00:05:38,890 There would be one minor change, however. 84 00:05:39,370 --> 00:05:46,600 So set up action bar will be supported and will need to bind the action bar. 85 00:05:47,380 --> 00:05:55,780 And therefore I will need to set support action bar like so use my binding object binding. 86 00:05:57,340 --> 00:06:01,030 To toolbar EMI activity and see that. 87 00:06:01,300 --> 00:06:03,310 Yeah, I forgot to copy this part of the year. 88 00:06:03,500 --> 00:06:04,090 OK, so. 89 00:06:05,590 --> 00:06:07,930 Now we need to set this stuff up and. 90 00:06:09,460 --> 00:06:14,320 Our tool bar, how do we call it, we call it to be my activity. 91 00:06:14,920 --> 00:06:17,740 And it should called on back pressed method. 92 00:06:20,020 --> 00:06:29,740 OK, now what you can do is you can change the name of the or the title of the sport action bar, OK, 93 00:06:29,740 --> 00:06:37,480 support action bar title is, for example, a property that you can overwrite and this is a Nullarbor. 94 00:06:37,490 --> 00:06:43,870 So we need to add the question mark here, and I could just say something like calculate BMI. 95 00:06:45,050 --> 00:06:50,900 And now let's see how this is gonna look like, so that shows you that you can overwrite properties 96 00:06:50,900 --> 00:06:57,350 of your support action bar directly in your calling code so that we are okay. 97 00:06:57,350 --> 00:06:59,180 Just so let's finish this. 98 00:06:59,540 --> 00:07:01,670 Let's go over to the BMI calculator. 99 00:07:01,670 --> 00:07:03,110 And of course, it doesn't happen yet. 100 00:07:03,620 --> 00:07:10,730 Let me go over to the main activity and actually make it possible so that we can click on this BMI button. 101 00:07:12,830 --> 00:07:19,040 What is internally, of course, not a real button, but instead is a frame layout. 102 00:07:19,160 --> 00:07:25,730 So here, instead of using a failed start, I'm going to use BMI and the intent should move us to the 103 00:07:25,730 --> 00:07:27,230 BMI activity. 104 00:07:27,860 --> 00:07:30,380 And that's pretty much it, I believe. 105 00:07:31,460 --> 00:07:32,810 So now let's run it again. 106 00:07:34,030 --> 00:07:39,460 You see, I just copied my hold on, Cliff, listen there for the effort start, and now I should be 107 00:07:39,460 --> 00:07:39,730 good. 108 00:07:39,910 --> 00:07:45,370 So taking on it sends us over to the calculate BMI activity. 109 00:07:45,940 --> 00:07:52,330 And now we can, of course, set up everything that we need in here, what we can then actually calculate 110 00:07:52,330 --> 00:07:56,680 our BMI based on our size or height, better said and weight. 111 00:07:56,980 --> 00:08:02,320 OK, so see you in the next video where we're going to prep the user interface for it.