1 00:00:00,360 --> 00:00:05,640 Hire everyone in this story and we're going to go ahead and we're going to design the user interface 2 00:00:05,700 --> 00:00:09,100 of activity underline at Underland martial art. 3 00:00:09,210 --> 00:00:09,770 OK. 4 00:00:09,990 --> 00:00:16,140 So just open the rest folder here and then open the URL for that and I will create this exemplify activity 5 00:00:16,140 --> 00:00:19,000 underline and underline Marshall Otherland art. 6 00:00:19,050 --> 00:00:19,470 OK. 7 00:00:19,680 --> 00:00:21,980 So this is our layout now. 8 00:00:22,110 --> 00:00:24,730 You can see that this is actually a constraint layout. 9 00:00:24,750 --> 00:00:31,800 If I switch to the text tap here you can see that we have actually a constraint out here as our initial 10 00:00:31,800 --> 00:00:33,520 tag initially out. 11 00:00:33,540 --> 00:00:35,280 So let's go to Design tab. 12 00:00:35,500 --> 00:00:39,620 Now let's write a text view into our constraints here. 13 00:00:39,660 --> 00:00:43,300 Inside this palette section just clicked on select the state's view. 14 00:00:43,410 --> 00:00:49,380 Just drag it here into our constraint out here and positioned it here according to these guidelines 15 00:00:49,380 --> 00:00:50,400 here. 16 00:00:50,460 --> 00:00:56,850 So now that I actually put these takes you here you can see that some constraints are automatically 17 00:00:56,850 --> 00:01:00,540 created for this actually for this takes you. 18 00:01:00,810 --> 00:01:02,670 So let me double click on this tab here. 19 00:01:02,770 --> 00:01:07,330 Activity Underland underline at underly should not hit in order to make this area wider. 20 00:01:07,560 --> 00:01:13,280 Let's open the Properties window so you can see that my property is in the here is inside this sidebar 21 00:01:13,290 --> 00:01:13,950 here. 22 00:01:14,010 --> 00:01:16,440 If I click on it now you can see that it is opened. 23 00:01:16,860 --> 00:01:22,110 And here you can see the height icon if I click on icon it is like it is actually hidden. 24 00:01:22,140 --> 00:01:25,040 If I click on properties again it is open. 25 00:01:25,230 --> 00:01:30,210 So now that we have this takes view you can see that we have a top constraint and the left constraint 26 00:01:30,210 --> 00:01:37,500 here so status takes you for the idea we don't have to specify an ID for the state's view because we 27 00:01:37,500 --> 00:01:43,410 don't want to interact with this view from our job because we can't see that play out with ease of content 28 00:01:43,660 --> 00:01:45,360 and heightens our content. 29 00:01:45,480 --> 00:01:48,660 Let's change the text of the state's view. 30 00:01:48,660 --> 00:01:58,000 So just typing here name or martial arts name martial art name calling and then person into Chanute 31 00:01:58,010 --> 00:01:59,350 keyboard. 32 00:01:59,350 --> 00:02:02,400 Now let's write another takes here. 33 00:02:02,420 --> 00:02:04,850 Below is martial art nameplates. 34 00:02:05,000 --> 00:02:10,060 So inside these pellets they should just drag the sticks and put it here below this martial art takes 35 00:02:10,100 --> 00:02:10,620 view. 36 00:02:10,820 --> 00:02:17,310 So let's create a top constraint to the bottom edge of this monster that takes you so look at this. 37 00:02:17,390 --> 00:02:23,720 Actually this little circle that is pulsating on the top of this takes you here just selected and track 38 00:02:23,720 --> 00:02:29,650 it straight here to the bottom edge of this Marshlack name takes you and I just release it. 39 00:02:29,690 --> 00:02:37,110 So for the top margin of the state's view let's assign the values 16 and then person into your keyboard. 40 00:02:37,130 --> 00:02:45,190 Now let's select the state's view for martial art for the text attribute here just step in here. 41 00:02:45,380 --> 00:02:52,760 Martial art martial art price call it and the person until key on your keyboard. 42 00:02:52,760 --> 00:02:53,640 And here. 43 00:02:53,780 --> 00:02:58,610 Let's actually drag and other takes you here into these constraints. 44 00:02:58,640 --> 00:03:00,630 And below it is martial art price. 45 00:03:00,650 --> 00:03:06,030 So inside this palette section select all and then just select this takes you and distracted here. 46 00:03:06,200 --> 00:03:08,730 Below this martial art price and really sets. 47 00:03:09,200 --> 00:03:15,250 So let's create a constraint from the top edge of the text view to the bottom edge of this martial art 48 00:03:15,260 --> 00:03:15,940 place. 49 00:03:15,980 --> 00:03:18,350 So look at this little circle that is pulsating. 50 00:03:18,410 --> 00:03:24,830 Just create a constraint to the bottom edge of this Marshall of price and for the top margin of this 51 00:03:24,830 --> 00:03:28,200 text view here is undervalues 16 here. 52 00:03:28,310 --> 00:03:30,220 And the president of China keyboard. 53 00:03:30,560 --> 00:03:31,550 So sad to say. 54 00:03:31,580 --> 00:03:38,150 And for the text value just typing here Marshall of color color and then person Cheniere keyboard. 55 00:03:38,150 --> 00:03:42,150 So now we have the name Marshall Price Monserrat color. 56 00:03:42,260 --> 00:03:47,880 So let's add some 80 takes us into this constraints that lay out here. 57 00:03:47,900 --> 00:03:54,680 So now you can see that inside this pallet section we have this text click on it and we have this plain 58 00:03:54,680 --> 00:03:55,300 text. 59 00:03:55,520 --> 00:03:59,290 Just drag it and put it here beside this martial arts name. 60 00:03:59,590 --> 00:04:04,570 OK let's just try and put it beside this martial art name here. 61 00:04:04,580 --> 00:04:07,790 Now you can see that I actually are right. 62 00:04:07,790 --> 00:04:11,580 Constraint is created automatically to the right edge of the screen here. 63 00:04:11,990 --> 00:04:17,010 Let's create a constraint to the top edge of the screen. 64 00:04:17,030 --> 00:04:17,690 So let's. 65 00:04:17,700 --> 00:04:23,890 Actually you can see that we have we can create this constraint here to the top edge here. 66 00:04:23,990 --> 00:04:28,170 So just create this constraint and release it. 67 00:04:28,190 --> 00:04:35,300 So a constraint is created to the top edge here so we can assign the values 16 but let's assign the 68 00:04:35,300 --> 00:04:39,170 value number 10 for the top margin of this editrix 10. 69 00:04:39,320 --> 00:04:41,030 And I think that's good. 70 00:04:41,030 --> 00:04:53,000 So now that we have this takes here let's say elected and for the ID just in here EDT EDT NE and N person 71 00:04:53,020 --> 00:04:56,470 enter on your keyboard for the ticks attribute here. 72 00:04:56,480 --> 00:04:58,940 Just delete this value. 73 00:04:59,420 --> 00:05:04,850 And we don't have to provide a hint value for this edit text because we have actually a text view here 74 00:05:04,880 --> 00:05:13,190 that specifies what should be entered in this text so we do not want to actually provide ahint attribute 75 00:05:13,460 --> 00:05:15,290 value for this added text. 76 00:05:15,560 --> 00:05:18,890 So let's drag another edit text here. 77 00:05:19,110 --> 00:05:22,120 So now let's hear. 78 00:05:22,120 --> 00:05:29,060 Inside Politics is just going to come and drag this plain text and put it here beside this martial Marshall 79 00:05:29,140 --> 00:05:39,260 Price here so you can see that we don't have enough space to actually align these texts and this is 80 00:05:39,280 --> 00:05:40,360 edit text. 81 00:05:40,380 --> 00:05:45,780 So for the small Shalott pricier let's increase the top margin of this marketplace place. 82 00:05:45,780 --> 00:05:47,260 Let's change it to 50. 83 00:05:48,550 --> 00:05:50,470 Now if it could scoot right. 84 00:05:50,770 --> 00:05:52,700 So an acetate is a martial art. 85 00:05:52,730 --> 00:05:54,300 Actually it is a little easier. 86 00:05:54,400 --> 00:05:58,070 There is up the constraints to the right of the screen right. 87 00:05:58,270 --> 00:06:01,130 Let's create a constraint to the bottom edge of this. 88 00:06:01,130 --> 00:06:06,050 It takes years of this top it it takes so we could just let a circle that is pulsating. 89 00:06:06,190 --> 00:06:10,570 Create a constraint to the bottom edge of this. 90 00:06:10,570 --> 00:06:12,200 Actually this Ed.. 91 00:06:12,200 --> 00:06:16,560 So let's actually like it here are the bits at the bottom. 92 00:06:16,580 --> 00:06:19,360 Let me create this constraint here to the bottom of this. 93 00:06:19,360 --> 00:06:26,720 It takes now I think that's good but let's also select this taste view here. 94 00:06:26,720 --> 00:06:30,850 This modular place this view lets increase the top management to 40. 95 00:06:31,190 --> 00:06:34,030 Let's change it to actually 45. 96 00:06:36,410 --> 00:06:37,940 Now I think it's good. 97 00:06:38,020 --> 00:06:43,130 So now that we have this takes here and selectees it takes. 98 00:06:43,280 --> 00:06:49,880 And for the idea just happened here it is the price and then person in the chair on your keyboard. 99 00:06:50,410 --> 00:06:54,120 Now the latest as it takes for the text attribute here. 100 00:06:54,220 --> 00:06:57,150 Just delete this value and then press on until your keyboard. 101 00:06:57,550 --> 00:07:01,100 So now we have this final actually text here. 102 00:07:01,150 --> 00:07:11,350 So stick to it and for the top Margene here let's assign the value 45 here 45 and that person you keyboard. 103 00:07:11,360 --> 00:07:19,150 So here now that we have this text here let's try and edit text beside these moderate color. 104 00:07:19,150 --> 00:07:20,140 Let's put it here. 105 00:07:20,150 --> 00:07:26,390 So just inside this palette section click and text and drive just plain text here and put it beside 106 00:07:26,390 --> 00:07:35,140 this actually takes view so you can see that are constraints to the right of the screen is created here 107 00:07:35,560 --> 00:07:39,850 from the right age of the text editor just to the right of this screen. 108 00:07:40,120 --> 00:07:46,590 So now let's select this edit takes and let's create a constraint to the bottom edge of these editors. 109 00:07:46,590 --> 00:07:48,040 Yet is it is the price. 110 00:07:48,040 --> 00:07:50,660 So look at this little circle that is pulsating. 111 00:07:50,890 --> 00:07:53,280 So just create a constraint to the bottom of this. 112 00:07:53,280 --> 00:07:55,050 It takes. 113 00:07:55,110 --> 00:08:01,460 Now let's actually for example look at this early this year the top management is eight. 114 00:08:01,460 --> 00:08:02,420 Now let's look at this. 115 00:08:02,420 --> 00:08:07,850 It takes this top margin is 7 so let's change you to number eight. 116 00:08:07,860 --> 00:08:09,120 Now I think it's good. 117 00:08:09,510 --> 00:08:11,240 So select is it it takes. 118 00:08:11,260 --> 00:08:19,700 And for the id attribute here just sitting here EDT color and the person entelechy on your keyboard 119 00:08:20,120 --> 00:08:21,600 selects the text. 120 00:08:21,780 --> 00:08:27,770 And here for the text attribute this actually isn't about you just delete this value and then press 121 00:08:27,770 --> 00:08:29,990 on until your keyboard. 122 00:08:30,000 --> 00:08:38,670 So now we have this it takes this this one and this one but I feel it's better to actually increase 123 00:08:38,670 --> 00:08:42,680 the top margin of this editor so that it is aligned better. 124 00:08:42,720 --> 00:08:48,000 So is all it takes for the top management it's assigned value number 10. 125 00:08:48,040 --> 00:08:53,600 Now I think it's good that increased to 12 now it's better. 126 00:08:53,870 --> 00:08:54,370 OK. 127 00:08:54,780 --> 00:08:59,610 So now everything is fine here now you need actually two more buttons. 128 00:08:59,610 --> 00:09:06,780 So inside this palette section just click on all and then select a spot in here and drag it here into 129 00:09:06,780 --> 00:09:12,230 this consistently out and put it here below these Eadie takes and these takes abuse. 130 00:09:12,450 --> 00:09:20,030 So just put it here now you can see that no constraints are actually created for this button here. 131 00:09:20,310 --> 00:09:23,130 So let's create a constraint to the bottom of this. 132 00:09:23,160 --> 00:09:23,780 It takes here. 133 00:09:23,790 --> 00:09:29,910 So just look at this little circle that is pulsating on the top edge of this button that lets selected 134 00:09:29,940 --> 00:09:34,650 and just create a kind of strength to the bottom edge of this text. 135 00:09:34,650 --> 00:09:40,850 Now for the top margin here let's assign the value actually 40. 136 00:09:41,070 --> 00:09:42,880 And then press on into the your keyboard. 137 00:09:43,650 --> 00:09:50,970 And here I want this button to actually take the entire constraint here the entire width of this Panteley 138 00:09:50,970 --> 00:09:51,440 out. 139 00:09:51,690 --> 00:09:53,310 So just select the spot. 140 00:09:53,340 --> 00:09:59,760 And for the size constraint of the Viets here just click on it and change it to match constraints. 141 00:09:59,760 --> 00:10:07,220 Here Right Now let's create a constraint to the right edge of the actually screen. 142 00:10:07,260 --> 00:10:11,760 So look at this little circle that is pulsating here on the right edge of the spot and just create a 143 00:10:11,760 --> 00:10:14,030 constraint to the right of the screen. 144 00:10:15,480 --> 00:10:18,660 And let's create a constraint to the left edge of the screen. 145 00:10:18,660 --> 00:10:23,400 So just look at this little circle that is pulsating on the right on the left edge of this button. 146 00:10:23,430 --> 00:10:29,140 So let's create a constraint to the left edge of the screen here and just release it. 147 00:10:29,160 --> 00:10:32,710 So let's pro-white an idea for the spot and select the spot. 148 00:10:32,760 --> 00:10:34,830 And for the ID attribute just like in here. 149 00:10:34,830 --> 00:10:42,140 Pythian at martial art and then press on until you and your keyboard select is spot on. 150 00:10:42,140 --> 00:10:49,650 And for the text attribute here just step in here actually at martial arts and then present intention 151 00:10:49,650 --> 00:10:50,860 or keyboard. 152 00:10:50,930 --> 00:10:55,110 So let's strike another button here below the spot in here. 153 00:10:55,280 --> 00:10:57,020 So look at this palette section. 154 00:10:57,140 --> 00:11:02,970 Just click on all and then select button here and just track it and put it here. 155 00:11:03,000 --> 00:11:05,650 Below is want monster look at it but in here. 156 00:11:05,900 --> 00:11:07,380 So automatically it is put here. 157 00:11:07,380 --> 00:11:11,430 So let's drag it and put it here below is at Marshall button. 158 00:11:11,510 --> 00:11:17,100 So you can see our constraint to the right edge of the screen and other constraints to the left edge 159 00:11:17,090 --> 00:11:19,490 of the screen is created here for the spot. 160 00:11:19,820 --> 00:11:25,530 So again I want the Spartan to take the entire width of the parent lay out which is this constraint 161 00:11:25,540 --> 00:11:25,950 there. 162 00:11:26,060 --> 00:11:32,030 First of all let's create a constraint from the top edge of this pattern to the bottom edge of this 163 00:11:32,070 --> 00:11:33,390 at martial arts button. 164 00:11:33,620 --> 00:11:39,050 So look at this circle that is called pulsating just tragic kind of strange to the bottom edge of this 165 00:11:39,490 --> 00:11:41,730 at Marshlack but in here. 166 00:11:42,050 --> 00:11:44,820 So the top margin is eight and it is fine. 167 00:11:44,840 --> 00:11:46,700 So now select the spot. 168 00:11:46,730 --> 00:11:50,720 And that's actually change the size constraint of the Viets of this button. 169 00:11:50,720 --> 00:11:53,950 So look at this here the size constraints for the video. 170 00:11:53,960 --> 00:11:59,780 Just click on it and change it to match constraints so that you can see that the spot is taking the 171 00:11:59,780 --> 00:12:01,710 entire width of the parent. 172 00:12:01,880 --> 00:12:04,370 But there is actually some extra space. 173 00:12:04,400 --> 00:12:06,220 It is not taking the entire week here. 174 00:12:06,290 --> 00:12:10,450 You can see that here but that's because of the margins. 175 00:12:10,450 --> 00:12:10,620 OK. 176 00:12:10,640 --> 00:12:14,330 If I select the spot in here you can see that the right margin and the left margin is 8. 177 00:12:14,330 --> 00:12:20,860 If I select a spot in here you can see that the right margin and the left margin here is zero. 178 00:12:21,230 --> 00:12:27,640 So if you want to I select the spot in and for the right margin here I can assign a value 8 and this 179 00:12:27,720 --> 00:12:28,030 button. 180 00:12:28,040 --> 00:12:33,040 And for the late eight I should be for the left margin that's assigned the value 8. 181 00:12:33,190 --> 00:12:36,840 So I notice that margin is the outer space. 182 00:12:36,850 --> 00:12:37,330 OK. 183 00:12:37,630 --> 00:12:43,750 Managing attributes specifies the outer space of our user interface component which currently is button. 184 00:12:43,870 --> 00:12:48,640 So you can that's what you can see this distance between this button and the right edge of the screen 185 00:12:48,730 --> 00:12:49,970 of the left. 186 00:12:50,200 --> 00:12:57,760 So select a spot in and for the idea just they've been here between or go back between and go back and 187 00:12:57,760 --> 00:13:02,680 that person interchange of keyboard for the text distributed in here patch. 188 00:13:02,950 --> 00:13:04,910 And that person is a key on your keyboard. 189 00:13:04,930 --> 00:13:06,250 That's it. 190 00:13:06,250 --> 00:13:11,190 So now that we have this user interface components here on INSIDE our layout. 191 00:13:11,290 --> 00:13:18,100 Now it's time to go to our martial art activity class and declare and create these objects because we 192 00:13:18,100 --> 00:13:20,080 want to interact with some of these objects. 193 00:13:20,080 --> 00:13:23,540 We want to interact with these texts and these buttons. 194 00:13:23,620 --> 00:13:31,150 So let's go to at motional actually with the class and here in this class I can actually declare some 195 00:13:31,240 --> 00:13:39,820 objects the first one is going to be edit text and the first one is going to be it the name come up. 196 00:13:40,140 --> 00:13:42,960 So what is that we can create. 197 00:13:42,960 --> 00:13:46,870 We can actually declare are martial art objects in one line. 198 00:13:47,010 --> 00:13:51,300 OK we can declare this for example object of type. 199 00:13:51,330 --> 00:13:54,010 Eddie takes this value as it takes in one line. 200 00:13:54,120 --> 00:14:00,720 So we have one for the it is the name another for another one for the idiotcy actually price. 201 00:14:00,960 --> 00:14:01,600 Come. 202 00:14:01,900 --> 00:14:02,920 It is easy. 203 00:14:03,270 --> 00:14:06,000 And finally it is in color right semicolon. 204 00:14:06,270 --> 00:14:10,610 So all these variables all these everybody else are of type in the text. 205 00:14:10,740 --> 00:14:26,500 So we only we also have a button so button PTEN at martial arts martial arts come to PTEN Bache semicolon. 206 00:14:26,500 --> 00:14:31,660 So Enceladus creates Meffert led me to this line of Cahir. 207 00:14:31,740 --> 00:14:33,630 So let me create some space here. 208 00:14:33,630 --> 00:14:39,620 So first of all we want to initialize our names so it has the name assignment operator. 209 00:14:39,810 --> 00:14:50,800 Let's test this object to an object find view by ID or that Id that ID that Itay name semi-colon Itay 210 00:14:50,910 --> 00:14:55,250 price Editta price assignment operator. 211 00:14:55,280 --> 00:15:02,360 Let's test this object to an object find view by id r r that ID does it Itay price. 212 00:15:02,420 --> 00:15:06,700 EDT price semi-colon. 213 00:15:07,070 --> 00:15:09,530 And finally we have this EDT color. 214 00:15:09,660 --> 00:15:10,330 OK. 215 00:15:10,520 --> 00:15:18,250 Assignment operator lets get this object and it takes object find view by id r that ID does it Itay 216 00:15:18,290 --> 00:15:21,650 color semicolon. 217 00:15:21,710 --> 00:15:28,580 And we also have these button so I can say PTEN at martial art assignment operator let's cast this object 218 00:15:28,580 --> 00:15:37,090 to a button object find view by ID or that ID that PTEN at martial arts semicolon. 219 00:15:37,460 --> 00:15:43,000 And finally PTEN patch assignment operator let's cast this object to our button object. 220 00:15:43,880 --> 00:15:53,260 Find view by id find by ID or that Id that PTEN back between go back semicolon. 221 00:15:53,520 --> 00:15:54,210 So that's it. 222 00:15:54,300 --> 00:15:57,120 We actually declared and initialized our objects here.