hey guys in this video i'm going to share with you how to build a
search view in android studio and java in the first half of the video we're
going to build the little search window where you punch in the text
and it filters the list based on whatever's in the
list and in the second half of the video we're going to build a few little filter
buttons so if you've got a specific category
or something that makes more sense in whatever app you're building
you can rather than the person having to type something in they can just press
the button and it'll filter by those fields this
video assumes that you already have some sort of a list view or recycler view
already created if you don't have one that's fine i've
got a video showing you how to build a list view
and i'll link that down in the description below if you want to follow
along exactly what i've done there's a link in
the description to my github and you can download the source code
either at the start or at the end of whether or not there's a search view
added to the list cool so let's get started so what i'm
going to do first is change the activity containing the list view
into a linear layout the next thing i'm going to do is just create a search view
giving it a width of match parent and height
just to wrap the content i'm going to give it an id
i'm going to say icon by default is false
and just writing a query hint there so i'm going to search on shape name so i'm
just giving it shape name and then last thing i'm just going to
set the orientation to that linear layout to vertical
cool so heading back over to the code now just going to create
a new method of cool so search view is equal to search view
and then find the view by id cool so now the good bit um we're just going to do
search view dot set on query text listener
and then i'm just going new search view dot on
query text listener and i've just basically you want to get it so that
it prompts up there and you can just auto complete out those
override methods next we're just going to go into that on query text change
method and so basically this gets called every
time the user puts in any character into the search view
so whether they enter one or backspace one or whatever
on text change so literally any change that happens in the text
next we're just going to say arraylist of type shape
i'm going to call this filtered shapes and that's a new arraylist of type shape
next what we want to do is just create a simple for loop to go through all our
shapes um if you haven't seen this sort of for
loop before i've put a little annotation up there
to say that well that's the exact same thing whether you write it the way that
i have there or in the little gray text box and then we
just want to say if the shape has the name and put the name to
lowercase if it contains what we've put in our
search text box we want to add that shape to
our new filtered shape list so shape dot get
name to lowercase dot contains dot whatever's in the text
box to lower case and now we've got the list of the shapes
that the user is searching for we just need to apply that to our list
so what we're going to do is we'll say say shape adapter is equal to new shape
adapter which is exactly what we did before in the
previous tutorial you can see it here so yeah i'm just going to say
new shape adapter which i'm going to give it context
i'm going to give it 0 and but instead of giving it a whole list i'm going to
give it our filtered shapes list and then i'm just going to
say set the adapter to our list view
cool so we can go ahead and run this now and we should have
a searchable list so you can see i can search by triangle
it's coming up there or rectangle or whatever
cool so if you're interested um what i'm going to do next is create
little filter tabs so i'm just going to go back into
my layout and i'm just going to create a new linear layout underneath my search
view uh i'm going to give it a button
um so yeah the orientation of that leaning layout is horizontal
and i've set the weight and width so the weight is one
and the width is zero dp um so that'll just make sure that each
button is takes up the same amount of width
uh match appearing on the height and i'm just going to call that this first one
all and i'm giving it an id there and so basically what you can do
is once you've created one button i'm just going to copy and paste
and change the names to all the different filters so i'm gonna have one
first you know a circle and cool and
importantly here i find that the easiest way to link a
button to have a method when you click it
is to just do it with this on click and then you type in whatever you want the
method to be called and then you prompt up this way you say
create that activity in the main activity so whenever you hit that button
uh that method gets called so i'm just going to copy and paste like i said down
for the rest and i realized halfway through that i
had too many different little filter tabs so i
actually put it on a second line so i've just made that linear layout
copy and pasted it down so i've got two rows
of filter taps cool so that's the ui now let's make it work so i'm just going
to head back into our main activity and i'm just going to create a method
here called filter list and we're going to pass in a string i've
called it status it's not a very good name but basically it's each
name of whichever tab you've tapped so yeah this method is going to get called
from each one of the little filter tabs next i
actually just want to head up to the top and declare a string i'm going to call
it selected filter and i'm going to give it a default of
all
okay so next i'm just going to give that selected filter
that status so i'm signing that there and then i'm just going to create a new
arraylist it's going to be the same as the one we
did up on our onquery text listener so i'm just going to copy and paste that
down i want a filtered shape arraylist and then i'm going to loop
through all of our shapes again like we did
before
and then i'm going to say if get shape.getname to lower
case again contains our selected filter which i've called status which is again
a silly name but if it contains our status
um we're going to add that shape to our filtered
shapes list and then like we did before i'm just going to copy and paste
the shape adapter because we're doing the exact same thing we're just going to
apply that adapter to our list so that we've got
our new filtered shapes from our filter tabs next we're just
going to copy and paste those bottom two lines into our all filter tap method
and change filtered shapes to our shape list so all of the all of the shapes
and then we're just going to call our method that we created so
our filter list method from each one of our methods and just give it the
corresponding shape so i'm calling a rectangle from
rectangle and triangle from triangle oh and there's just one more thing i've
got to do on the old filter tap method is just set the selected filter to all
cool so i've run that again and you can see that we've got it
working so you click on triangle and you see only the triangles
it isn't perfect there's still a few things that we need to sort out so you
can see when i put in 2 there it's reverted back to the whole list
it's not just showing me the triangle 2 which it should because i'm selected
on triangle so in order to remedy this i'm just
going to head back to our onquery text change
method and i'm just going to add an if statement here to say
if the selected filter is all do what we've already been doing
but otherwise i'm going to say if our shape dot get name to lowercase
again contains our selected filter and
selected filter is not all i want to add a shape and the one other
thing we need to do is just to head back up to the top
and declare another string i'm going to call this current search text
and i'm going to put whatever is in s into current search text
so that i can access it elsewhere and then i'm going back to our filter list
method and i'm going to say
if our current search text is equal to
nothing uh do what we've already been doing
but if we've got something in the search text
i'm just going to grab what we did at the top here
so yeah there's something in the search text we want to
we want to filter by that as well as our filter
and i'm so i'm just changing s to current search text
cool and the last thing we need to do is just change our search view i should
have made this um available in the whole class but
anyway so i'm changing that now and then i'm just going to go back to
our all filtered tap method and i'm going to say search view
set query to nothing when it's tapped and set it to clear
focus so this will just whenever we hit all it
will push all of our shapes back into our list
cool and we can run that again and you can see that that bug we had before
where when you put in two when you're on triangle
um we're getting the right stuff and then when you tap all
like i did there uh it clears the lists and puts everything back
in to our list view so i hope you enjoyed the video
if you found it useful let me know thanks for watching and i'll catch you
in the next one
you