1 00:00:00,930 --> 00:00:06,960 All right, so let's get started by creating another empty, composed activity project or a new project 2 00:00:06,960 --> 00:00:08,970 with an empty compose activity. 3 00:00:09,000 --> 00:00:15,760 I'm going to call this one news app and all the other settings are going to be the default settings. 4 00:00:15,780 --> 00:00:17,310 So let's go ahead and create that. 5 00:00:17,400 --> 00:00:20,760 We're going to start with the first two pages and navigation. 6 00:00:21,240 --> 00:00:22,290 So let's go ahead. 7 00:00:22,290 --> 00:00:28,680 And first of all, go to our main activity right here and take care of this greeting method that we 8 00:00:28,680 --> 00:00:29,790 want to display. 9 00:00:30,270 --> 00:00:36,510 And the entire method, actually, because we're going to use our own methods and our own composable. 10 00:00:37,440 --> 00:00:42,570 OK, so the next thing that I will need is going to be the navigation dependency because I want to use 11 00:00:42,570 --> 00:00:44,090 the compose navigation. 12 00:00:44,100 --> 00:00:50,640 Therefore, I need to go over to my dependencies here and we need to add a line that is going to be 13 00:00:50,640 --> 00:00:53,790 the navigation dependency, which is this one here. 14 00:00:53,790 --> 00:01:00,540 So Android X Navigation Navigation compose to that 4.0, and I'm going to use better zero the two. 15 00:01:00,960 --> 00:01:02,130 So let's sync that. 16 00:01:03,950 --> 00:01:09,830 OK, and now we should be good to start with the navigation compose element. 17 00:01:11,380 --> 00:01:16,090 So I'm going to create a new package because I want to have multiple different screens, right? 18 00:01:16,450 --> 00:01:21,730 So inside of my UI theme in here, I'm going to create a new package. 19 00:01:22,010 --> 00:01:23,410 OK, so we have the theme. 20 00:01:24,040 --> 00:01:29,410 And while actually this is inside of UI, we have the theme folder, but we have no other folder in 21 00:01:29,410 --> 00:01:32,740 the UI for that would, which is why we see UI Dot theme here. 22 00:01:32,860 --> 00:01:36,060 OK, so this is a sub folder theme folder, just some folder of UI. 23 00:01:36,070 --> 00:01:42,400 So if we create a new folder inside of UI or a new package, then this will create a theme for the for 24 00:01:42,400 --> 00:01:42,550 us. 25 00:01:42,850 --> 00:01:47,710 Visually, it will look like a second folder, so I'm going to call this one screen like so. 26 00:01:48,040 --> 00:01:51,370 And now you see where the theme folder with color, shape, theme and type. 27 00:01:51,730 --> 00:01:55,540 And we have our screen folder, which is going to be one part of our user interface. 28 00:01:55,540 --> 00:02:02,680 So we will need to create a new Kotlin file class that I'm going to call top news, Katie. 29 00:02:02,770 --> 00:02:03,970 So here top news. 30 00:02:05,860 --> 00:02:06,450 Like so. 31 00:02:07,680 --> 00:02:11,970 And this top news will just be a new composable that I want to use. 32 00:02:12,390 --> 00:02:12,840 All right. 33 00:02:12,840 --> 00:02:16,110 So here let's go ahead and use that at composable. 34 00:02:16,230 --> 00:02:16,680 He would. 35 00:02:18,120 --> 00:02:23,520 And then create the function, which I'm going to call top news the same name as our file name. 36 00:02:23,610 --> 00:02:23,940 All right. 37 00:02:24,450 --> 00:02:27,600 And then I will put everything into a column. 38 00:02:27,600 --> 00:02:32,100 So for now, this column would just have a modifier which I'm going to set to modify or not fill Max 39 00:02:32,100 --> 00:02:32,400 with. 40 00:02:32,580 --> 00:02:40,230 So it should fill the entire width, and I'm going to have a horizontal alignment, which is going to 41 00:02:40,470 --> 00:02:42,690 align everything horizontally. 42 00:02:42,690 --> 00:02:45,090 So center horizontally, like so. 43 00:02:45,840 --> 00:02:46,230 All right. 44 00:02:46,860 --> 00:02:52,320 And inside of it, I'm just going to have a text which is just going to say, Well, this will be a 45 00:02:52,320 --> 00:02:54,580 text property, so we need to import text here. 46 00:02:55,050 --> 00:02:55,920 That's important. 47 00:02:56,100 --> 00:03:01,410 And the compose UI version, and then we can set the text property to be something like top news, for 48 00:03:01,410 --> 00:03:05,940 example, and the font weight to just be something like semi bold. 49 00:03:06,090 --> 00:03:12,150 So font weight, that semicolon, which is as you see, my preferred bold version. 50 00:03:12,390 --> 00:03:22,230 And then if I want to have a preview in here, then let's also go ahead and create a preview, annotation 51 00:03:22,680 --> 00:03:28,190 and a composable annotation to our preview method. 52 00:03:28,230 --> 00:03:30,690 So fun and top news. 53 00:03:30,720 --> 00:03:34,620 Same name as at the top and then preview assigned to it like so. 54 00:03:35,790 --> 00:03:41,820 And in here, we can just call our top news like so so this one, I called this method and will give 55 00:03:41,820 --> 00:03:45,480 us a preview of it, which will just be a column with some text that says top news. 56 00:03:45,750 --> 00:03:49,260 So once we run this application, we should be able to see it in the designer. 57 00:03:49,470 --> 00:03:55,830 We will obviously not be able to see it in our application because we never use top news outside of 58 00:03:56,220 --> 00:03:57,390 the preview itself. 59 00:03:57,390 --> 00:03:58,440 So it main activity. 60 00:03:58,440 --> 00:04:01,080 We never actually said that we want to use top news. 61 00:04:01,560 --> 00:04:04,140 But the designer should give me something so we see here. 62 00:04:04,290 --> 00:04:08,370 We just have this column, which just has one text, which is top news. 63 00:04:09,270 --> 00:04:11,820 OK, so that's our preview. 64 00:04:11,820 --> 00:04:16,589 And while you could add some financial background because like this gray background doesn't look great. 65 00:04:16,740 --> 00:04:22,680 So let's set that to true so that we can actually see the background, the white background, so to 66 00:04:22,680 --> 00:04:23,040 speak. 67 00:04:23,040 --> 00:04:23,700 The default one. 68 00:04:25,590 --> 00:04:30,300 And now I'm going to have a detailed screen as well, so we have the top news where you can see all 69 00:04:30,300 --> 00:04:35,280 of the news and then we have the details screen where we can click into and then see the details. 70 00:04:35,640 --> 00:04:35,970 All right. 71 00:04:35,970 --> 00:04:40,650 So let's go ahead and create a new file for that, which I'm going to call details screen. 72 00:04:41,760 --> 00:04:48,300 And this will also be a composable which is used all the time when we work with the user interface interfaces, 73 00:04:48,300 --> 00:04:49,230 right as you see here. 74 00:04:49,590 --> 00:04:53,250 And then we go ahead and call this one detail screen. 75 00:04:54,000 --> 00:04:57,150 So we are going to display the details on the screen. 76 00:04:57,480 --> 00:05:02,880 So for now, I'm just going to use a column here and let me just copy this column from our top news 77 00:05:03,210 --> 00:05:04,190 to keep it simple. 78 00:05:04,200 --> 00:05:09,510 So we have the horizontal alignment where the alignment will be horizontally towards the center. 79 00:05:09,900 --> 00:05:13,500 And this one will be the details screen. 80 00:05:15,230 --> 00:05:15,650 OK. 81 00:05:15,680 --> 00:05:17,060 Or detail screen. 82 00:05:17,360 --> 00:05:19,790 So the forward will also be semi bold. 83 00:05:20,000 --> 00:05:23,150 And let's do the same thing as we've done here with the preview. 84 00:05:23,300 --> 00:05:31,220 Just rename it to be called details screen like soap or detail screen and then call the details screen 85 00:05:31,220 --> 00:05:31,760 in here. 86 00:05:32,120 --> 00:05:35,540 So if we rerun our application, we should also see it and the designer. 87 00:05:36,020 --> 00:05:38,210 So now let's look at a split view here. 88 00:05:38,210 --> 00:05:42,200 You see, we just have this little text here that says detailed screen. 89 00:05:42,560 --> 00:05:44,090 So this is just a setup. 90 00:05:44,090 --> 00:05:52,280 There's nothing too interesting happening, but we have the preparation for our two screens and we will 91 00:05:52,280 --> 00:05:52,970 take care. 92 00:05:54,610 --> 00:06:00,550 Of the NAF host and NAF controller in the next video because we want to be able to jump between those 93 00:06:00,550 --> 00:06:01,570 two screens, right? 94 00:06:02,200 --> 00:06:04,180 So let's look at that in the next video.