1 00:00:04,750 --> 00:00:11,570 Okay, let's continue where we left off in the last video. To finish this TextView 2 00:00:11,570 --> 00:00:25,000 we need to go into the all attributes pane and set layout_marginTop to 8 dp. 3 00:00:25,000 --> 00:00:28,720 You'll probably want to put a copyright message in your About 4 00:00:28,730 --> 00:00:33,620 dialogues, and I've added this one to show you one way of doing it, not because 5 00:00:33,620 --> 00:00:38,840 I'm imposing copyright restrictions on you. All the code in this course is made 6 00:00:38,840 --> 00:00:43,129 available to you, on the same license terms as the icon license that we saw, 7 00:00:43,129 --> 00:00:47,989 when downloading the clock icon. You're free to do pretty much anything you want 8 00:00:47,989 --> 00:00:53,059 with it, except pass it off as your own. If you want to use the AppDialog class 9 00:00:53,060 --> 00:00:59,380 in your own apps, for example, that's fine. We have written it to be reusable after all. 10 00:00:59,380 --> 00:01:03,350 If you want to base your own app on one of the ones in this course, that's 11 00:01:03,350 --> 00:01:08,329 also fine. If it's substantially unchanged, then add a credit to the 12 00:01:08,329 --> 00:01:25,480 course with the course URL. The next TextView is called about_weblink, 13 00:01:25,480 --> 00:01:31,520 and it's also said to have a layout_width of match_parent 14 00:01:31,520 --> 00:01:36,060 and a layout_height of wrap_ content. 15 00:01:36,060 --> 00:01:44,360 Set the textColor to colorPrimary 16 00:01:44,360 --> 00:02:00,700 then create a new string resource called about_weblink. 17 00:02:00,700 --> 00:02:20,960 The string for this resource will be, Instructions available at www.learnprogramming.academy 18 00:02:20,960 --> 00:02:28,120 Once again we'll set the layout_marginTop property to 8dp 19 00:02:35,460 --> 00:02:39,980 and there's another change we need to make for this widget. We want the link to 20 00:02:39,980 --> 00:02:50,140 be clickable, so scroll up to find the autoLink property and expand it. 21 00:02:50,140 --> 00:02:55,600 You can see there are a few things you can make Android respond to, in your TextViews. 22 00:02:55,610 --> 00:03:01,160 If you tick phone, for example, then the user can launch the phone dialer by tapping a 23 00:03:01,160 --> 00:03:08,240 phone number in the TextView. We want web for this widget. 24 00:03:08,240 --> 00:03:14,200 The URL is highlighted in the TextView and tapping it when the app's running will launch a 25 00:03:14,209 --> 00:03:19,549 browser to that address, sort of. There's a bit more we'll have to add, to cater for 26 00:03:19,549 --> 00:03:24,739 older Android versions. We'll come to that later. Now that we've got the autoLink 27 00:03:24,740 --> 00:03:30,740 property on the screen, click the next widget in the component tree. 28 00:03:30,740 --> 00:03:36,460 Android Studio now keeps the last used property visible in the list, which is great if 29 00:03:36,470 --> 00:03:40,549 you want to set the same property on a series of widgets. Use the component 30 00:03:40,549 --> 00:03:45,139 tree to select the widget, while keeping the extended properties pane open, and you 31 00:03:45,139 --> 00:03:50,120 don't have to keep scrolling around to find the property. Of course, they change 32 00:03:50,120 --> 00:03:54,139 these features all the time, so that if it doesn't behave like that when you're 33 00:03:54,139 --> 00:03:58,459 watching these videos, you might still have to scroll around to find the 34 00:03:58,459 --> 00:04:03,799 property again. As you can see, although it keeps autoLink on the screen, it does 35 00:04:03,799 --> 00:04:08,470 close it back up. This TextView will have an email address, 36 00:04:08,470 --> 00:04:15,220 so expand autoLink and tick email. 37 00:04:15,220 --> 00:04:18,300 We may as well set the layout marginTop while 38 00:04:18,300 --> 00:04:29,720 we're in the all attributes, so once again set it to 8dp. 39 00:04:29,720 --> 00:04:32,140 Back in the top section, 40 00:04:32,140 --> 00:04:38,160 the ID will be about_email. 41 00:04:38,790 --> 00:04:44,530 Once again, we'll have a layout width of match_parent and the layout 42 00:04:44,530 --> 00:04:56,360 height of wrap_content, and the textColor will be colorPrimary. 43 00:04:56,360 --> 00:05:02,760 The new string resource will be called about_email, 44 00:05:10,780 --> 00:05:33,960 and the string value will be, For support, email taskTimer@learnprogramming.academy 45 00:05:33,960 --> 00:05:45,100 The final TextView will be called about_credits, 46 00:05:45,100 --> 00:05:49,460 with a layout width of match_parent and a layout height 47 00:05:49,460 --> 00:06:01,280 of wrap_content. Change the textColor to colorPrimary, 48 00:06:01,280 --> 00:06:15,580 then create a new string resource called about_credits 49 00:06:15,580 --> 00:06:50,600 with the value, Icon derived from analog clock at openclipart.org by the b tag again, 50 00:06:50,600 --> 00:06:58,350 and then close the b tag. I'm using the HTML bold tag in the string, to highlight the 51 00:06:58,350 --> 00:07:04,050 icon name and the source. It's very limited but you can do basic formatting 52 00:07:04,050 --> 00:07:11,880 in TextView's text. At the moment, you can use the bold, italic and underline tags. 53 00:07:11,880 --> 00:07:15,660 All the tags available are mentioned in the documentation 54 00:07:15,660 --> 00:07:39,060 developer.android.com/guide/topics/resources/string-resource.html 55 00:07:39,060 --> 00:07:45,660 and you can get to the appropriate heading by searching for markup. 56 00:07:51,850 --> 00:07:57,800 It's the first result on the page. 57 00:07:57,800 --> 00:08:02,170 If you want to include more complex HTML, the 58 00:08:02,170 --> 00:08:08,320 doc describes how to format your code so you can use the fromHtml function, 59 00:08:08,320 --> 00:08:13,060 but we'll stick to bold here. 60 00:08:13,060 --> 00:08:18,300 We just need to set the layout_marginTop to 8dp, 61 00:08:18,300 --> 00:08:22,180 and we're almost done with the TextViews. 62 00:08:28,380 --> 00:08:33,299 Unfortunately, there's another slight hiccup with the text we've entered. 63 00:08:33,299 --> 00:08:39,700 This time Android Studio's noticed that we've used HTML tags, and it wraps the text in 64 00:08:39,700 --> 00:08:46,090 what's called a CData attribute. Instead of nice bold text, we're getting the bold 65 00:08:46,090 --> 00:08:55,140 tags displayed. We fix this by editing the res/values/strings.xml again, 66 00:08:58,220 --> 00:09:04,120 and cleaning up the text inside the string tag. Remove everything from the 67 00:09:04,120 --> 00:09:14,920 less than symbol to the square bracket at the beginning, 68 00:09:14,920 --> 00:09:23,700 and the two square brackets and greater than sign at the end. The HTML bold tags should be bold in 69 00:09:23,700 --> 00:09:28,000 the text, which makes it easier to make sure you've typed them correctly. 70 00:09:28,000 --> 00:09:32,680 You won't see the text emboldened in the design preview, but at least we haven't 71 00:09:32,680 --> 00:09:35,220 got the HTML tags displaying. 72 00:09:39,740 --> 00:09:42,780 Now if you've read through the dialog design 73 00:09:42,790 --> 00:09:47,740 documentation, you'll know that Google recommends that all dialog text should 74 00:09:47,740 --> 00:09:53,620 be 24dp from the edges of the dialog. Rather than setting a left and right 75 00:09:53,620 --> 00:09:57,980 margin on each widget, we can add padding to the layout itself. 76 00:09:57,980 --> 00:10:04,140 Click on LinearLayout in the component tree and expand the properties pane. 77 00:10:04,140 --> 00:10:09,520 If you're including everything in the layout, so the icon and the title as well, 78 00:10:09,520 --> 00:10:13,810 then you could just set the padding attribute to give the same amount of 79 00:10:13,810 --> 00:10:18,970 padding all the way around. We're letting Android add the icon and title, and we 80 00:10:18,970 --> 00:10:24,010 don't want a huge gap between them and the rest of our layout. That means we 81 00:10:24,010 --> 00:10:29,110 don't want any padding at the top of the layout. Everything else should be set to 82 00:10:29,110 --> 00:10:34,650 24dp, but not the padding top property. 83 00:10:35,480 --> 00:10:41,500 So we'll start with the padding bottom. Click the symbol next to that, 84 00:10:41,500 --> 00:10:51,300 then type dialog in the search field. The one we want is dialogPreferredPadding. 85 00:10:51,320 --> 00:10:54,960 Then click OK. 86 00:10:54,960 --> 00:10:58,900 We want to use the same value for the end and start padding. 87 00:10:58,981 --> 00:11:03,550 Copy that to the clipboard, then click the end and start 88 00:11:03,550 --> 00:11:10,420 attributes to paste it in. Remember, don't set the top padding. 89 00:11:10,420 --> 00:11:15,780 One last change is to make sure the layout width for the layout is set to match parent, 90 00:11:15,780 --> 00:11:23,840 and the layout height is wrap content, 91 00:11:23,840 --> 00:11:25,925 and that's our layout finished. 92 00:11:25,925 --> 00:11:29,920 In the next video, we'll display the dialog in our app. 93 00:11:29,920 --> 00:11:32,940 See you for the next one.