Welcome back.
In this video, we are going to set up a part of our categories screen, so here you can see the different
categories that we have like business, entertainment, general and so forth, and you see that the
selected option is going to stay as well as we have a side scroll view here or a scroll of a view that
goes to the horizontal direction and not the vertical direction, as we usually have in here, for example.
All right, so let's get started building that.
Therefore, let's go over to our categories page, so we had those categories.
File where we for now just had a simple text.
And we're going to add another composable here.
So I'm going to create two categories tab.
So fun category tab.
Like so and it will need a category itself, which will be a string.
So category of type string, then we need to know which one is selected.
So this will be a Boolean, which I'm going to set default by default, and then I'm going to have an
on fetch kid to go every variable, which will get a string and return a unit.
OK.
So can custom write our our code, so when something was selected, what should happen, so to speak?
All right.
And then what I need in here is, first of all, going to be the background.
So I want to set the background color of it.
As you saw, this background color is changing depending on whether it's selected or not.
So we can just check if is selected.
Then we are going to use one color.
So color resource here with the art of color dot purple 200 and we need to import art.
So let's import that.
Then there is this color purple on.
There are colors XML file, which you will find under your.
Well, it's under duress values here.
There's the colors XML file in there you will find some predefined colors, like the purple colors,
which have been added for the project by default.
I don't.
If it's not going to be selected, then I'm going to have this else clause and we can put it here else.
We're going to use color resource with IDR Dot.
Color.
Thought and then it will be purple 700.
OK, so this is our if statement here and what's wrong with the color surface?
And for any of this to work, let's make sure we have this in a composable.
OK, then this error disappears.
That's always a tricky one.
The code itself is fine, but you forgot, for example, that it should be a composable.
OK, and then I will set the surface of the category tap.
So there's this surface composable.
And I want to actually import it.
So for surface composable, let's import this One UI modifier surface and here I'll have a modifier
first, which is just going to design it as I'm going to design the little bit of padding towards the
horizontal direction.
So what's both directions in the horizontal level and the vertical 16 dpi and what to import dpi?
So towards the horizontal direction, it's going to just have four density pixels towards the others.
It's going to have more.
And then the modifier will also have a clickable so I want to be able to click on it.
And once I click on any of the given, then on such categories should be called where I'm going to pass
the category itself.
So this is quite connected here, so to speak.
So when we are creating a category tap, we are passing a category to it and we're passing what should
happen once we are fetching a category.
So once we're loading the data for a specific category and we are passing the category that is passed
to the category tab to the on fetch category string.
So this is a string as you see here, so it's fine to pass it.
So we're basically saying which category was selected?
OK.
And then I'm going to set the shape of the category tab to be small.
So a material theme.
That shape that small or shapes or small.
OK, and this is not as intended, so here.
Let me see this.
This is still the surface.
This was just generated for me by default.
Like when they added the material theme here and the color should be using the background that we set
up.
So this will be the surface of the item.
OK, now I want to say what should be the content of the Category tab item?
So here I'm just going to say that it should be a text and the text should have category text.
So the text content of that text will be category.
And then I'm going to add a style to it as well.
So it's going to use the material theme that typography that body to style.
And you can use any other style if you want to.
And the color is just going to be white, so color is white.
We need to import color here for this.
So let's import color.
This one, the compose version, and then I'm going to add the modifier to style.
It is a little bit more with padding, for example.
So towards the left of eight density pixels, actually towards all directions of eight density pixels.
So deep.
Like so.
All right, so this will be the category tab composable and we're going to display in our categories
in a bit, but before that, let's set up the different categories that we want to have available in
our application.
So I'm just going to create a new file for this and enum class, so to speak.
Which I'm going to put into my models folder, so I had this model's folder, and let's go ahead and
create a new column file class.
And this one will be an enum class.
So article category and an enum class allows us to create keywords that we assign a certain value to.
So that's really the advantage that we have here.
So this category or article category should have a category name that is passed to it to glory name,
which will be of type string.
And then inside of it, I'm going to set up the different.
Values, so I'm going to have a business with the category name of business.
Then I'm going to have the entertainment.
Category and so forth, so I'm just going to add the most important categories here entertainment,
general health, science, sports and technology.
OK, so this will be different categories that I want to have in my application, as you can see here,
so business, entertainment, general health, science, sports and technology.
So we're just creating this big keyword and assigning a string to word so capitalized keyword that we
can now use whenever we are.
Creating a article category or using the article category class.
So now let's get the article category.
Therefore, I'm going to create a function.
Get all article kitty.
Categories you could call a category one category.
Yeah, I'm just going to leave it like this, it's fine.
This would be a list of article category.
So this would just return an article category list with all of those categories.
So business, entertainment and so forth.
So let's return a list of those individual keywords like so return list of business, entertainment
and general health science, sports and technology.
Therefore, we can either import them or use them like so like with the article category keyword and
well in front of it.
Like so.
Sports and technology.
All right.
So this will give us all the categories, the article categories, and now how about getting a specific
one?
Well, there I'm going to use the new function here.
Good article category.
Like a specific one.
And here I need to pass into category name, so category which will be the string type.
And it will return an article category, Nullarbor, so it can also return nothing.
So what I'm going to do is I'm going to create a map and the map will have values.
That are going to be associated.
By our associate by the article category category name.
And these values only work if I import the article category in this entire file, so import EU Dot Orioles
start and usurp the models the DOT article category like so.
And actually, the star.
Like debts and then the values are going to work so that we can return.
The Met at the position of the category.
Though this get article category will get a string, and it will basically return to category based
on that string.
So it takes this map where it has the value associated with a category name, and then it just uses
this map and gets the one where the categories are overlapping, so to speak.
So whenever we're passing signs, for example, it's going to return the science category.
OK, now inside of categories, we created this category Typekit, whenever we are using it so far,
so we need to change that.
So instead of just displaying a text here, I want to display the different category items.
Therefore, I'm going to create or used on for each category here, which will be nothing by default.
So we'll do nothing by default, but we can override it and we need to pass the new manager to it so
that we can get all both the categories.
So now we can go ahead and get all categories and call them types items more like storing them in taps
items.
And now we can go ahead and create this column, which contains all of those lazy rows.
So it's just going to be one column for now.
But then later on, we're going to add more details in here.
But for now, it's going to be this lazy row, my lazy row like we've seen before with lazy columns.
Is it one that we can make scrollable?
So let's go ahead and create a column here and it will have a lazy row in it, as I said.
And now we can import the lazy row class in here.
Well, doesn't want to import it otherwise.
So now let's import the lazy roll and now we get the lazy list scope.
So all of the items that are going to be in there and we can just go ahead and use those items to parse
the tabs, items that size into it.
So we're just going to say go through all of those items individually and get the category from that
taps item.
So category will be taps items and we're going to get it at the position of it.
So it's going to use this taps item.
It's going to get all categories that we have.
So this get all category articles or all the card categories is not going to get called and it's going
to give us a list of all of the categories.
And now we are displaying those.
OK, so I'm going to now create a category tab, which is this composable that we just created and I'm
going to pass the category in it.
And now I just need while I need to be more specific, I need to get the category name itself.
So here you see.
Like the category name like this and I'll put the on fetch category.
That's where I'm going to pass that on for each category that is passed to this categories composable.
All right, so now we can design this category, tap water pass, some more details to it, for example,
is it selected or not?
Because you see a category tab has the is selected value, then the category itself and the on for each
category.
And because we are using name parameters, we can just work with the order.
We are happy with.
So we could have also used the correct order that would have been fine as well.
So we're going to set is selected to be news manager DOT selected category.
OK, and then here we will need to set which item is selected.
So what is the category that we have gotten from the news manager?
But for that, we need to prepare our news manager to be ready for that.
So let's jump over to our news manager and I have it open right here.
OK, and here we need to add a property at the very top.
Here we are getting the news response and here we can just go ahead and create a new valve, which will
be the selected category, which will be a mutable state.
So mutable state of type article category.
Nullarbor.
So it could be now, and it will be a mutable state off, so mutable state of which is all which we're
passing null to.
That's why it's fine if it's not another bill.
So now we have the selected category and we can create a function in here, which will be triggered
whenever we are changing the selected category.
So there's a function going to be on selected category changed where we need to pass in the category,
which will be of type string and then we can say what should happen once we selected the different category.
So I'm just going to say that the new category should be the.
Good article category with the category name, but we have asked, so here this category, so at this
point, then the guy said this word so many times, so it really wears off.
So I'm sorry for that, but it's just how it happens in programming sometimes, right?
And then I can go ahead and set the selected categories of value because it's as you as you recall,
it's a state, right?
So we're using states in order to update our UI or the cool thing about states is when a date that data
piece changes, then like every listener, so to speak, is updated.
So in our case, the UI will be updated.
And yeah, so here we can just say, OK, the selected category will be the new category.
So this will be called whenever we're changing the current select, add the category.
OK, so for example, when we're changing to entertainment, then well, this method will be called.
It will set the new category, which will then internally modify the UM.
I think here it will modify the category tab with the um.
Yeah, I will notify it basically saying, OK, you are the one selected and stuff.
OK, so then it will be selected and get the color.
But the selected thing itself is not happening yet because in here in categories, we need to take care
of that.
So we need to.
While we prepared our news manager now has this on select category changed and it has a selected category.
So now we can use it and say so here, when is selected.
So when this category tab is being selected, well, we're setting the value, whether it's selected
based on the news manager's selected category value where we're comparing it to category.
So this is a double equal sign.
We're not setting it, we're comparing it to.
That's really important because we're basically using an if statement because is selected is not holding
a category and neither does it hold a string.
It is holding a Boolean, as you see here.
So if the category that we are getting here for the current tab is the same category as the one that
is currently selected, the news manager, then the current category tab will be selected.
But as we have multiple tabs, you can see only one of them will be selected.
So it is quite complex code that we have built here.
But what do we have select?
Will create it this way is a very safe code, so it will just work automatically, so to speak.
We don't need to manually said, OK, well, the one that we clicked on should now be selected, but
we're just saying change to state for the one that is clicked on and then everything else will happen
based on that.
So now at this point, the news item needs to know about this change as well, because while we're getting
an error here, because the categories here you see it doesn't know about any news manager that it could
pass, for example, and it doesn't know anything about the on fetch category and stuff.
Because if you look at our categories now, you see we need to pass on each category and we need to
pass a news manager.
So let's do just that.
Therefore, we need to change what we are getting in the bottom navigation up here.
So let's say we also want to have a news manager at this point.
And then we can pass that news manager as the news manager here.
So this will be our news manager and then we need to also say what should happen once we are fetching
the category.
And here I'm just going to use a lambda, which is going to go ahead and say, Well, call the news
manager and it's on selected category changed to be it.
And it is going to be the string that we're getting here.
So on fetch Category C here gives us a string because, well, let's jump to on such Category C, we
get a string from it.
So once we are using it, once we are using or creating the categories to get the string and we are
passing or using that string here, we're passing it to the on selected category changed, which needed
the string, which is of Typekit.
While we're just going to be called Category two, then change the selected value.
So this is quite interconnected everything.
And now obviously, we also need to make a change to our bottom navigation item that took care of the
articles, and he will need to pass and use manager as well.
So I'm just going to pass the news manager that we get to our navigation item itself.
So the function navigation gets in use manager.
We're basically creating a new use manager and we're passing that news manager to our bottom navigation.
And at this point, we should be able to run this.
So let's see.
Let's go to categories, and there we are.
So we have our list, but select one, you see now it's selected.
OK, now science is selected now sports is selected and so forth, so based on that, we want to now
display the right information and that's what we're going to set up in the next video.
So see you there.