1 00:00:00,970 --> 00:00:07,270 Welcome back in the next couple of videos, we are going to build this a little profile page that you 2 00:00:07,270 --> 00:00:08,109 can see here. 3 00:00:08,380 --> 00:00:15,730 So we called it simple doc profile application, and that's exactly what it should be about creating 4 00:00:15,730 --> 00:00:17,800 simple doc profiles, as you see here. 5 00:00:18,040 --> 00:00:25,180 So while this might seem simple, what we have here, there is a lot going on and you are going to learn 6 00:00:25,180 --> 00:00:28,660 a lot about prebuilt, composable UI elements. 7 00:00:29,320 --> 00:00:35,800 This will expose you to some basic, composable as well as attributes. 8 00:00:37,860 --> 00:00:44,640 So let's go back to our project and create a new file, so inside of your profile page? 9 00:00:44,670 --> 00:00:52,500 Go ahead and create a new cutting class file and select file here, and I'm going to call this one profile 10 00:00:52,680 --> 00:00:53,220 page. 11 00:00:55,500 --> 00:00:59,670 Make sure to use file and not class, because I don't want to use a class here. 12 00:00:59,700 --> 00:01:01,380 This should be really a simple file. 13 00:01:03,380 --> 00:01:11,060 So let's go ahead and create our first composable function in here using the composable keyword composable 14 00:01:11,090 --> 00:01:18,110 like, so therefore you see we need to import Android X compose runtime composable and we haven't done 15 00:01:18,110 --> 00:01:19,640 that manually or I haven't. 16 00:01:19,640 --> 00:01:26,900 This has been done for me by the IDE Android Studio, so I'm going to call this one profile page. 17 00:01:27,350 --> 00:01:31,580 OK, so this will contain my entire profile page, so to speak. 18 00:01:32,510 --> 00:01:35,660 And now what I want to have is a column. 19 00:01:36,140 --> 00:01:38,960 Therefore, I can just go ahead and use the column. 20 00:01:40,210 --> 00:01:42,340 In here, this is another composable. 21 00:01:42,460 --> 00:01:49,630 So let's import it and you can jump into it and you can see it has this at composable annotation. 22 00:01:50,590 --> 00:01:51,550 So a column. 23 00:01:52,590 --> 00:01:56,220 Needs to be defined so you can see here. 24 00:01:56,310 --> 00:01:58,420 I couldn't use the brackets. 25 00:01:58,560 --> 00:02:00,570 I would have had to enter some details. 26 00:02:01,020 --> 00:02:02,760 And you can jump in here and see. 27 00:02:03,030 --> 00:02:06,810 We would have had to add the modifier vertical arrangement and so forth. 28 00:02:07,170 --> 00:02:10,830 But what we're going to do instead is we're going to use the curly brackets. 29 00:02:11,340 --> 00:02:19,080 This will give us the column scope and does column composable is used for vertical placing of other 30 00:02:19,080 --> 00:02:19,920 UI elements. 31 00:02:20,250 --> 00:02:26,580 So putting them together, it is one of the layout composable that allows you to place items within 32 00:02:26,580 --> 00:02:26,760 it. 33 00:02:27,330 --> 00:02:30,300 So let's add an image inside this column. 34 00:02:31,710 --> 00:02:37,080 OK, so now I would like to add an image to all my project, and therefore I can go over to the resource 35 00:02:37,080 --> 00:02:37,590 manager. 36 00:02:37,860 --> 00:02:40,320 Click on this plus and import troubles. 37 00:02:40,920 --> 00:02:47,100 And then I just need to go over to the folder where I have my draw bill and I'm just going to enter 38 00:02:47,100 --> 00:02:50,300 the path here and select the husky. 39 00:02:51,120 --> 00:02:52,630 So there is my image. 40 00:02:52,650 --> 00:02:55,890 I'm going to click next and import this image. 41 00:02:55,980 --> 00:02:58,110 So now it will be available in my travels. 42 00:02:59,190 --> 00:03:04,530 OK, now that I have the image ready, let's go ahead and actually use it in my column. 43 00:03:04,560 --> 00:03:10,140 So inside of my profile page, therefore, we can use to image composable. 44 00:03:10,800 --> 00:03:13,680 So the image needs a couple of parameters. 45 00:03:13,680 --> 00:03:20,680 We need to import images well, and here we're going to use to compose UI graphics here. 46 00:03:21,270 --> 00:03:24,000 And it's this one, this compose foundation image. 47 00:03:24,630 --> 00:03:27,270 We need to define the painter. 48 00:03:27,990 --> 00:03:36,120 And I'm going to define the painter resource, which has the ID of all the trouble that husky. 49 00:03:36,360 --> 00:03:40,220 OK, so this was the name of the file in my resource manager. 50 00:03:40,230 --> 00:03:47,310 You see, it has this name husky, and it's inside of my resources so you can go over to your project 51 00:03:47,460 --> 00:03:49,200 and then go to resources. 52 00:03:49,230 --> 00:03:53,700 This is to our this greater R Dot folder called Drabble. 53 00:03:54,150 --> 00:03:56,820 And there is this husky JPEG that was added. 54 00:03:57,540 --> 00:03:59,850 OK, so that's how you can find the path here. 55 00:04:00,390 --> 00:04:05,910 And now that we have the painter, I'm going to define the content description as well. 56 00:04:06,270 --> 00:04:10,210 So content description will be husky, Mike. 57 00:04:10,230 --> 00:04:13,410 So and you see, now my image is happy. 58 00:04:13,410 --> 00:04:18,450 I don't get the error anymore, and I'm pretty much content with what I have. 59 00:04:18,839 --> 00:04:25,200 So the image composable is used for displaying pictures, and it accepts to compulsory parametres painter 60 00:04:25,200 --> 00:04:26,520 and content description. 61 00:04:26,820 --> 00:04:31,710 So Painter requires to paint a resource which can just be adorable with the ID, as we've seen. 62 00:04:32,040 --> 00:04:37,290 And then we need to pander to the content description which accepts a string or not. 63 00:04:37,340 --> 00:04:44,280 OK, so we wouldn't have to enter something specifically personal as well to preview the elements. 64 00:04:44,280 --> 00:04:47,280 We just added we need a preview function. 65 00:04:47,610 --> 00:04:50,910 So let's add one below our profile page function. 66 00:04:51,510 --> 00:04:55,140 So here can you recall how the preview function would look like? 67 00:04:55,950 --> 00:04:59,550 Well, we can just learn from our main activity. 68 00:04:59,790 --> 00:05:03,870 So we needed this preview annotation and the composable annotation. 69 00:05:04,440 --> 00:05:13,200 So let's go over here and let's add this preview annotation, as well as the add composable and then 70 00:05:13,200 --> 00:05:17,040 create a function called profile page preview. 71 00:05:18,730 --> 00:05:19,210 Like so. 72 00:05:20,100 --> 00:05:28,200 And now let's just call our profile page function, which is this one that we've just created now in 73 00:05:28,200 --> 00:05:33,090 the designer or in the split view where we needs to build and refresh. 74 00:05:34,230 --> 00:05:38,610 And this will then allow us to see our husky inside of our designer here. 75 00:05:40,730 --> 00:05:41,720 And there we are. 76 00:05:41,870 --> 00:05:43,430 We have our little husky. 77 00:05:45,570 --> 00:05:51,220 So now let's add two text elements underneath this image because we used this column. 78 00:05:51,240 --> 00:05:53,940 It can contain multiple different items in it. 79 00:05:54,240 --> 00:06:02,310 So let's go ahead and just add a text composable with a text property of Siberian Husky. 80 00:06:03,690 --> 00:06:09,780 All right, let me add the text here, which is our compose one. 81 00:06:10,140 --> 00:06:16,380 So again, the compose material text here and now. 82 00:06:17,690 --> 00:06:18,920 Let's add another text. 83 00:06:20,240 --> 00:06:23,510 This one will have the text of Germany. 84 00:06:24,110 --> 00:06:26,060 OK, so let's say it sits in Germany. 85 00:06:26,510 --> 00:06:28,130 This little husky? 86 00:06:29,330 --> 00:06:31,040 OK, let's refresh this page. 87 00:06:31,310 --> 00:06:33,530 And we should see the image and underneath. 88 00:06:33,560 --> 00:06:36,840 We should then see our text so you can see here. 89 00:06:36,860 --> 00:06:41,100 Siberian Husky Germany now, unfortunately, the background is gray. 90 00:06:41,360 --> 00:06:42,650 So how can we change that? 91 00:06:43,040 --> 00:06:45,470 Well, actually, we just need to at this show. 92 00:06:45,470 --> 00:06:46,340 Background True. 93 00:06:46,490 --> 00:06:48,080 So you see, the background is white. 94 00:06:48,500 --> 00:06:53,060 We can get that by adding this to our preview annotation as well. 95 00:06:53,810 --> 00:06:57,440 So now you can see what once it is added dead. 96 00:06:57,920 --> 00:06:59,240 The background this white now. 97 00:07:01,400 --> 00:07:06,620 OK, so now let's go over to your main activity and get rid of this entire stuff that we had, so the 98 00:07:06,620 --> 00:07:08,090 greeting the my app. 99 00:07:09,140 --> 00:07:16,070 And instead of calling greeting here, let's call our profile page that we just created, and let's 100 00:07:16,070 --> 00:07:22,040 run our application to see if it's going to display accordingly onto our emulator. 101 00:07:22,370 --> 00:07:24,080 So now we should see our husky. 102 00:07:24,290 --> 00:07:26,060 You see the text as well here. 103 00:07:26,060 --> 00:07:28,310 Siberian husky from Germany. 104 00:07:29,640 --> 00:07:36,650 OK, so you see, it's not perfect yet, the image really just doesn't use the entire available space 105 00:07:36,990 --> 00:07:37,680 and so forth. 106 00:07:37,690 --> 00:07:42,810 So there are a bunch of things that we can still improve, but that's something that we are going to 107 00:07:42,810 --> 00:07:43,770 see in the next video. 108 00:07:44,010 --> 00:07:46,050 So we're going to decorate the screen.