1 00:00:00,740 --> 00:00:01,790 All right, welcome back. 2 00:00:01,940 --> 00:00:08,029 Now let's go ahead and take care of finalizing what we see here so that we can actually see the sources. 3 00:00:10,560 --> 00:00:17,850 So under sources, we need to create something that will take care of the source content, so a composable 4 00:00:17,850 --> 00:00:20,730 which will display how source content should look like. 5 00:00:21,060 --> 00:00:23,760 So let's go ahead and create the new composable here. 6 00:00:24,060 --> 00:00:29,730 I'm going to call this one source content and we'll need the articles to that should display so articles, 7 00:00:29,730 --> 00:00:32,400 which will be a list of top news article. 8 00:00:33,610 --> 00:00:37,150 OK, and now this composable. 9 00:00:37,750 --> 00:00:41,410 Well, first of all, need a lazy column. 10 00:00:41,650 --> 00:00:45,760 So we're going to create a lazy column which will display the content. 11 00:00:45,760 --> 00:00:49,870 So I'm going to do it like this as we've seen multiple times, right? 12 00:00:49,930 --> 00:00:55,600 So now we get the items which are individual art while all the articles, but we're going to get the 13 00:00:55,600 --> 00:00:57,760 individual articles from this. 14 00:00:58,480 --> 00:01:05,950 So let's make sure we use the article in here. 15 00:01:06,730 --> 00:01:08,320 Article like so. 16 00:01:09,450 --> 00:01:15,120 And we see so this will be the articles in here and see items. 17 00:01:18,320 --> 00:01:19,400 Which will be like this. 18 00:01:19,630 --> 00:01:20,000 OK. 19 00:01:20,960 --> 00:01:22,550 All right, so we're getting the articles now. 20 00:01:23,270 --> 00:01:29,690 So here we will need an annotated string for the articles, for the URL, because if you look at the 21 00:01:29,690 --> 00:01:32,180 articles here, it would give us an entire string, right? 22 00:01:32,180 --> 00:01:33,360 So this entire link. 23 00:01:33,710 --> 00:01:35,320 So we need to create that link. 24 00:01:35,330 --> 00:01:45,680 We're going to do that by creating an annotated and notated string, which we're going to build using 25 00:01:45,680 --> 00:01:47,270 the built annotated string. 26 00:01:48,260 --> 00:01:53,690 So here you can push a string annotation with a tag, for example. 27 00:01:53,690 --> 00:02:00,470 In our case, it's going to be the URL and the annotation, and it will be the article you URL. 28 00:02:01,100 --> 00:02:06,200 And if that doesn't exist, it's going to be news API dot org. 29 00:02:06,740 --> 00:02:14,090 So I'm just going to say, OK, create this push string annotation with a certain style. 30 00:02:14,480 --> 00:02:20,420 So with style, I'm going to designed a style to be span style. 31 00:02:21,960 --> 00:02:23,520 Wear the color. 32 00:02:24,650 --> 00:02:30,860 We'll use our color resources, and it's going to just a purple color. 33 00:02:31,930 --> 00:02:36,740 OK, so here, color resource, purple, so we need to import pan style. 34 00:02:37,060 --> 00:02:40,660 And here receipts with style. 35 00:02:41,740 --> 00:02:46,900 So I'll still get the error because probably we need to add some more parameters. 36 00:02:47,380 --> 00:02:56,020 So for example, the tax declaration and I'm going to say it will be an underlined text declaration. 37 00:02:56,020 --> 00:02:56,710 So here. 38 00:02:57,700 --> 00:03:00,730 Underlined, and it needs content. 39 00:03:02,590 --> 00:03:09,880 So with style gets a content where it's just going to upend. 40 00:03:11,460 --> 00:03:20,250 Read full article here, though here it seems like an imported the wrong with style, so let me get 41 00:03:20,250 --> 00:03:25,770 rid of this line and see if I can import it now, and it's going to be happy. 42 00:03:25,770 --> 00:03:27,000 It doesn't seem like it. 43 00:03:27,130 --> 00:03:29,460 This, with style gets a band style. 44 00:03:31,130 --> 00:03:40,100 With the color and then the tax declaration, so all the way up to here seems like it's like this, 45 00:03:40,460 --> 00:03:41,000 OK? 46 00:03:43,030 --> 00:03:44,170 Now it's going to be happy. 47 00:03:44,300 --> 00:03:49,570 Now what can happen to man or man so many opening and closing brackets, huh? 48 00:03:49,990 --> 00:03:53,110 And it says Read full article here. 49 00:03:53,500 --> 00:03:53,770 Thanks. 50 00:03:53,770 --> 00:03:54,040 So. 51 00:03:55,430 --> 00:04:00,300 So this is what I want to have in my application where it's shows here. 52 00:04:00,320 --> 00:04:01,340 Read full article. 53 00:04:01,700 --> 00:04:03,800 So this is what I'm styling here. 54 00:04:04,080 --> 00:04:09,230 OK, I'm getting this text declaration where I say it should be underlined and it should be purple text. 55 00:04:09,650 --> 00:04:12,910 So that's what I'm creating here with this annotated string. 56 00:04:12,920 --> 00:04:16,160 So for every single item, I want to have to annotate that string. 57 00:04:16,490 --> 00:04:23,790 But that annotated string is really just the preparation because we are what we would now like to use 58 00:04:23,790 --> 00:04:25,550 this annotated string in this card. 59 00:04:25,560 --> 00:04:29,240 So now we need to set up this card while you see it has this purple background. 60 00:04:29,580 --> 00:04:33,720 It has the title, it has a description, and then it has this button underneath. 61 00:04:33,720 --> 00:04:35,780 So let's set all of that up. 62 00:04:35,790 --> 00:04:43,010 We are still inside of this items here, and we need to now go ahead and create the card that we want 63 00:04:43,010 --> 00:04:43,530 to use. 64 00:04:43,580 --> 00:04:51,320 So I'm going to set the background color to be my color source purple 700. 65 00:04:51,590 --> 00:04:52,880 So let me just copy that. 66 00:04:52,880 --> 00:04:54,740 I don't want to type all of that manually. 67 00:04:55,070 --> 00:04:56,960 This is going to be purple 700. 68 00:04:57,560 --> 00:05:04,100 It will have an elevation of six density pixels, some modifier with a little bit of padding. 69 00:05:04,100 --> 00:05:10,730 So modifier thought padding of eight density pixels. 70 00:05:11,030 --> 00:05:13,640 OK, so let's import modifier here for this to work. 71 00:05:14,960 --> 00:05:16,460 All right, there we are at. 72 00:05:17,610 --> 00:05:21,720 What's up with padding now, like so padding? 73 00:05:22,830 --> 00:05:23,370 All right. 74 00:05:24,890 --> 00:05:26,720 And we need to import padding as well. 75 00:05:27,410 --> 00:05:27,790 All right. 76 00:05:28,440 --> 00:05:31,040 So now what do we want to have in this cart? 77 00:05:32,450 --> 00:05:38,030 So I would say it's a column which contains all three items on top of each other. 78 00:05:38,300 --> 00:05:42,680 So let's go ahead and create a column which will need to be imported. 79 00:05:44,400 --> 00:05:50,940 So that's import column here, and we're going to pass a modifier or going to set the modifier to style 80 00:05:50,940 --> 00:05:51,510 a little bit. 81 00:05:51,840 --> 00:05:58,920 So I want to fix the height to, let's say, 200 density pixels, and I'm going to add padding towards 82 00:05:58,920 --> 00:05:59,790 the left and right. 83 00:06:00,420 --> 00:06:01,230 So and. 84 00:06:02,830 --> 00:06:08,350 Of eight dpi and start of a DPI. 85 00:06:10,510 --> 00:06:18,010 OK, then I'm going to set the vertical arrangement to space items evenly vertically. 86 00:06:19,180 --> 00:06:22,600 And then we need to define what should be inside of this column. 87 00:06:22,990 --> 00:06:30,330 So inside of the column, we see that we have a text with another text with, well, we could say this 88 00:06:30,550 --> 00:06:32,230 car, another car, so to speak. 89 00:06:32,740 --> 00:06:39,580 So it set up the text and I'm just going to use this text here, which gets me the title of the article. 90 00:06:40,360 --> 00:06:43,360 And if it's not available, then it's going to say not available. 91 00:06:43,570 --> 00:06:44,710 Font weight will be bold. 92 00:06:45,010 --> 00:06:50,200 It will only display two lines, and if there is more to display, it will use this ellipsis style. 93 00:06:50,530 --> 00:06:53,320 So let me see if we have an example here that we have an example. 94 00:06:53,620 --> 00:06:57,040 So it's just going to do Dot Dot Dot for the ellipsis style. 95 00:06:57,580 --> 00:07:01,120 So this will be text number one, text number two will be the description. 96 00:07:01,570 --> 00:07:04,030 So here text article description. 97 00:07:04,030 --> 00:07:06,100 If it's not available, it's going to say not available. 98 00:07:06,430 --> 00:07:08,440 It's just going to display three lines. 99 00:07:08,980 --> 00:07:10,960 And it's not going to be bold, as you can see. 100 00:07:13,460 --> 00:07:21,830 OK, so now we have our annotated string and what we are going to need for the cards that I want to 101 00:07:21,860 --> 00:07:23,050 display underneath. 102 00:07:23,060 --> 00:07:30,650 So here I want to display a card, but this card will need to have a set of set up. 103 00:07:30,980 --> 00:07:34,430 So first of all, I'm going to set it to be white. 104 00:07:34,940 --> 00:07:38,090 So color, but white. 105 00:07:39,530 --> 00:07:42,020 Then I mean, what color here? 106 00:07:44,150 --> 00:07:51,980 And then I'm going to set the elevation to be sixth density pixels like so. 107 00:07:53,400 --> 00:08:00,630 And then the card itself will have some content, and that's where I will need to set this part up here, 108 00:08:00,630 --> 00:08:00,870 right? 109 00:08:00,870 --> 00:08:09,570 So I need to have something called a your eye handler, so lets up set up a euro handler up here, your 110 00:08:09,570 --> 00:08:12,370 eye handler, which will be a local. 111 00:08:12,390 --> 00:08:13,980 Your eye handler. 112 00:08:14,280 --> 00:08:15,030 That current? 113 00:08:15,450 --> 00:08:20,160 So what this will allow me to do is to handle your ISO links or URLs. 114 00:08:20,640 --> 00:08:25,740 OK, so we are going to use to annotate that string that we have set up with pain here. 115 00:08:25,800 --> 00:08:34,049 This annotated string and now we are going to use it in our cart and I'm going to make it clickable 116 00:08:34,049 --> 00:08:34,530 texts. 117 00:08:34,530 --> 00:08:36,150 So it's not going to be an actual button. 118 00:08:36,150 --> 00:08:42,520 I'm just going to say, Hey, this is going to be clickable and the text will be our annotated string. 119 00:08:42,600 --> 00:08:48,270 So it's just going to say, Uh, yeah, click on this or just going to say, read full article here, 120 00:08:49,260 --> 00:08:49,550 OK? 121 00:08:49,560 --> 00:08:52,770 And once we click on it and on, click events should happen. 122 00:08:52,780 --> 00:08:54,720 So here we can design what should happen. 123 00:08:55,080 --> 00:09:00,630 And what I'm going to say is I'm going to use my annotated string to get string annotations from it. 124 00:09:00,960 --> 00:09:08,610 I'm going to pass it and it has the string start and or the tech start and start end. 125 00:09:09,480 --> 00:09:15,540 And then I'm going to get the first or no. 126 00:09:16,440 --> 00:09:20,910 So give me the first entry or null if they're not empty. 127 00:09:21,030 --> 00:09:27,660 So if this exists, then I want to load the result, which I'm going to get from this let. 128 00:09:28,050 --> 00:09:33,000 So from this gets string annotations, it's going to give me the result of it. 129 00:09:33,270 --> 00:09:38,490 And I'm going to check if the result tag is going to be the URL. 130 00:09:39,630 --> 00:09:47,400 Then use my you are a handler to open a you or I. 131 00:09:47,790 --> 00:09:51,780 So pass and the result that item. 132 00:09:52,290 --> 00:09:58,230 So basically, this is just the code that you need in order to open a link in your browser. 133 00:09:58,230 --> 00:10:03,720 So you see, if I click on this, it just opens up the browser that was set as default browser, and 134 00:10:03,720 --> 00:10:09,300 it just opens it up with the result item, which gives us the. 135 00:10:10,450 --> 00:10:16,930 String, so the article, Earl, which is this location where the article is from. 136 00:10:17,380 --> 00:10:18,820 So were the original article. 137 00:10:19,870 --> 00:10:29,200 So now let's actually use the source contents inside of our sources scaffold. 138 00:10:30,400 --> 00:10:37,030 Content so here where it says it's padding values here, I need to use the news manager to get articles 139 00:10:37,030 --> 00:10:43,120 by source and then I can load the individual article. 140 00:10:45,830 --> 00:10:52,250 Getting it from our news manager, don't get article by source Todd Value. 141 00:10:52,310 --> 00:11:01,190 So whatever the current value for the article sources and then I can use my source content and post 142 00:11:01,190 --> 00:11:03,710 the article to it like so. 143 00:11:04,520 --> 00:11:08,780 And while the article has articles in it. 144 00:11:11,110 --> 00:11:14,920 Which if it's empty, I'm just going to pass an empty list to it. 145 00:11:16,830 --> 00:11:23,100 So the article itself, well, you could say it's the top news, so maybe we could give it a different 146 00:11:23,100 --> 00:11:23,460 name. 147 00:11:23,820 --> 00:11:28,220 But this gets me the article by source. 148 00:11:28,230 --> 00:11:32,250 Well, it's actually multiple articles, so it's going to give me the articles by source that we should 149 00:11:32,250 --> 00:11:35,850 maybe call these articles thought articles. 150 00:11:36,030 --> 00:11:38,910 And if it's not empty, then use the articles. 151 00:11:38,910 --> 00:11:40,320 If it's empty, use an empty list. 152 00:11:40,830 --> 00:11:41,210 All right. 153 00:11:41,280 --> 00:11:46,920 Now, while testing, I realized something, and that's why I copy and paste things. 154 00:11:46,920 --> 00:11:47,830 Always tricky. 155 00:11:47,850 --> 00:11:54,720 So here in our news manager, we had this function get articles by source, and I still used to retrofit 156 00:11:54,720 --> 00:11:58,200 service, which then uses our news service. 157 00:11:58,200 --> 00:12:00,960 And you see, this method is still great out. 158 00:12:01,050 --> 00:12:06,270 So I never used it, which is why I will not see any items here. 159 00:12:06,480 --> 00:12:10,470 So let's change that by changing the method that we're calling here. 160 00:12:10,470 --> 00:12:15,150 So now we're going to get articles by source in our get articles by source method. 161 00:12:16,270 --> 00:12:18,060 OK, so by sources or whatever. 162 00:12:18,150 --> 00:12:20,850 So we're not passing the source name value. 163 00:12:21,360 --> 00:12:26,460 This still stays the same, but here we just need to make sure that this method name is different. 164 00:12:26,850 --> 00:12:33,570 So let me rerun this and not on my phone, but on the Android device that we have here, the emulator. 165 00:12:34,260 --> 00:12:37,980 And then we should hopefully see the articles as well. 166 00:12:39,770 --> 00:12:42,050 So let's go over to sources, and there we are. 167 00:12:42,080 --> 00:12:43,550 Read full article here. 168 00:12:43,760 --> 00:12:46,190 It doesn't look exactly the same, but yeah, it's fine. 169 00:12:46,640 --> 00:12:48,170 You can design it if you want. 170 00:12:48,200 --> 00:12:49,990 Now let's look for talkSPORT. 171 00:12:50,000 --> 00:12:51,590 You see talkSPORT Sport. 172 00:12:51,590 --> 00:12:54,380 We just have two articles than The Verge. 173 00:12:54,380 --> 00:12:56,600 We have multiple articles from The Verge here. 174 00:12:57,050 --> 00:13:00,080 Let's just go over to this article clicking on it and you see. 175 00:13:01,230 --> 00:13:08,490 It lowers the verge for us, perfect, so now we can search by source, and this has two more must have 176 00:13:08,490 --> 00:13:10,050 to do with the padding of our cards. 177 00:13:10,050 --> 00:13:16,560 So let's check out why it looks so poor and this would be this sources, Katie. 178 00:13:17,830 --> 00:13:23,770 All right, so this has to do with this card, so this is a clickable text, and I'd say we should we 179 00:13:23,770 --> 00:13:25,480 need a little bit of. 180 00:13:27,330 --> 00:13:35,250 A modifier here, so let me add that modifier in between here modifier, which will be modified up heading 181 00:13:35,520 --> 00:13:38,640 with, say, eight density pixels in here. 182 00:13:39,420 --> 00:13:41,250 So this should then look a lot better. 183 00:13:41,670 --> 00:13:42,900 Let me try that. 184 00:13:45,070 --> 00:13:46,840 Let's go to sources, yeah, that's it. 185 00:13:47,440 --> 00:13:47,830 All right. 186 00:13:48,250 --> 00:13:49,330 That's it for this video. 187 00:13:49,390 --> 00:13:50,170 I hope you enjoyed it. 188 00:13:50,200 --> 00:13:54,730 Now you know how to swap this sources and. 189 00:13:55,980 --> 00:14:02,340 Yeah, you can now read our bunch of articles where categories by a source's way are top news and all 190 00:14:02,340 --> 00:14:02,880 the good stuff. 191 00:14:03,200 --> 00:14:04,350 So you in the next one?