All right, so let's get started by creating another empty, composed activity project or a new project
with an empty compose activity.
I'm going to call this one news app and all the other settings are going to be the default settings.
So let's go ahead and create that.
We're going to start with the first two pages and navigation.
So let's go ahead.
And first of all, go to our main activity right here and take care of this greeting method that we
want to display.
And the entire method, actually, because we're going to use our own methods and our own composable.
OK, so the next thing that I will need is going to be the navigation dependency because I want to use
the compose navigation.
Therefore, I need to go over to my dependencies here and we need to add a line that is going to be
the navigation dependency, which is this one here.
So Android X Navigation Navigation compose to that 4.0, and I'm going to use better zero the two.
So let's sync that.
OK, and now we should be good to start with the navigation compose element.
So I'm going to create a new package because I want to have multiple different screens, right?
So inside of my UI theme in here, I'm going to create a new package.
OK, so we have the theme.
And while actually this is inside of UI, we have the theme folder, but we have no other folder in
the UI for that would, which is why we see UI Dot theme here.
OK, so this is a sub folder theme folder, just some folder of UI.
So if we create a new folder inside of UI or a new package, then this will create a theme for the for
us.
Visually, it will look like a second folder, so I'm going to call this one screen like so.
And now you see where the theme folder with color, shape, theme and type.
And we have our screen folder, which is going to be one part of our user interface.
So we will need to create a new Kotlin file class that I'm going to call top news, Katie.
So here top news.
Like so.
And this top news will just be a new composable that I want to use.
All right.
So here let's go ahead and use that at composable.
He would.
And then create the function, which I'm going to call top news the same name as our file name.
All right.
And then I will put everything into a column.
So for now, this column would just have a modifier which I'm going to set to modify or not fill Max
with.
So it should fill the entire width, and I'm going to have a horizontal alignment, which is going to
align everything horizontally.
So center horizontally, like so.
All right.
And inside of it, I'm just going to have a text which is just going to say, Well, this will be a
text property, so we need to import text here.
That's important.
And the compose UI version, and then we can set the text property to be something like top news, for
example, and the font weight to just be something like semi bold.
So font weight, that semicolon, which is as you see, my preferred bold version.
And then if I want to have a preview in here, then let's also go ahead and create a preview, annotation
and a composable annotation to our preview method.
So fun and top news.
Same name as at the top and then preview assigned to it like so.
And in here, we can just call our top news like so so this one, I called this method and will give
us a preview of it, which will just be a column with some text that says top news.
So once we run this application, we should be able to see it in the designer.
We will obviously not be able to see it in our application because we never use top news outside of
the preview itself.
So it main activity.
We never actually said that we want to use top news.
But the designer should give me something so we see here.
We just have this column, which just has one text, which is top news.
OK, so that's our preview.
And while you could add some financial background because like this gray background doesn't look great.
So let's set that to true so that we can actually see the background, the white background, so to
speak.
The default one.
And now I'm going to have a detailed screen as well, so we have the top news where you can see all
of the news and then we have the details screen where we can click into and then see the details.
All right.
So let's go ahead and create a new file for that, which I'm going to call details screen.
And this will also be a composable which is used all the time when we work with the user interface interfaces,
right as you see here.
And then we go ahead and call this one detail screen.
So we are going to display the details on the screen.
So for now, I'm just going to use a column here and let me just copy this column from our top news
to keep it simple.
So we have the horizontal alignment where the alignment will be horizontally towards the center.
And this one will be the details screen.
OK.
Or detail screen.
So the forward will also be semi bold.
And let's do the same thing as we've done here with the preview.
Just rename it to be called details screen like soap or detail screen and then call the details screen
in here.
So if we rerun our application, we should also see it and the designer.
So now let's look at a split view here.
You see, we just have this little text here that says detailed screen.
So this is just a setup.
There's nothing too interesting happening, but we have the preparation for our two screens and we will
take care.
Of the NAF host and NAF controller in the next video because we want to be able to jump between those
two screens, right?
So let's look at that in the next video.