hey guys my name is Cal and in today's tutorial we're going to be sorting a
list view in android studio using java we're also
going to be creating a little toolbar at the top so that you can hide
and show different parts so whether you want to hide all the search stuff or
whether you want to hide all the sort stuff just because it was there's a lot
of stuff by the time you get your search window you filter tabs and then your
search tabs it's about half the screen so this is
the third video in a series i've done on this with my shape list example
in the first video we built the list view
in the second video we made it so that you could search
and filter the list and in this video we're going to be able to sort
the list either by name or via id so if you haven't seen those videos yet
go check them out uh link in the description below
there's also a link to all the sort different source codes
so i'll have i'll make sure i put all three in there so yeah
we're going to build the toolbar in the first half of the video the second half
the video we're going to get the sort working and in the third sort
of final part we're going to get the sort working with
all of our filter in our search
cool so let's get started um to start i'm just going to build a simple
toolbar so i'm just putting in yeah you can see there it's android x
toolbar i'm giving it a grey background and then i'm just going to put in a
couple of buttons so one button is going to be sort that's going to be a
toggle uh sort and hide and one is going to be for
the filter so that's going to be all my filter tabs and the search menu
and then i'm just going to give it a text view in the middle there with the
app name and this isn't necessary but it's a nice little touch
next i'm just going to add in a quick color red um i realized that my buttons
and my text look exactly the same so i'm just giving my buttons red there
just so you can distinguish between the two next i'm just going to set some ids
so you can see i've got sort button there and
filter button down below and then i'm going to give my linear
layouts an id as well so filter tabs layout and
i'm just going to copy then paste that on click method there
and i'm going to change that to show filter tabbed
and just create the method there and then the same thing for our sort button
so show sort tapped next i'm just going to
give my second linear layout an id so filter tabs 2 and i'm just going to
copy and paste that linear layout because we're going
to do a very similar thing with our sort tabs so
i'm just renaming this one to id ascending
and id descending and so we're actually gonna have four and then we're gonna
have name ascending and name descending so you can
see i'm just renaming all of those there and then i'm gonna rename the ids rename
the onclicklisteners and create the methods as well
so let's see if we can get the show hide working for both our filter and
sort menu so i'm just going to declare our
sort button i'm going to declare our filter button
and i'm just going to declare our linear layouts so we've got
two filter linear layouts and one sort linear layout our search view text has
already been declared so we don't need to do that
and i'm just calling this method here and it widgets i probably could have
come up with a better name so yeah hopefully you've become pretty
comfortable with finding um views by their id like this
next in our oncreate method i'm just going to create two new methods
um hide filter and hide sort so just to hide everything
at on load and then i'm just going to copy and paste and bring them down here
um just because it makes a bit more sense to have them down here and then in
our hide methods i'm just going to hide all of
the layouts or if the search view depending
on whether or not it's part of the filter or the sort and then
i'm just going to copy and paste both of those methods
and do the opposite so show filter show sort
and for each of these methods we're just going to set the text to whatever
the correct text is for that button so filter
or hide or sort next i'm just going to head right back up to the top
and declare a couple of booleans sort hidden
and filter hidden i'm just initializing them to be true
as everything's going to be hidden on load next with those booleans we're just
going to create a simple toggle so a filter hidden is equal to true set
it to false and if it's equal to false set it to true
and then just call the appropriate method and the same thing for sort as
well and one thing i got wrong was i set
these views to invisible and they actually need to be
gone so i'm just just fixing that up now and then i'm gonna run and you can see
that we've got we've got two working buttons and it's hiding the appropriate
stuff um one thing i will say though is i
didn't really like the whole color it looked pretty ugly
going gray white gray so i've just changed a few colors around
but yeah that's just purely cosmetic cool so let's get our sort buttons
working next i'm just going to head over to our shape class
and i'm going to declare a new comparator of type shape i'm going to
call it id ascending and then i'm going to say is equal to new
comparator and i'm just going to auto complete out this method here
cool and you can see we've got our override compare method there i'm just
going to rename that shape one and i'm going to
call this shape 2. next i'm just going to pass
both of the ids to integer so integer.value of
shape 1's id and do the same thing for shape 2. so get the integer value
of the id and then i'm going to return integer.compare
id to id2 and what this does is most of the heavy lifting of sorting our list
so i just need to call this now so i'm going to head back into our
id ascending tapped method and i'm just going to say
well i forgot to make this static but um i'm just going to say
collections.sort shape list and then by our id
ascending comparator and then i just need to apply that
to our adapter and then i'm just going to copy and paste that down for
descending and after i sort the list i'm just going
to say collections.reverse shape list so the same thing but reversed
and before we test this i just want to put id in our list view
so just go on to our shape adapter and i'm just saying shape dot get id
plus a bit of space and then the name cool so a quick little test
and you can see that it's sorting by id so 0 or 9 at the top let's make it work
for the name now so i'm just going to copy and paste that down
i'm just going to rename the method to name ascending and instead of getting
the integer value i'm just going to declare a couple of strings and call it
name one and shape dot get name one and the same
thing for name two shape dot get name for shape two and i'm
just gonna set both of them to lower case
and then i'm going to call name one dot compare to
name two and then very similar to what we did with
our id i'm just going to copy and paste that down again and
give it a different comparator so the name ascending comparator and same thing
again after we sorted ascending we're just
going to reverse the list for descending so before i build and run
this i just want to head back into our detail activity we need to make our
onclicklistener work with a sorted list so that's what i'm doing here i'm
creating a new method that returns a shape uh given an
id and i'm just going to call that method
and assign it to selected shape so i've built and run that again
and you can see we can sort now by name or id
and that seems to all be working so in order to have a sortable list that you
can also filter and then all the work in together there's actually a few more
things we need to iron out that's what we're going to do next we're just going
to iron out a few bugs so i'm going to start with something i
should have done a very long time ago and that's create a method
for setting the adapter so i'm just refactoring all of these calls
um to set adapter and pass it in a list so you can see
i've called that numerous times i should have done that a long time ago
and then in our ascending tap method i'm just going to say
if our selected filter is equal to all do what we've already been doing
otherwise uh filter our list based on our selected filter this ensures that
when we sort our list with a filter already applied keeps our
filter selected and i'm just going to extract that
method and call it from each of our sort buttons
cool and the last thing we need to work out is well what happens if there's
some text in the search view so that's what we're going to do next
we're going to say if the selected filter is all but there's nothing in the
search text well then we're going to do what we've already been doing
but if there is something in the search text we want to do something very
similar to what we've been doing in our onquery text listener method so
what i'm going to do is i'm actually just going to scroll up and i'm going to
copy paste down all of this on query text change code
and i'm going to get rid of a bunch of the
validation these sort of things so delete that there and basically what we
want to say is if the current shape contains our
current search text we want to sort our list based on our current filters
cool so i've built and run that again and you can see we've got it working we
can sort by id we can sort by name we can sort
with filters already applied and we can also
sort with some text in our search view when we saw it it's keeping our
filtered list intact i hope you found some use in this video
and i'll catch you guys in the next one
cheers
you