Hello this is what has occurred.
And in this story all you're going to actually put the coats for the expanded state of our floating
view as you can see I inside these floats on the line view on the land lay out the exemplified.
And here in the previous tutorial we created the root view and the collapsed state insider's view.
Now it's time to create the expanded state insider route view.
So inside it's relatively out here and now I'm going to paste some lines of code here so we have the
expanded state as you can see we have this linearly out and the idea is expanded view lay out which
is that contently height ISTEP content visibility gun orientation horizontal here.
The background is this color we can see at the left hand side but we can see this kind of this is actually
the background.
I used the RGV color.
And I also use this all for attributes.
The value should be between zero and number one if you want to you can manipulate this value.
For example 0.8.
And you know that the Alfar attribute is actually for the transparency of our view.
And we have this padding attribute which is actually for P If you want to you can change this value.
The padding is the inner space of our expanded state expanded view actually.
So now inside is linearly out here.
Let me show you the emulator and here you can see this lion image this image for the previous animal.
For example we have this image that specifies the VDU of another animal.
We have this image that specifies the next animal.
If I click on this one for example it's going to allow us to see the next animal.
We have this a close button this close image and finally we have this open image.
If we click on this one our application is going to be open.
So let's click on it and now we can see that the app is opened.
If you click on the spot and again now it can actually create this visit for us.
And I can switch to the expanded view.
So let's go back to android studio.
Let's go inside this linearly out.
That is actually for the expanded state.
So here I pasted these lines of code and image view.
And here we have the layout of the image view 100 DP as you can see and the layout height is 100 dpi.
And here in order to refer to our lion image we used this attribute as RC and we are referring to the
ASP enjoyable slash lion.
If you want to you can specify an ID for this image for you.
So Id sign a plus ID slash.
So it is going to be like an image of you like an image.
OK.
And later inside our floating View service that justified we can create an unclick listener for this
image so that whenever the user clicks on the image or Tartar's this image something is going to happen.
We can't show it to the user.
All you can do whatever you want.
So this is going to be the lion image.
Let's create a comment here.
Sort of an attack exclamation mark dash dash lion image and then there's that closing intact.
So now it's time to specify this previous button that specifies the previous animal.
Right.
So let's go back to code and below this image of you for the lion.
Let me paste some lines of quote here.
Previous animal BOTTEN here and the idea is pity and previous to lay out which is pretty deeply lay
out Haifaa pretty deeply lay out gravity center vertical So it's going to position our image view vertically
Center at the center vertically and we have the margin left five TPD outer space from the left is 5
DP.
And finally we have this as as our C attribute that refers to the previous Potten image.
Let me show the emulator and we have this image.
So now it's time to refer to this one.
Let's go back to code.
So again I pasted some lines of code here.
Leppert video image.
So as you can see because it's somewhat likely a video of the leopard.
So that's why I actually named the leopard video image.
So here we have an image view.
The idea is Leppert image that lay out all it is 100 Deep-Sea lay out height is 100 dpi to lay out gravity
is center vertical and the margin lift is five deep.
And for the SRT attribute we are referring to the Lippard image.
So next is this next part in.
So let's go back to android studio here.
So these are the lines of code that I pasted here.
Next animal Potin.
Here we have the ID PTEN next lay out which is pretty deep the lay out height is for TTP layout.
Gravity is a center vertical and the layout margin left lift is a five DP and the RC attribute refers
to the next button image.
So let's see what's next.
Now we need to put the close button and this open image.
Let's go back to our studio close button and the Open button.
You're going to use a relatively or another container here inside this linearly as this expanded state.
So let's create a relatively out here relatively out and lay out what is wrapped content and the layout
height is much parent.
So what is the parent of this relatively out the parent of this relatively out.
Is this linearly out of the expanded state.
Let me scroll up a little.
Here you can see this expanded state come in here and this linearly out is going to be the parent of
this relatively earth and not is that the height of this linearly out is ALAP content.
So this means that the height of this relatively out is going to be as tall as the parent the linear
layer.
So let's go inside is relatively out here.
We don't have to specify an ID or any other attributes for this relatively And this little area just
plays the role of a container.
So let me pick some lines of code here.
So this is the image view for the close button of the expand that's state.
And here we have an image Bewley out which is two a.p delay at height is to ADP the ID attribute here.
This is very important because this close button is going to be interactive by the user.
We need to make clear create and unclick listener for this close button so that whenever the user interacts
with the spot and we're going to close the expanded state so we have the close but an expanded as the
value for the ID of the sim is few and as RC refers to the close button.
So now we need to create another image view inside is relatively out for the Open button the open button
allows the user to open the main application.
So now let me paste some lines of code here.
So we have the effect button for the expanded state image view.
The ID is open button which is to and ETP the layout height is 20 DP and we have these attributes that
is actually specific to the rel. out.
OK.
If we are not using a relatively out you cannot use this attribute it says lay out a line parent Bodom
So parent here refers to this relatively at this image view is actually the child of this relatively
And so when it says a line parent put him.
This means that this image is going to be aligned at the body of the parent at the bottom of this relatively
out.
If I show you the emulator you can see that this open button here is actually aligned at the podium
here and its close button here is at the top.
So thats why we used these actually this attribute here and is it aligned parents buy them true.
So we have the attributes or pet Android and notice that this relatively out here is inside these Linnett
linearly out and the orientation of this linearly out is horizontal.
Right.
So thats why you can see that this close button and this Open button is actually horizontally positioned
here.
First we have the line and we have this previous button Leppert image next button.
And then we have this relatively held that contains this button and this Open button.
So hopefully that makes sense.
Let's go back to our codes in Andrys studio and here we have the Open button.
And I think our job is finished and I think thats enough for this tutorial it unless its really going
to add codes to these floating views service that java file.
So thank you very much for watching.
If you have any questions about this concept please post a discussion in the course and then I'll do
my best to answer all of your questions and I look forward to seeing you in the next two or three.