Welcome back.
And this video, we are going to add this floating action button that you see here at the bottom.
And you can see it changes its appearance based on the scrolling state.
So once we are at the bottom or further down, you see it's just an icon.
And once we are at the very top, it's this ad compose or just compose with the icon.
So the text has been added to it as well.
So now let's go ahead and implement that to our application, and therefore we will just create a new
component.
So let me go ahead and create a new Kotlin class file.
I'm going to call this one Gmail Fab Fab standing for floating action button.
OK, so this will be a composable so as add as composable and it's call this one Gmail fab like so.
As you might have seen, there was also something that will be based on the state, which is how it
changes, right?
But for now, we're not going to pass the state.
We're going to do that later on.
For now, let's just add a floating action button in here.
So there is this composable called floating action button that we can use.
And as a content, I'm just going to use an icon here.
So we need to import I for this to work, and then we can use the image vector, which will be icons
dot default, Dot added.
And as a content description, I'm going to it and to nothing.
And we need to import add it as well.
So you see, those are the icons that have been added to now.
Now there's floating action button.
I'm going to give it a background.
So here after the on click property, I'm going to add the background color property, which is this
one here.
And as the color, I'm going to use material theme.
Dot colors, dot surface.
So there is this.
Material theme here, and it has this color did this to surface color, so this is the surface color
is used on surfaces of components such as cards, sheets and menus, and it also works very well for
our floating action button.
Now you could, of course, use any other color if you wanted to.
So now let's use this Gmail Fab instead of our main activity and instead of the scaffold, because that's
where we have our top bar to bar that Gmail drawer and our whole menu bar because there is also the
floating action button property.
So our scaffold has this property as well, and we can just use our Gmail Fab in there.
So now let's import Gmail fat because it exists in a different context and we need to import it so that
we can access it.
So it's in our Gmail clone components.
Now this has to be inside of a London.
OK, so as we've seen with the bottom bar and so forth, so let me bring it into the same format so
we can breathe better.
So now we should see our Gmail fab in our application once it's loaded and we see there it is.
So even if we scroll now, nothing changes.
And that's what we're going to change now because I want to display compose as a text here based on
the scroll state.
So this will teach you how to use the scroll state.
You have seen the scaffold state before and we've seen the scroll state before as well for the Gmail
draw menu, actually.
So let's use it once again.
Therefore, let's go over to our Gmail Fab and add scroll state in here.
So scroll state, which will be the composable scroll states.
So this compose foundation, there are multiple ones, there is the one from your page or two two as
well, but you should use this one specifically.
And then we can now check for the scroll state so we can check of the scroll state has a value of greater
than 100.
If that's the case, then we want to have an extended floating action button.
So not just a normal one, but an extended one.
So here we need to create a text.
So in here, I can just go ahead and put that into a separate line, so it will be a little more readable,
actually, let me put text also in a separate line.
Otherwise, it will be a little confusing.
So here we just have this text composable where we set the text to be compose and it should be like
this text will be composed with a capital C. We need to import text for this.
The issue I want and I'm going to set the font size while I'm at it as well, and this will go inside
of this one.
So font size should be, let's say, six A.P. We need to import a speech for this as well.
OK, so this is our text now, and it goes all the way up to here.
And then we have our own click event, which doesn't do anything.
And then I'm going to add an icon.
I'm going to use the same icon that we used before.
So let me just add it in here after.
The on click event.
Which will actually be the can property that we have to override, like so with the icon.
OK, so this will give us the icon.
And let's also set the background color of it while we're at it.
So background color will also be this material colors surface.
So no, we're just saying if the scroll stayed is over 100, we do this and otherwise we have a normal
floating action button.
All right.
I know we just need to take care of actually passing this scrawls state.
OK, so now we could use this scroll state director, you see Gmail.
Fab isn't very happy at this point.
We need to add this crucial state in there as well.
Like so.
Now, if we test this, it doesn't seem to work.
Why is that?
Because if we you see here, you see the difference.
So if we now scroll.
Then it changes, so in the background, look at it, announced Compose.
If we're at the very top, then it's this little icon itself.
So we're sending the wrong scroll state because the scroll state, if you recall, was created here.
So we created this remember scroll state, which was part of our Gmail app.
So we now need to have the same thing in our mail list, because if you recall, this was our little
component here.
Our mail list components, which also needs to have such a state in here.
So here our email list also needs to get a scroll state scroll state, then the scroll state needs to
be imported, obviously.
So let's import.
This gross state, not the one from Jupiter, we need to compose, scroll to state this one Compose
Foundation's Cross State.
OK, now we just need to make sure that we set this scroll state and the moment we can do that is inside
of our lazy column and side of our heading that we're setting.
So here the lazy column is our list, right?
You recall.
So now.
Let's make sure that we add a scrollable to here.
So now we can pass a scroll state and the orientation of the scrolling.
So we're going to say we're going to scroll vertically.
So this will be for our lazy column of our May list.
If you recall, there's just this thing here.
OK, so we could scroll already, but we never used to scroll state for anything other than, well,
nothing, basically.
But now we are going to use the scroll state and pass it to here as well.
And at this point, our main activities, Gmail Floating Action Button will be able to take the scroll
state.
Now obviously, our mail list also needs to pass or to have passed us scroll states to it.
So let's think so should be fine.
I'll run it again and see whether our floating action button appears while we are further down.
And you see how it works.
When we're at the top, see consider compose button when we're to button just a button because it wants
to display us the actual email, it doesn't want to interfere with the email or so.
All right.
So that's how you can add a floating action button.