1 00:00:04,130 --> 00:00:06,960 In this video we're going to create the 2 00:00:06,960 --> 00:00:10,200 last layout we need to use for our tasks. 3 00:00:10,200 --> 00:00:12,420 We've got the layouts that'll just 4 00:00:12,420 --> 00:00:14,969 display the list of tasks in a Recycler 5 00:00:14,969 --> 00:00:16,920 View, but at the moment there's no way to 6 00:00:16,920 --> 00:00:19,859 create new tasks. So what we need is a 7 00:00:19,859 --> 00:00:21,869 layout called fragment_ 8 00:00:21,869 --> 00:00:23,640 add_edit. So don't worry 9 00:00:23,640 --> 00:00:24,960 about the strange names starting with 10 00:00:24,960 --> 00:00:26,939 fragment at the moment. The reason for 11 00:00:26,939 --> 00:00:29,760 that will become clear later. The layout's 12 00:00:29,760 --> 00:00:31,650 going to contain three EditText widgets, 13 00:00:31,650 --> 00:00:33,480 one below the other, and there's also 14 00:00:33,480 --> 00:00:35,340 going to be a button as well. So why am 15 00:00:35,340 --> 00:00:36,120 I telling you this? 16 00:00:36,120 --> 00:00:37,620 Well you've guessed it - this video's 17 00:00:37,620 --> 00:00:40,980 starting off with a challenge. Alright, so 18 00:00:40,980 --> 00:00:42,210 we want to create a new layout, as I 19 00:00:42,210 --> 00:00:43,800 mentioned, called fragment_ 20 00:00:43,800 --> 00:00:46,590 add_edit that contains three 21 00:00:46,590 --> 00:00:48,300 EditText widgets, one below the other 22 00:00:48,300 --> 00:00:50,250 and a button below them. 23 00:00:50,250 --> 00:00:53,250 Now the IDs for the EditTexts are, in 24 00:00:53,250 --> 00:00:54,239 order from top to bottom; 25 00:00:54,239 --> 00:00:56,280 first one, addedit_name, 26 00:00:56,280 --> 00:00:58,980 then addedit_description, 27 00:00:58,980 --> 00:01:01,050 then addedit_sortorder, 28 00:01:01,050 --> 00:01:03,539 and the ID for the Button should be add 29 00:01:03,539 --> 00:01:06,510 edit_save. Now the first two 30 00:01:06,510 --> 00:01:08,580 EditText widgets should fill the full 31 00:01:08,580 --> 00:01:10,950 width of the screen, and automatically 32 00:01:10,950 --> 00:01:13,979 extend vertically to accommodate several 33 00:01:13,979 --> 00:01:16,170 lines of text. Now there's no need for 34 00:01:16,170 --> 00:01:17,700 the sort order widget to extend 35 00:01:17,700 --> 00:01:20,009 vertically, as it'll only accept numbers, 36 00:01:20,009 --> 00:01:22,110 but it can fill the full width of the 37 00:01:22,110 --> 00:01:24,509 screen. You may want to google the Edit 38 00:01:24,509 --> 00:01:27,090 TextinputType property, to find out 39 00:01:27,090 --> 00:01:28,770 what the effects of the various settings 40 00:01:28,770 --> 00:01:31,259 are. So if you add hints to the widgets 41 00:01:31,259 --> 00:01:33,299 using the hint property, then I suggest 42 00:01:33,299 --> 00:01:35,640 you store any strings for that property 43 00:01:35,640 --> 00:01:38,130 as String Resources rather than hard- 44 00:01:38,130 --> 00:01:40,290 coding them into the layout. The names of 45 00:01:40,290 --> 00:01:42,180 your String Resources aren't important, 46 00:01:42,180 --> 00:01:44,040 but you should try to be consistent in 47 00:01:44,040 --> 00:01:46,439 naming things. In fact, all text should be 48 00:01:46,439 --> 00:01:48,780 stored in String Resources, rather than 49 00:01:48,780 --> 00:01:51,750 hard-coded into the layout. Any property 50 00:01:51,750 --> 00:01:54,030 not specified above can be left at its 51 00:01:54,030 --> 00:01:56,820 default value, except for the maxLength 52 00:01:56,820 --> 00:01:59,070 property. I'll be explaining why shortly, 53 00:01:59,070 --> 00:02:01,020 but the EditText widgets need the 54 00:02:01,020 --> 00:02:03,329 following values for maxLength; so add 55 00:02:03,329 --> 00:02:06,119 edit_name - maxLength 64, add 56 00:02:06,119 --> 00:02:08,220 edit_description - maxLength 57 00:02:08,220 --> 00:02:10,770 256, then addedit_sortorder - 58 00:02:10,770 --> 00:02:12,080 maxLength of 9. 59 00:02:12,080 --> 00:02:14,210 Now don't be tempted to do anything 60 00:02:14,210 --> 00:02:16,070 fancy with the layout in landscape mode. 61 00:02:16,070 --> 00:02:18,650 If you remember from the demo of the app 62 00:02:18,650 --> 00:02:21,200 earlier, we've got plans for the extra 63 00:02:21,200 --> 00:02:22,730 screen width at landscape mode that 64 00:02:22,730 --> 00:02:24,860 tablets provide. Now, of course, your 65 00:02:24,860 --> 00:02:26,570 layout will fill the width of the screen 66 00:02:26,570 --> 00:02:28,520 in landscape but that's fine. What I 67 00:02:28,520 --> 00:02:30,110 don't want you to do is place things 68 00:02:30,110 --> 00:02:32,060 next to each other, so that your layout 69 00:02:32,060 --> 00:02:33,980 relies on the full width in landscape. 70 00:02:33,980 --> 00:02:36,530 Now I should maybe include an image or 71 00:02:36,530 --> 00:02:38,930 diagram of the expected layout, but quite 72 00:02:38,930 --> 00:02:40,910 often you'll find that the specs you get 73 00:02:40,910 --> 00:02:43,820 from your customer are pretty vague. That 74 00:02:43,820 --> 00:02:45,290 can be a good thing because it gives you 75 00:02:45,290 --> 00:02:47,440 a lot of freedom when designing your app. 76 00:02:47,440 --> 00:02:50,090 Sometimes the specification will come 77 00:02:50,090 --> 00:02:52,160 from programmers working on other parts 78 00:02:52,160 --> 00:02:54,290 of the system, and they won't care what 79 00:02:54,290 --> 00:02:56,120 you produce as long as it actually works 80 00:02:56,120 --> 00:02:58,310 with their system, or their part of the 81 00:02:58,310 --> 00:03:00,680 system. So if the layout you produce 82 00:03:00,680 --> 00:03:02,990 meets the above criteria, then it should 83 00:03:02,990 --> 00:03:05,630 work fine in this app. Alright so that's 84 00:03:05,630 --> 00:03:07,280 the challenge. Pause the video now and 85 00:03:07,280 --> 00:03:08,480 see if you can complete that challenge, 86 00:03:08,480 --> 00:03:10,160 and I'll see you when you get back and 87 00:03:10,160 --> 00:03:12,140 we'll go through the solution. Pause the 88 00:03:12,140 --> 00:03:16,850 video now. Alright so welcome back. So 89 00:03:16,850 --> 00:03:18,980 from my solution to the challenge I'm 90 00:03:18,980 --> 00:03:21,680 going to use a linear layout. Now if you 91 00:03:21,680 --> 00:03:23,180 haven't used the linear layout but you 92 00:03:23,180 --> 00:03:25,160 perhaps used the constraint layout 93 00:03:25,160 --> 00:03:27,620 then that's fine. The important thing 94 00:03:27,620 --> 00:03:29,300 here is still that your layout allows 95 00:03:29,300 --> 00:03:31,610 the data to be entered, and it has the 96 00:03:31,610 --> 00:03:35,540 correct IDs. Now speaking of IDs, normally 97 00:03:35,540 --> 00:03:37,250 you'd be free to use whatever you wanted, 98 00:03:37,250 --> 00:03:40,100 but I specified them so that you could 99 00:03:40,100 --> 00:03:42,380 concentrate on the code later, rather 100 00:03:42,380 --> 00:03:44,480 than having to compare your IDs to mine. 101 00:03:44,480 --> 00:03:47,090 It just makes it easier to use the same 102 00:03:47,090 --> 00:03:49,459 ones. The same goes for the name of the 103 00:03:49,459 --> 00:03:51,620 layout. Alright so let's go ahead and 104 00:03:51,620 --> 00:03:54,350 create our layout. So I'm going to call this 105 00:03:54,350 --> 00:03:57,440 one, as mentioned in the challenge notes, 106 00:03:57,440 --> 00:04:01,900 fragment_add_edit. 107 00:04:01,900 --> 00:04:04,400 Now I could change the layout type 108 00:04:04,400 --> 00:04:06,890 before clicking OK, but I want to show 109 00:04:06,890 --> 00:04:09,019 you a new feature in Android Studio. So 110 00:04:09,019 --> 00:04:10,580 if I leave it set to ConstraintLayout 111 00:04:10,580 --> 00:04:13,130 and click OK, even though that's not what 112 00:04:13,130 --> 00:04:15,890 I want - I'll do that now - I can actually adjust 113 00:04:15,890 --> 00:04:18,140 this later. So I can come over here to 114 00:04:18,140 --> 00:04:19,760 the component tree. I'll close down the 115 00:04:19,760 --> 00:04:21,918 Project pane first, right-click the 116 00:04:21,918 --> 00:04:23,960 ConstraintLayout and I can select 117 00:04:23,960 --> 00:04:25,280 Convert view, 118 00:04:25,280 --> 00:04:28,010 and that actually lets you change one 119 00:04:28,010 --> 00:04:30,470 view type to another. Now because we 120 00:04:30,470 --> 00:04:32,840 right-clicked a view group - the layout - the 121 00:04:32,840 --> 00:04:35,480 dialog only shows other layouts, but you 122 00:04:35,480 --> 00:04:37,100 could type TextView in the box if that's 123 00:04:37,100 --> 00:04:38,780 what you wanted. But we want a Linear 124 00:04:38,780 --> 00:04:41,150 Layout so I'm going to select that and 125 00:04:41,150 --> 00:04:43,880 click on apply, and you can see over there 126 00:04:43,880 --> 00:04:45,260 at the component tree to the left 127 00:04:45,260 --> 00:04:47,450 hand side, we've now got a LinearLayout. 128 00:04:47,450 --> 00:04:50,390 So that's pretty cool, and if you want to 129 00:04:50,390 --> 00:04:51,830 change a button, for example, to be an 130 00:04:51,830 --> 00:04:53,840 image button, then you can convert it now 131 00:04:53,840 --> 00:04:55,550 instead of editing the XML directly. 132 00:04:55,550 --> 00:04:57,530 Alright, so a LinearLayout is a 133 00:04:57,530 --> 00:04:59,570 perfectly adequate layout to use here, 134 00:04:59,570 --> 00:05:01,730 but again it's fine if you used a 135 00:05:01,730 --> 00:05:04,040 different layout. But when placing all 136 00:05:04,040 --> 00:05:05,240 widgets where they're stacked up 137 00:05:05,240 --> 00:05:07,250 vertically or next to each other, then a 138 00:05:07,250 --> 00:05:09,650 linear layout is preferable because it's 139 00:05:09,650 --> 00:05:11,930 so simple to use. So we need to make sure 140 00:05:11,930 --> 00:05:13,520 that linear layout's selected over here, 141 00:05:13,520 --> 00:05:15,320 and the first thing we want to do is 142 00:05:15,320 --> 00:05:17,900 change the orientation to vertical which 143 00:05:17,900 --> 00:05:19,400 will place the widgets one above the 144 00:05:19,400 --> 00:05:20,470 other. 145 00:05:20,470 --> 00:05:22,370 Alright so next we're going to drag 146 00:05:22,370 --> 00:05:24,260 three EditText widgets and a Button 147 00:05:24,260 --> 00:05:26,480 onto the layout. So I'm going to come over 148 00:05:26,480 --> 00:05:28,700 here first and select Text. So the 149 00:05:28,700 --> 00:05:30,770 first two are going to be used to enter 150 00:05:30,770 --> 00:05:32,450 text. So I'm going to use the Plain Text 151 00:05:32,450 --> 00:05:37,180 version over here, so I'm going to select those. 152 00:05:37,180 --> 00:05:39,290 The third one is going to be used to 153 00:05:39,290 --> 00:05:41,660 enter the sort order which is numeric, so 154 00:05:41,660 --> 00:05:43,430 a Number EditText will be appropriate 155 00:05:43,430 --> 00:05:45,260 here so I'll select that, or drag that 156 00:05:45,260 --> 00:05:48,530 rather. And then lastly we just want a 157 00:05:48,530 --> 00:05:50,000 regular Button, so I'm going to go back to 158 00:05:50,000 --> 00:05:52,400 Common under the groups and select a 159 00:05:52,400 --> 00:05:55,790 Button and drag that onto our layout. Al 160 00:05:55,790 --> 00:05:57,770 right so from top down, the first Edit 161 00:05:57,770 --> 00:06:01,070 Text should have the ID. I'll select that 162 00:06:01,070 --> 00:06:03,200 and it's going to be addedit_ 163 00:06:03,200 --> 00:06:05,750 name. Again that was as per the 164 00:06:05,750 --> 00:06:08,450 instructions in the challenge notes, so 165 00:06:08,450 --> 00:06:12,950 addedit - I can spell - underscore name. Now 166 00:06:12,950 --> 00:06:14,840 the layout_width and layout_height are 167 00:06:14,840 --> 00:06:17,060 already set to match_parent and wrap_ 168 00:06:17,060 --> 00:06:19,100 content as you can see, and there's no 169 00:06:19,100 --> 00:06:21,110 need to change them, but it's always a 170 00:06:21,110 --> 00:06:22,700 good idea to check these two properties 171 00:06:22,700 --> 00:06:24,979 to make sure they are set as you want. 172 00:06:24,979 --> 00:06:27,140 The next property over here is input 173 00:06:27,140 --> 00:06:29,410 type, so I'm going to switch to a browser. 174 00:06:29,410 --> 00:06:32,300 So let's just have a quick look at input 175 00:06:32,300 --> 00:06:34,520 type. So specifically I'm going to type 176 00:06:34,520 --> 00:06:37,690 in edittext input type - 177 00:06:37,690 --> 00:06:40,970 that's a search in Google - and you can see 178 00:06:40,970 --> 00:06:42,560 that two of the top results are from 179 00:06:42,560 --> 00:06:45,290 developer.android.com so that's always a 180 00:06:45,290 --> 00:06:47,600 good place to start. One, as you can see 181 00:06:47,600 --> 00:06:49,400 at the top one in my case, is a reference 182 00:06:49,400 --> 00:06:51,500 doc, but there's also one of Google's 183 00:06:51,500 --> 00:06:53,540 training docs just below that, and 184 00:06:53,540 --> 00:06:55,660 that's probably a better place to start. 185 00:06:55,660 --> 00:06:58,580 Now there's also a guide but it doesn't 186 00:06:58,580 --> 00:07:00,410 always appear in the list of results, but 187 00:07:00,410 --> 00:07:01,700 I'll come back to that when we've had a 188 00:07:01,700 --> 00:07:03,500 look at the training doc. So I'm going to 189 00:07:03,500 --> 00:07:05,030 select the training doc, click on that 190 00:07:05,030 --> 00:07:09,800 one, and you can see that this is 191 00:07:09,800 --> 00:07:11,720 actually quite interesting. The input 192 00:07:11,720 --> 00:07:13,430 type property doesn't just restrict the 193 00:07:13,430 --> 00:07:15,620 type of data that can be entered, it's 194 00:07:15,620 --> 00:07:18,320 also used to decide which keyboard to 195 00:07:18,320 --> 00:07:20,630 give the user. Now the example shows the 196 00:07:20,630 --> 00:07:22,310 keyboard that appears if you set the 197 00:07:22,310 --> 00:07:24,500 input type to phone and password, and 198 00:07:24,500 --> 00:07:27,110 there's also an example of adding text 199 00:07:27,110 --> 00:07:29,690 auto-correct in the input type. So I've 200 00:07:29,690 --> 00:07:31,070 got some good examples showing on there 201 00:07:31,070 --> 00:07:33,380 as you can see. So this is input - 202 00:07:33,380 --> 00:07:35,060 this is a quite an important property 203 00:07:35,060 --> 00:07:38,060 for EditText widgets. So a bit further 204 00:07:38,060 --> 00:07:39,230 down as I scroll down, we've got this 205 00:07:39,230 --> 00:07:42,050 Specify the input method action section. 206 00:07:42,050 --> 00:07:44,570 There's a description here of a special 207 00:07:44,570 --> 00:07:47,660 action button that can appear on the 208 00:07:47,660 --> 00:07:49,880 keyboard, and there's even sample code, as 209 00:07:49,880 --> 00:07:51,170 you can see there, showing how to add 210 00:07:51,170 --> 00:07:53,390 your own listener to that key if you 211 00:07:53,390 --> 00:07:55,190 want to do that, and that can be very 212 00:07:55,190 --> 00:07:57,590 useful when displaying a form on a phone 213 00:07:57,590 --> 00:07:59,960 in landscape. So in landscape there's not 214 00:07:59,960 --> 00:08:02,150 a lot of height on the screen, and a soft 215 00:08:02,150 --> 00:08:04,190 keyboard would probably obscure our Save 216 00:08:04,190 --> 00:08:06,950 button. So it may be worth adding the 217 00:08:06,950 --> 00:08:09,320 same functionality to a Done action 218 00:08:09,320 --> 00:08:11,540 button. There's a lot of useful 219 00:08:11,540 --> 00:08:13,820 information in this training doc so it's 220 00:08:13,820 --> 00:08:15,560 definitely worth having a good read, and 221 00:08:15,560 --> 00:08:17,510 then following the next links at the 222 00:08:17,510 --> 00:08:20,690 bottom of each page. So you can basically 223 00:08:20,690 --> 00:08:22,010 go through and there's lots of 224 00:08:22,010 --> 00:08:23,450 information you can actually find here, 225 00:08:23,450 --> 00:08:25,220 following this through to the next section 226 00:08:25,220 --> 00:08:27,020 and sort of just reading through the 227 00:08:27,020 --> 00:08:29,600 various pages there. If you provide the 228 00:08:29,600 --> 00:08:31,850 users with the correct keyboard and the 229 00:08:31,850 --> 00:08:34,070 behavior they expect, then your apps will 230 00:08:34,070 --> 00:08:35,870 look far more polished and your users 231 00:08:35,870 --> 00:08:37,760 will enjoy using them. Alright let's just go back 232 00:08:37,760 --> 00:08:40,760 to Android Studio. Alright so what we 233 00:08:40,760 --> 00:08:43,360 want to do here is select input type. 234 00:08:43,360 --> 00:08:45,860 Firstly I'm going to uncheck the text 235 00:08:45,860 --> 00:08:47,690 PersonName which was selected by default, 236 00:08:47,690 --> 00:08:50,210 and I want to set this first EditText 237 00:08:50,210 --> 00:08:51,200 input to text 238 00:08:51,200 --> 00:08:52,810 NoSuggestions. So I'm going to click on that, 239 00:08:52,810 --> 00:08:55,640 check that box. Now the user will most 240 00:08:55,640 --> 00:08:57,740 likely use things like project names in 241 00:08:57,740 --> 00:08:59,810 this field, such as TaskTimer for 242 00:08:59,810 --> 00:09:02,240 example, so any suggestions are probably 243 00:09:02,240 --> 00:09:04,670 unlikely to be much use. One thing we 244 00:09:04,670 --> 00:09:06,410 certainly don't want to add here is text 245 00:09:06,410 --> 00:09:08,300 autocorrect, as that would just be 246 00:09:08,300 --> 00:09:10,280 annoying in use. Alright so I'm going to 247 00:09:10,280 --> 00:09:13,370 click OK for that. Now for the hint 248 00:09:13,370 --> 00:09:14,960 property I'm going to create a new 249 00:09:14,960 --> 00:09:17,930 string resource, and we'll call this one 250 00:09:17,930 --> 00:09:21,970 addedit_name_hint, 251 00:09:21,970 --> 00:09:25,520 and for the Resource value we'll put Task 252 00:09:25,520 --> 00:09:31,490 name colon required, enter there. Now we 253 00:09:31,490 --> 00:09:33,410 can clear the text property so we'll do 254 00:09:33,410 --> 00:09:35,090 that now, and that's got the added 255 00:09:35,090 --> 00:09:37,760 advantage of enabling the hint to show 256 00:09:37,760 --> 00:09:39,500 in the designer, and you can see over to 257 00:09:39,500 --> 00:09:40,460 the left-hand side 258 00:09:40,460 --> 00:09:42,680 that's now showing. Alright so 259 00:09:42,680 --> 00:09:45,110 that's the first EditText. The next one, 260 00:09:45,110 --> 00:09:47,360 let's move ahead and do that one. This is 261 00:09:47,360 --> 00:09:49,310 going to be our description. So the ID 262 00:09:49,310 --> 00:09:52,280 is going to be addedit_ 263 00:09:52,280 --> 00:09:56,390 description. The layout width and height 264 00:09:56,390 --> 00:09:58,550 should still be set correctly, match_ 265 00:09:58,550 --> 00:10:00,680 parent and wrap_content respectively, and 266 00:10:00,680 --> 00:10:03,080 for the input type we're going to click on 267 00:10:03,080 --> 00:10:05,720 that. Now we want to allow the user to 268 00:10:05,720 --> 00:10:07,700 insert line breaks by selecting text 269 00:10:07,700 --> 00:10:09,170 MultiLine here, so I'm going to de-select 270 00:10:09,170 --> 00:10:12,140 textPersonName and select text 271 00:10:12,140 --> 00:10:14,690 MultiLine. Now suggestions might be 272 00:10:14,690 --> 00:10:17,060 useful here, as this field may contain a 273 00:10:17,060 --> 00:10:19,820 normal text description of the task, so I 274 00:10:19,820 --> 00:10:22,640 won't add textNoSuggestions. If text 275 00:10:22,640 --> 00:10:24,080 PersonName was added automatically, 276 00:10:24,080 --> 00:10:25,520 which it was, and you saw when I first 277 00:10:25,520 --> 00:10:26,390 went into this field, 278 00:10:26,390 --> 00:10:29,030 remove that, which I've done. Alright so 279 00:10:29,030 --> 00:10:30,470 let's click OK to that, now that text 280 00:10:30,470 --> 00:10:33,650 MultiLine's selected, and same deal there 281 00:10:33,650 --> 00:10:36,470 with the hint. I'm going to come over 282 00:10:36,470 --> 00:10:37,970 here. We're going to create a new string 283 00:10:37,970 --> 00:10:40,940 resource for the hint, and we're going to 284 00:10:40,940 --> 00:10:44,390 go with the name here - addedit_ 285 00:10:44,390 --> 00:10:47,630 description_hint. And 286 00:10:47,630 --> 00:10:49,670 the resource value we're going to go 287 00:10:49,670 --> 00:10:53,800 with will be Task description 288 00:10:53,800 --> 00:10:57,460 parentheses optional. 289 00:10:57,460 --> 00:10:59,840 Alright, and once again as we did for the 290 00:10:59,840 --> 00:11:01,190 name we're going to clear the text field, 291 00:11:01,190 --> 00:11:03,050 and we can now see the hint appearing in 292 00:11:03,050 --> 00:11:05,420 the left-hand side. Alright so the third 293 00:11:05,420 --> 00:11:07,280 EditText will only allow numeric 294 00:11:07,280 --> 00:11:09,620 input, and start by changing the ID for 295 00:11:09,620 --> 00:11:14,050 that, and it's going to go addedit 296 00:11:14,050 --> 00:11:16,910 _sort_hint. That's 297 00:11:16,910 --> 00:11:18,680 going to be the name we assign to it. 298 00:11:18,680 --> 00:11:21,290 The layout width and height, we'll leave 299 00:11:21,290 --> 00:11:23,060 as the default there, match_parent and 300 00:11:23,060 --> 00:11:24,950 wrap_content again, and I'm going to 301 00:11:24,950 --> 00:11:27,170 click on the input type again. This time, 302 00:11:27,170 --> 00:11:29,870 because we selected the number EditText, 303 00:11:29,870 --> 00:11:31,820 it's already set to number, so we don't 304 00:11:31,820 --> 00:11:34,130 need to make any changes to that. And for 305 00:11:34,130 --> 00:11:35,810 the hint, let's create a new 306 00:11:35,810 --> 00:11:37,940 string resource again. We'll call this 307 00:11:37,940 --> 00:11:41,390 one addedit_sort_ 308 00:11:41,390 --> 00:11:44,540 hint, and we'll go with the resource 309 00:11:44,540 --> 00:11:49,490 value name of Order: sorts low to 310 00:11:49,490 --> 00:11:54,140 high. And we didn't have any value in 311 00:11:54,140 --> 00:11:55,370 the text property so we didn't need to 312 00:11:55,370 --> 00:11:57,170 clear that, and we can see the hint showing on 313 00:11:57,170 --> 00:11:59,210 the left hand side again. Alright so at this 314 00:11:59,210 --> 00:12:00,680 point now that just leaves the Button, so 315 00:12:00,680 --> 00:12:03,950 let's work on that. The name, the ID 316 00:12:03,950 --> 00:12:05,510 rather, we're going to call this one is 317 00:12:05,510 --> 00:12:09,830 addedit_save. The layout width 318 00:12:09,830 --> 00:12:12,290 and height here should both be set to 319 00:12:12,290 --> 00:12:13,640 wrap_content. So I'm going to change the 320 00:12:13,640 --> 00:12:16,220 layout width so it's wrap_content. Now 321 00:12:16,220 --> 00:12:17,630 the text for the Button will be stored 322 00:12:17,630 --> 00:12:19,130 in a string resource, so let's go ahead 323 00:12:19,130 --> 00:12:23,270 and create that string resource And the 324 00:12:23,270 --> 00:12:24,470 resource name, we're going to go with add 325 00:12:24,470 --> 00:12:30,230 edit_save_text, and the 326 00:12:30,230 --> 00:12:33,100 resource value is going to go with Save. 327 00:12:33,100 --> 00:12:35,750 Now we're almost done at this point, but 328 00:12:35,750 --> 00:12:37,040 there are a couple of things I want to 329 00:12:37,040 --> 00:12:39,320 do to this button though. Firstly, I want 330 00:12:39,320 --> 00:12:41,720 to give it a margin, a top margin of 8 331 00:12:41,720 --> 00:12:43,910 dp just to move it away from the text, 332 00:12:43,910 --> 00:12:46,880 the EditText just above it. So I'm going 333 00:12:46,880 --> 00:12:48,290 to go into extended attributes for that. 334 00:12:48,290 --> 00:12:51,950 I'm going to extend layout_margin, I'm going to 335 00:12:51,950 --> 00:12:55,700 click into top here, in it 336 00:12:55,700 --> 00:12:58,520 at 8dp, and you can see that the Button's 337 00:12:58,520 --> 00:13:00,350 now moved down. We've now got a margin of 338 00:13:00,350 --> 00:13:02,870 8dp. Now there's another thing we can do 339 00:13:02,870 --> 00:13:05,450 and this isn't part of the challenge, but 340 00:13:05,450 --> 00:13:07,190 it can be a nice touch on Buttons that 341 00:13:07,190 --> 00:13:09,770 provide recognized functions like saving. 342 00:13:09,770 --> 00:13:10,430 So 343 00:13:10,430 --> 00:13:13,100 as well as the label Save on the Button, we 344 00:13:13,100 --> 00:13:15,649 can also add an icon. And to do that if we 345 00:13:15,649 --> 00:13:18,500 scroll down a bit, we're looking for a extended 346 00:13:18,500 --> 00:13:20,029 attribute, and if we scroll we'll see 347 00:13:20,029 --> 00:13:21,500 there's a number of them here; the drawable 348 00:13:21,500 --> 00:13:23,839 Bottom, End etc. But the one I'm looking 349 00:13:23,839 --> 00:13:26,630 for is drawableStart. So I'm going to come 350 00:13:26,630 --> 00:13:28,610 into here, and as you click on the 351 00:13:28,610 --> 00:13:31,640 ellipsis, and I want to set that to ic 352 00:13:31,640 --> 00:13:34,370 _menu_save. And I can 353 00:13:34,370 --> 00:13:36,370 do that by just typing in the word save, 354 00:13:36,370 --> 00:13:39,080 expanding Android, and you can see we've 355 00:13:39,080 --> 00:13:41,089 got this ic_menu_save pops up 356 00:13:41,089 --> 00:13:44,149 for us. Click on OK, and you can see now 357 00:13:44,149 --> 00:13:45,230 to the left hand side we've got 358 00:13:45,230 --> 00:13:47,630 like a picture - an image there - of a Save 359 00:13:47,630 --> 00:13:50,140 icon now added in addition to the text. 360 00:13:50,140 --> 00:13:53,149 Alright, the specification in 361 00:13:53,149 --> 00:13:54,830 the challenge also mentioned setting the 362 00:13:54,830 --> 00:13:57,320 max length properties for the EditText 363 00:13:57,320 --> 00:13:59,930 widgets. Now the reason for this is that 364 00:13:59,930 --> 00:14:01,250 we're going to be storing whatever's 365 00:14:01,250 --> 00:14:03,649 entered into those boxes, in our database, 366 00:14:03,649 --> 00:14:05,209 and we really don't want to store huge 367 00:14:05,209 --> 00:14:07,760 task names. The display will also look 368 00:14:07,760 --> 00:14:09,410 very untidy if the names are very long, 369 00:14:09,410 --> 00:14:11,930 and the idea is that a task should be 370 00:14:11,930 --> 00:14:13,940 very easy to find in the list so that 371 00:14:13,940 --> 00:14:15,560 users can quickly start the timer 372 00:14:15,560 --> 00:14:18,290 without wasting too much time. So I'm 373 00:14:18,290 --> 00:14:19,880 going to set the max length properties 374 00:14:19,880 --> 00:14:21,650 to these values in the specification, and 375 00:14:21,650 --> 00:14:24,440 it's actually easier to do these all at 376 00:14:24,440 --> 00:14:26,720 once so that it avoids having to hunt 377 00:14:26,720 --> 00:14:28,310 through the attributes to find max 378 00:14:28,310 --> 00:14:31,279 length each time. Now an easy way to find max 379 00:14:31,279 --> 00:14:32,390 length is just to come up here and just 380 00:14:32,390 --> 00:14:35,930 search for maxLength. I can click on that 381 00:14:35,930 --> 00:14:37,700 now, and come over here and click on the 382 00:14:37,700 --> 00:14:40,100 value, but before I enter a value I need 383 00:14:40,100 --> 00:14:42,320 to specify which fields. I'm going to 384 00:14:42,320 --> 00:14:44,150 start with Task name: required. 385 00:14:44,150 --> 00:14:49,220 I'm going to do a search again for maxLength, and 386 00:14:49,220 --> 00:14:50,510 I'm going to set the value for the first 387 00:14:50,510 --> 00:14:53,740 one for our name - the maxLength was 64. 388 00:14:53,740 --> 00:14:56,570 Then I'm going to choose the next one, the 389 00:14:56,570 --> 00:14:59,000 description, and again if I wanted to I 390 00:14:59,000 --> 00:15:00,290 could go through and just search it each 391 00:15:00,290 --> 00:15:02,270 time. It may also be easier just to come 392 00:15:02,270 --> 00:15:05,960 down here, and 393 00:15:05,960 --> 00:15:07,940 just come down to maxLength here so it 394 00:15:07,940 --> 00:15:10,220 stays on the screen. Enter 256 - this time 395 00:15:10,220 --> 00:15:12,680 for description, and then when I go and click 396 00:15:12,680 --> 00:15:14,690 on the next one, notice that's 397 00:15:14,690 --> 00:15:16,070 still there and I can come over here and 398 00:15:16,070 --> 00:15:19,510 select the value, in this case of 9. 399 00:15:19,510 --> 00:15:21,650 Alright and if I go back and click on another 400 00:15:21,650 --> 00:15:22,990 one these properties I've already set, 401 00:15:22,990 --> 00:15:25,250 notice that maxLength seems to 402 00:15:25,250 --> 00:15:26,180 disappear from here. 403 00:15:26,180 --> 00:15:27,260 So what actually happens is, if we 404 00:15:27,260 --> 00:15:29,570 scroll back to the top - so up here you can 405 00:15:29,570 --> 00:15:32,810 see that it now shows maxLength 256 under 406 00:15:32,810 --> 00:15:34,820 inputType. So if you're hunting for 407 00:15:34,820 --> 00:15:36,650 it, that's where it's gone. Okay so of 408 00:15:36,650 --> 00:15:38,000 those three that we've set, and again we 409 00:15:38,000 --> 00:15:40,220 can see them by clicking on them, we've 410 00:15:40,220 --> 00:15:43,040 got 64 for addedit_name, addedit 411 00:15:43,040 --> 00:15:46,040 underscores description of 256. And I 412 00:15:46,040 --> 00:15:47,420 made a typo there, addedit 413 00:15:47,420 --> 00:15:48,770 _sort_hint, but anyway 414 00:15:48,770 --> 00:15:50,810 that one was set to 9. I'll just talk 415 00:15:50,810 --> 00:15:52,250 about what they are. The really crucial 416 00:15:52,250 --> 00:15:53,960 one out of these three is the value of 417 00:15:53,960 --> 00:15:56,270 9 for the sort order. So that's a 418 00:15:56,270 --> 00:15:58,370 numeric field, and if we allow too many 419 00:15:58,370 --> 00:16:00,230 digits to be entered then our app will 420 00:16:00,230 --> 00:16:02,030 crash when we try to convert the input 421 00:16:02,030 --> 00:16:03,590 into a number. So we're being very 422 00:16:03,590 --> 00:16:05,750 generous allowing nine digits. Really, 423 00:16:05,750 --> 00:16:07,250 most users only really need one or two 424 00:16:07,250 --> 00:16:09,590 digits to keep their tasks sorted how 425 00:16:09,590 --> 00:16:11,270 they want. Alright so that's the 426 00:16:11,270 --> 00:16:12,800 challenge done, but what I'll do is I'll 427 00:16:12,800 --> 00:16:15,590 come up here and change the ID, because 428 00:16:15,590 --> 00:16:17,030 the ID should have actually been add 429 00:16:17,030 --> 00:16:19,750 edit_sortorder not hint, 430 00:16:19,750 --> 00:16:24,560 sortorder. If you go back to our regular 431 00:16:24,560 --> 00:16:27,800 attributes, I'll just check here we've 432 00:16:27,800 --> 00:16:29,590 actually got that correctly set for the 433 00:16:29,590 --> 00:16:31,970 string resource for hint, so that's okay. 434 00:16:31,970 --> 00:16:34,820 But we'll also change the name to what 435 00:16:34,820 --> 00:16:36,200 it should have been - addedit_ 436 00:16:36,200 --> 00:16:37,820 sortorder - and we've got our addedit 437 00:16:37,820 --> 00:16:39,380 _description and addedit 438 00:16:39,380 --> 00:16:42,050 _name correctly specified as 439 00:16:42,050 --> 00:16:44,000 well as the Button. Alright so that's the 440 00:16:44,000 --> 00:16:45,470 challenge completed. So I'm going to end 441 00:16:45,470 --> 00:16:48,170 the video here, then in the next one we want 442 00:16:48,170 --> 00:16:49,790 to change tact and start talking about 443 00:16:49,790 --> 00:16:52,790 creating a data class to make all this 444 00:16:52,790 --> 00:16:54,230 happen - in other words, to implement the 445 00:16:54,230 --> 00:16:55,940 interface so that it actually does 446 00:16:55,940 --> 00:16:57,920 something. So I'll see you in the next 447 00:16:57,920 --> 00:17:00,160 video.