hey guys welcome back to a new video in
this video i will show you how i can
make use of
lists in jetpack compose such as this
simple list here which works really
smooth
and especially if you already know
recyclerview in
xml then these lists and jetpack compose
are just
so much easier and less complicated
so let's directly dive into it so when
using
lists and compose you need to
differentiate if you have
like a limited number of hard-coded
items maybe just 10 items or so
then you can just use a simple column
and make that column scrollable
but really only if you don't have many
items if you have a lot of items then we
have a special
lazy column which we can use which just
lazily loads these items as we scroll
so this lazy column is basically the the
equivalent and jetpack compose
to recycler view and of course there's
also a lazy row
if we want to implement a horizontal
scroll
but let's start by creating a normal
column and make that scrollable
so you already know a column here let's
use that
and in here we can just use a for loop
to instantiate like 50 texts so for i
in 1 to 50
we want to create a text here
like this and set that value to
item then whatever i is
oops i want
to increase the font size a little bit
set it to
24 sp import sp
i want to set the font weight here to
bold and i want to apply modifier to
that text
to fill the max with
and also
some padding here just vertical padding
of
24 dp and import dp pressing out plus
enter
and i want to center this text
horizontally so we set text align
text align to
center and if we now launch our app like
that
and take a look in our emulator then you
can see
our list is filled with items but we
can't scroll
because we didn't make our column
scrollable so we explicitly need to do
that
and for that we can just use a modifier
so in those column options we apply a
modifier
of modifier dot vertical scroll so we
want to make that column
vertically scrollable and here
in that modifier we can set some options
but one option is actually required
which is the scroll state
so we need to create a state here for
that column scroll
which we could then use to just
manipulate the current scroll position
to programmatically scroll in our column
and so on
and we can easily do that by using val
scroll state
is equal to remember scroll state
so that will already give us a scroll
state we can then pass here
and if we then relaunch the app and take
a look
then you can see now we are able to
scroll through our items
but those are actually already too many
items to use a normal column here i'd
say
50 items is a lot what we want to do
instead is we want to now create a lazy
column
that just lazily loads these items as we
scroll a lazy column works a little
differently than a normal column that we
make scrollable
so we cannot just replace this with lazy
column
we need to do this but we need to do a
little more than this
on the one hand we need to remove this
vertical scroll because a laser column
is scrollable by default
and we can also remove the scroll state
here and instead of
us looping through our numbers here
and creating these texts the lazy column
has
has a functionality that already does
that for us so
what we can do is we can use item or
rather items because we have multiple
items
so with item that would be the most
simple type of that
we can just use that to have a single
list item here that we can
specify within that item block but we
want to have multiple items here
so we use items and
here you can see we need to specify a
count so how many items do we actually
have in our list
and let's just say we have 5 000
items here and then in here we can put
the composables that just represent a
single item
which in our case is just our text here
so we can cut that out and paste it in
here
remove the for loop and you also notice
that we don't have access to i
because we're not inside of our own for
loop anymore but instead we have this
lazy item scope
which also gives us the current item
index but we need to refer to it with
it and when we now relaunch the app
you can see that works the same way as
before
but these items are now actually lazily
loaded so
they only load when we actually scroll
to that position
while with a normal column all items
were loaded on
app startup so that was actually not
that good performance wise
and one more thing i actually want to
show you here is
another type of this items function
which is called items index
so that is basically the equivalent to
for each loop
while this normal items function here
was
kind of a follow-up with indices so we
just have access to the numbers
with items indexed we can
pass a list here as a parameter
of any type of course so let's say we
create a list of type string here
for example this is
jetpack compose
and then if we use this here we
see we get an error because it expected
two
parameters here one is an integer and
one is a string
so maybe you already get it or guessed
it the first will be our index
and the second one will be our current
string
of that list so when we then take our
text here and
cut it out move it into this items index
and remove the other one
we can then refer to
just our string here and launch our app
and you can see now it directly prints
the strings that we have in our list
and of course you don't need to choose a
list of string here you can choose any
type of list
and then just map these items to
composables
that you want to display in your list
and this is of course a
big improvement here to recyclerview
well for recyclerview you needed to
create something in xml
then you need to create an adapter you
need to assign that adapter with a
layout manager and all that stuff
which was so complicated for this simple
behavior that you actually need in every
app
so that we finally have an easier
solution for that in
native android which i'm very happy
about so
let me know below how you like this new
lazy column feature here
to create lists in android i
hope you liked this video and if you're
interested in more advanced android
premium courses
check out the first link in this video's
description which will lead you to my
website and there you will find these
paid courses which are a way to support
me and my work
and also of course a way to just bring
your android skills to the next
level thanks for watching i hope i'll
see you in the next video again wish you
a nice day
bye bye