Welcome back in the next couple of videos, we are going to build this a little profile page that you
can see here.
So we called it simple doc profile application, and that's exactly what it should be about creating
simple doc profiles, as you see here.
So while this might seem simple, what we have here, there is a lot going on and you are going to learn
a lot about prebuilt, composable UI elements.
This will expose you to some basic, composable as well as attributes.
So let's go back to our project and create a new file, so inside of your profile page?
Go ahead and create a new cutting class file and select file here, and I'm going to call this one profile
page.
Make sure to use file and not class, because I don't want to use a class here.
This should be really a simple file.
So let's go ahead and create our first composable function in here using the composable keyword composable
like, so therefore you see we need to import Android X compose runtime composable and we haven't done
that manually or I haven't.
This has been done for me by the IDE Android Studio, so I'm going to call this one profile page.
OK, so this will contain my entire profile page, so to speak.
And now what I want to have is a column.
Therefore, I can just go ahead and use the column.
In here, this is another composable.
So let's import it and you can jump into it and you can see it has this at composable annotation.
So a column.
Needs to be defined so you can see here.
I couldn't use the brackets.
I would have had to enter some details.
And you can jump in here and see.
We would have had to add the modifier vertical arrangement and so forth.
But what we're going to do instead is we're going to use the curly brackets.
This will give us the column scope and does column composable is used for vertical placing of other
UI elements.
So putting them together, it is one of the layout composable that allows you to place items within
it.
So let's add an image inside this column.
OK, so now I would like to add an image to all my project, and therefore I can go over to the resource
manager.
Click on this plus and import troubles.
And then I just need to go over to the folder where I have my draw bill and I'm just going to enter
the path here and select the husky.
So there is my image.
I'm going to click next and import this image.
So now it will be available in my travels.
OK, now that I have the image ready, let's go ahead and actually use it in my column.
So inside of my profile page, therefore, we can use to image composable.
So the image needs a couple of parameters.
We need to import images well, and here we're going to use to compose UI graphics here.
And it's this one, this compose foundation image.
We need to define the painter.
And I'm going to define the painter resource, which has the ID of all the trouble that husky.
OK, so this was the name of the file in my resource manager.
You see, it has this name husky, and it's inside of my resources so you can go over to your project
and then go to resources.
This is to our this greater R Dot folder called Drabble.
And there is this husky JPEG that was added.
OK, so that's how you can find the path here.
And now that we have the painter, I'm going to define the content description as well.
So content description will be husky, Mike.
So and you see, now my image is happy.
I don't get the error anymore, and I'm pretty much content with what I have.
So the image composable is used for displaying pictures, and it accepts to compulsory parametres painter
and content description.
So Painter requires to paint a resource which can just be adorable with the ID, as we've seen.
And then we need to pander to the content description which accepts a string or not.
OK, so we wouldn't have to enter something specifically personal as well to preview the elements.
We just added we need a preview function.
So let's add one below our profile page function.
So here can you recall how the preview function would look like?
Well, we can just learn from our main activity.
So we needed this preview annotation and the composable annotation.
So let's go over here and let's add this preview annotation, as well as the add composable and then
create a function called profile page preview.
Like so.
And now let's just call our profile page function, which is this one that we've just created now in
the designer or in the split view where we needs to build and refresh.
And this will then allow us to see our husky inside of our designer here.
And there we are.
We have our little husky.
So now let's add two text elements underneath this image because we used this column.
It can contain multiple different items in it.
So let's go ahead and just add a text composable with a text property of Siberian Husky.
All right, let me add the text here, which is our compose one.
So again, the compose material text here and now.
Let's add another text.
This one will have the text of Germany.
OK, so let's say it sits in Germany.
This little husky?
OK, let's refresh this page.
And we should see the image and underneath.
We should then see our text so you can see here.
Siberian Husky Germany now, unfortunately, the background is gray.
So how can we change that?
Well, actually, we just need to at this show.
Background True.
So you see, the background is white.
We can get that by adding this to our preview annotation as well.
So now you can see what once it is added dead.
The background this white now.
OK, so now let's go over to your main activity and get rid of this entire stuff that we had, so the
greeting the my app.
And instead of calling greeting here, let's call our profile page that we just created, and let's
run our application to see if it's going to display accordingly onto our emulator.
So now we should see our husky.
You see the text as well here.
Siberian husky from Germany.
OK, so you see, it's not perfect yet, the image really just doesn't use the entire available space
and so forth.
So there are a bunch of things that we can still improve, but that's something that we are going to
see in the next video.
So we're going to decorate the screen.