Welcome back in this video, we are going to set up this search bar here at the top, as you can see,
there is this beautiful bar where we can now search for news.
I don't know why you would do that, but maybe you want to do that and now you will learn how to do
it.
All right.
So let me say, or let's say we're interested in LeBron news, so we're just going to search for LeBron
and filter for it and we can see squid.
Game creator Huanglong Huke takes a jab at LeBron James, then Lakers star LeBron James handed one game
suspension after and so forth.
So you see, we get a bunch of LeBron James news, so let's go ahead and implement this feature because
this is pretty cool, right?
It will give you a lot of new skills and let's get started.
Therefore, let's go ahead and create a new composable.
Which I'm going to put into my components, so I'm going to call this one search bar.
Mike, so all right, so the search bar.
Will just be a composable.
So let's just add the ad composable annotation again, which will be fun.
Search bar, which will require a query which will be a mutable state of type string and then the news
manager as well.
Therefore, we need to implement mutable state.
So let's do that real quick or import it.
And then what good?
So for this point or at this point, let's add a preview here.
So at preview show or here at previewing the imported show background, I'm going to say that I want
to see the background and then at composable, which will be fun search bar preview.
So which will just display the search bar?
With a query of a mutable state of.
Just an empty string.
And then news manager.
And we need to suppress this Arab because.
That's just what it is.
It is an unremembered, mutable state error that we can suppress so that it doesn't appear so that we
can see the search bar, even though at this point the search bar will be empty.
There's nothing to really display here, but we're going to implement step by step.
OK, before we do that, however, let's go ahead and go over to our chopper news and create a query.
At the top level here, because we get the articles, but now let's add equerry here as well.
Okay.
Query, which will be of type, mutable state, mutable state.
That is of type string.
OK, so let's import the mutable state at this point.
And we're also going to need the news manager, so the top news will need to be able to draw data or
to ask for data.
So let's create a news manager object in your past and use manager object to our top news as well.
We can then use this inside of our column.
So instead of displaying text top news which we have in our application right now, we will need to
replace this.
I'm going to comment this out and this the search bar instead, with the query being the query.
So here, query the inquiry and passing the new manager to it.
So let's import such bar.
Which is inside of a different package, which is why we need to insert it or import it, even though
it's in our own project.
So now that we set up the search bar here, even though it's empty, there's really nothing to show.
It's really nothing in my search bar, even though we're having a query and the news manager.
But the thing is, the news manager itself is not really prepared for this yet.
The news manager doesn't know how to handle a query.
So let's go ahead and create a new variable, which will be called query.
So I'm going to create a vowel query, which will be a mutable state of, for now, an empty string.
So this will just hold a string and based on the string, it will manage to state.
So if the string is changing, then the state will change as well.
OK, now we can use this query in our news app.
So here news app.
The key file.
So here you see, we have this composable.
Well, basically, this is ANA navigation, right, where we are displaying the three different categories
here at the bottom of the three different options here at the bottom.
And our top news one isn't happy anymore because now it needs a query.
So we're going to use used to news manager query because that's where we're going to store the query
itself right or get to stay away from it.
And we need to pass the news manager itself as well, which we get from the bottom navigation here so
we can pass it.
We did pass it before for our categories, for example, as well as for our sources.
So we were using the news manager before and now we're just going to do that as well for our top news.
A. This wouldn't do anything unless we have a query for it where we actually do have a search request,
so to speak, and that will be in our news service.
Katie File So here we had this, the one where we searched for sources, but now we're going to have
something similar where I'm going to call this one, get articles and not by source.
You could call a by query or so.
But our aquarium just going to college your keyboard.
The keyword is Q, and I'm going to call this one query, which will be of type string.
And it will return a call with a top news response, so the same as we've had for all of our other responses
here.
OK, now we need to create a getter and setter in our news manager for our news response that we searched
for.
So for the query, so to speak.
So let's go ahead and do that.
This one will be searched.
News response.
So I'm going to call it.
It will still give us a news response, right?
Using the mutable state and here this one will be called search and use response like so and it will
get on the score search news response, remember?
So just again, getter and setter with the privacy turned on, so to speak.
And now our news management needs some effort to get us the article, so we had all of these good articles
by and so forth.
So let's go ahead and do the same thing.
So get articles by query or get searched articles is how I'm going to call it.
So get searched articles.
And it will call the surged Missy, how did I call this method?
And it's inside of our news service here.
I called get articles.
OK, so here get articles with the query name.
So here we're going to use to query which I'm going to pass here to this method query, which will be
of type string.
And I'm going to use this query to pass it to my get articles method, which will be this method here.
OK.
And that should be good articles.
So then we are going to do the same thing, we want to get top news response, call back.
If the response is successful, then we're going to set the value of our search news response to be
the response body.
And we're going to display that in our blog as well.
And everything else, I think, should stay the same.
And maybe we can call this one such error.
And this woman will log search instead of category, and this will be also searched.
And if it wasn't successful, so to speak.
OK, so this is our get searched articles, which will give us not the searched articles based on the
query that we're passing because it will call this get search will get articles new service method,
which will pass in the query with the string that we are passing to it.
And in that case, you were wondering what is Q comes from?
Well, we're searching for everything with Q, so here.
Q, for example, would be Apple secures the query or the keyword question or search keywords, so to
speak.
So you just go to the news API and you can also get search for news articles or just get started search
for news articles.
You will find everything is the end point and then you need to give the reference as well after question
mark.
OK, so you can add also a date if you wanted to, you can sort it as well, and you need to pass in
the API key.
So we don't need to do any of that manually, because that's what because that's why we created our
architecture around it, right?
So now we can just go ahead and use this approach right where we just get everything, which is again,
the end point.
And we add the Q as the question after the question mark, so to speak.
So cute equals and then whatever we have as a query will be added in there.
OK, and now we can go back to our search bar because we still haven't created anything here, so I'm
going to need a local focus manager, so local focus manager, which I'm going to set to local focus
manager Dot current.
The focus manager takes care of what is currently in focus, so to speak, in our application, so call
this function to clear focus from the currently focused component and set the focus to the root focus
modifier.
So yeah, that's what you can do with focus or clear focus.
But generally speaking, the focus manager and you can see the documentation is really limited and this
is just taking care of what the focus should be.
So what is the focus of your application?
Does it focus on this part of the application?
For example, it says, then the focus of the app.
For example, it then says the focus of the app to the search bar.
So that's what this focus manager, this local focus manager, can do.
So we're going to set a local focus manager.
And then we're just creating a cart because you see, this is basically just a card that is floating
there.
So let's go ahead and create a card here.
I'm just going to set the default settings here really quickly.
So, so this card will have an elevation of six, it will have rounded corners of four density pixels,
then we're filling the max with we're setting the padding to eight.
Then I'm setting the background color to be the material theme.
Thought.
Colors thought our primary colors or whatever the primary color of our application is and the primary
color is the main color that we have in our application.
So if you go to your themes, you will find that your color primary in our case, is the purple five.
So this is the primary color, which you can also find here.
So this is this purple?
So that's the background color.
And then we need to have the content of the card, which is going to be a text field.
Where we can enter something, right?
So this text field will give us a value, which will be the very value and when the value is changed
and so on, value change and we need to import text for this.
So on value change.
We want to run something.
We want to change the value of the query with whatever it is that has been changed.
So for example, when we enter a new letter, the query value itself will change, which is this mutable
state that we're passing.
And then we can add a couple more values to our text field.
So the modifier, for example, so we can style our text field with, for example, fill max with.
So we want to fill the entire with available.
Then we're going to set the label of it to be the text, which will just say text search.
So search with a white color, so color will just be white.
Let's import White as a color.
Let's import text here as well.
Compose one.
All right, and then.
You see this text field has a bunch of different parameters that we can overwrite, so the value on
value change modifier and able to read only textile and so forth.
So I'm going to set some more.
For example, the keyboard options and not actions, but options, keyboard options.
This one, I'm going to set two keyboard options.
Where I'm passing the keyboard type.
To be taxed, so keyboard type.
Third text, which just means that the keyboard that opens up.
Is going to be the text version, so there are other keyboard types, for example.
No or no password.
So it really depends on what kind of setting you want.
So for example, if you are entering number 10, this keyboard will just allow you to enter numbers.
So it won't.
You will not see the letters, but it will only see the numbers available.
So that's why I don't want that.
I want to actually display text, and then I'm going to set the I'm action to search.
So let's import impaction and let's look at what this is.
So imports, then you can hover over it to learn more and to see more action search represents that
the user wants to execute a search.
So for example, a web search query, which is what we want because that's why you see here at the bottom
edge changes this icon to or not an enter button, but the search button?
Okay, so that's what this text field does for us.
And then we can also add the icon here at the front by adding a lead icon.
So there's this leading icon thingy where we can say that we want to have an icon which is going to
use an image vector.
What would where we're going to set the image of actor, let's import it and so that it will help us
with it.
So the image of should be I can start field thought search.
So it's just a search icon and the content description will be empty and the color of it is going to
be white.
So I'm just going to set the tint to be white as well.
And here, let's import search.
So let's import this icon.
So what this will do is it will just set this icon to be white, which is distinct white and will basically
at this icon to be searching search icon and then or just magnifying glass.
And then we're using a leading icon because this is the because we want to have this icon on the left
hand side, because on the right hand side, you can see we have another icon entered in the icon that
you want to have at the end or at the right hand side is the trailing icon.
So let's go ahead and create a trading icon as well.
So we're going to say if the query value is not empty, so is not equal an empty string, then we want
to have an icon button here.
I can button where we can click on it and we're going to set the query.
And here like this, the query value should be an empty string.
Once you click on it and then the icon itself for this icon button should be icons, the default thought
close, which is this cross that you just saw.
Content description will just be an empty string, and the tint should also be white.
OK, and then let's import close here, which will just be this trading icon here with just this cross.
OK.
So this was the trading icon, now let's take care of another setting, for example, the text style,
so we can style the text of this query, and I'm going to set the textile to be what to have the color.
And this is not the Java version, but the jetpack compose one this one, the color being white as well.
And the font size to be 18, I speak and we need to import ESP for this.
So let's do that real quick and poured.
S.P..
Then we can set the keyboard actions.
So here, let's set the keyboard actions, what should happen?
And here we need to pass some more details here to this keyboard action.
So for example, on search once once the search button is pressed on the keyboard, we want to check
if the query value is not equal empty.
So if there is a query and then we want to.
Get the search articles.
So we got to search for the articles.
What we're going to use that value.
And we're going to clear the focus on that's where we're finally certainly you're using this.
Manager, just local focus manager.
Clear focus, because if you check at it or check it out, once you click on it, we're clearing the
focus, which means the keyboard is closing and the focus is not on this text anymore.
You see the focus by focus.
You could see that this well, it's very hard to see, but there is this little bar or this little line
that is constantly visible and invisible, visible and invisible.
And once I click on this button, you see this bar disappears.
So now the focus is not on this keyboard entry field anymore.
So that's what we're using the local focus manager for.
And finally, I'm going to set the colors to be text.
Field defaults.
Text.
Field colors.
Well, that's uh, too much she a text field colors, that's what I wanted to have field colors with
the text color to be white as well.
OK, so this was quite a long setup, but this is basically just the card where we're setting up this
text field and this text field has all of these properties that we are setting.
For example, we're setting as we saw the modifier obviously filling the max was saying, take the entire
with and we're setting the label, the keyboard options and so forth.
All right.
So now we have set up our search bar and even if we run it, we don't see it in designer.
Let's take care of that by actually going over to our top news.
So currently we have our search bar dared.
It's good.
We have a query that's good as well.
Now let's create a new results list that will display the results in our search bar.
So we see the search bar here and that works so well we can enter something, but obviously nothing
happens once we click on the button.
So let's take care of that.
So the search bar here needs to get results.
So before we use this lazy column, we're going to get the results list result list, which will be
a mutable list of top articles or top news articles.
OK, and then we can check the well, we need a variable that will give us the search text, so let's
create a search text variable searched text, which will be basically just a query value.
So here we get the value of the search, text, whatever we searched and then we can check if the searched
text that we entered is not equal, an empty string.
So if we have actually entered something, then let's run some code, and let's add to this result list.
So what do we want to add?
Well, we want to add all news, manage that search news response, not value thought articles.
And if it's empty, then we're just going to display articles.
So these articles, that just means that if we don't have a search, news, response, articles, value
or a list of articles, then we're just going to use the default articles and then else.
So if the list is empty, so we didn't search for anything, then the result list will just be had all
articles.
So just the default articles.
And now at this point, our lazy column will not display the articles itself, but it will display the
results list.
So what we just did here is we created a new list, which we filled with either the search results or
the default results that we would get when we launched the application.
And if we did search for something, then it will load the search results.
And if we didn't load anything, then it will display the default articles.
And in case that we search something that there was no result, it will still display the default articles.
Now you could, of course, go as far and say, Well, if this is the case, then display.
No results were found to something like this, but I think this should be fine as we have done it here.
So now in our news app, we need to do one final thing, so to speak.
So in our navigation here, where we are displaying the bottom navigation and the composable here,
we need to make sure that the list that we're displaying so the articles is not just going to be articles,
but we're checking first.
If the news managers query value is not empty.
So if it's not empty, then clear all articles and add the articles that you fault.
So add all articles from the news manager, your news manager.
Dods searched articles or search news, response value, thought articles.
And here again, I'm checking if it's not empty.
Otherwise display an empty list off and here articles OK and here with the articles.
So at this point, our articles were just the articles that we get from our value here.
But what I'm going to do instead now is I'm going to say the articles is going to be mutable list of
top news articles, so of top news article objects.
And then I'm going to override the articles list with either the query that I'm getting so with either
the results of the search, so news responds value or articles or with a list of top new, top news
articles.
So or of a list of top news article.
OK, so this is what I'm doing here, I check, and then I'm this being the top news article, so I'm
not going to need this articles anymore.
Instead, I'm going to get the search and then here I can now clear my articles and add new articles
and then the else case.
So let's say the quarry is empty, so we didn't search for anything.
We're still going to clear all articles and we're going to fill the articles with all of our articles.
So at all news manager, news, response, dot value, thought articles.
And if those are empty, it's just going to be an empty list.
So list of.
Like so.
OK, let me put that into a new line as well, like this.
So it's a little more readable, I guess, now.
OK, so that's quite a bit that we have to set up here, but let's have a look at it.
So let's search for something.
Let's run the app.
OK, and then I just ran the application and it crashed multiple times, so let me show you how I fixed
it and it fixed and while I got this problem.
Let me show you real quickly where I am force unwrapping the published death.
But what if we don't have it published it?
Well, an unforeseen wrapping, something that doesn't exist.
And then we run into an error.
So what we can do is we can add a dot question.
What question mark don't let in here with curly brackets and then just run this code in that case that
we don't get an empty published at variable that we don't need to force on repetition anymore.
We don't need those double exclamation marks anymore.
And the same goes for this text right here.
OK, so I need to also check for Article Dot title not being empty.
So only if title is not, and then I'm going to display the title and then I don't need those for on
wrappings anymore, those double exclamation marks.
And now if I run it and search for CNN, for example, well, then it doesn't display the CNN news.
But in the Lochhead, if I search for search, which is the keyword that we had in our news manager
here for this search, then I will find entries for CNN.
So here you see name CNN.
CNN.
CNN So we do get those.
But let me check why we don't see them on our wall in the why yet?
And I found it, and it has to be that we are still displaying the articles instead of the result lists
here in our top news, so let's run it again and then we should be able to search for.
So let's search for science news specifically.
And there we are.
So we have a bunch of science news now that search for football.
And then we should get the football news.
There we are.
Now, let's search for poker, because I read that a German player won the Poker World Championship,
so here Corey Ozdemir Dogecoin Poker VM, that sounds freakin awesome.
So yeah, it works pretty much so.
Our search feature works.
Our quiz app in general works.
So now you have a fully working quiz application with many different approaches and features to it.
I hope you enjoyed this.
And see you in the next one where we're going to set up the MVP and part of it.
So the next chapter?