Hello this is Martez or Korti And in this story all you are going to create.
They're floating you lay out exemplified of our application.
So first of all let's open our Android manifested XML file here open this app folder and then double
click on this folder or you can just opened this folder and then click on this android manifest that
exemplified.
So here let's actually take a look at this service here.
I want to add two more attributes to our service so let me create a space here.
The first one is going to be enabled.
She's going to be true.
And the final attribute is going to be exported which is going to be false.
So what is this exported attribute the exported attributes determines whether or other applications
can use our service or not.
So I don't want other other applications to use our services.
So that's why I put false here as the value of this export attribute of this service.
So now let's close this out like manifesto they simplified and then let's actually open the Android
view.
Here we have this race folder inside Israel's folder so you can see it is triable folder in the previous
lecture you have hopefully downloaded their resources they require resources of our application if you
want to you can actually use your own resources.
But I recommend if you are actually creating this application for the first time I recommend that you
use my resources that I actually uploaded to the course and then later if you want to actually modify
the resources we can actually change the resources or we can't totally modify the application.
So now let's copy and paste the images into these tribal folder.
So here it is the images I just selected.
All of these images and I just right click on them and then click on copy.
So now here we have this tribal folder.
I just need to right click on the Straubel for their identity and paste.
So it's going to show me this window here.
I just need to click on OK and then OK.
So now all of these images are actually copied and pasted here.
Inside is triable folder.
So now we have this layout folder.
I want to add another layer out into these folders so right click on this folder near you.
And then just click on layout resource fied.
So the name of the file is going to be float under like view other like lay out.
So now we have this root element sort the Ruth element by default is Android that support that constraint
that can straitlaced.
So the root element of our floating Bewley out is going to be a play out.
So let's delete this value and instead just leave it here frame lay out.
So the autocomplete feature here helps us to choose a frame of the source said is main and the directory
name is laid out.
Let's click on OK.
So now we have our lay out here.
Our float view lay out that exemplify.
So let's switch to the text there.
Let me double click on the that in order to make this area wider.
So let me actually just create some space here.
Let's go inside this frame out.
So first of all we have this layout with which is actually much apparent and the layout height is much
apparent.
Let's change because it is going to be like you rejet are floating is going to be like if you get the
frame lay out its feet and its height should be Lappe content.
We don't want to match parent so let's delete this match parent value and instead to save it here wrap
content for the layout of this frame layout and for the layout height again type in here wrap content.
Now let's go inside is plainly out.
So now let me paste some lines of code here as you can see here.
I created a comment.
So this is how you can actually create a comment in exemple.
So you just need to open a tag and then an exclamation mark dash dash or value or text and then we ended
with a dash dash and then a closing tag.
So this is just a comment.
The compiler is going to completely ignore this line of code.
Now we have this relatively out right.
So this relatively out it's going to play the role of a container the root container or the root view
that contains all of the other views.
OK.
For our widget for our floating view widget we need to have a container we need to have our root view
so that it actually contains other views and then we can just easily float that view over our screen
or other applications.
So the first attribute that I specified here is the ID attribute the ID is a route view and we have
to leave out of it which is actually the raw content.
It must be raw content because it is going to be a container for other views.
So it should be that content because if you don't actually specify the layout of it as the content and
for example you can hard core value or you can just say match palette the match parent is not acceptable
because again the purpose of this widget is going to be just a floating widget that can flow over other
views.
OK.
So I set up content as the value of this layout and the raw content again as the value of this play
out hived.
So let's go inside this container.
So first of all let me show you how our application works so that we can actually just pause the video
and then try creating the application yourself.
And then if you encounter any other problems you can actually just watch these tutorials and create
your own application.
But let me show you how this application is going to work.
So here it is my emulator as you can see we only have our display out here as the main layout and only
have a one button here.
The text is floating button.
If I click on this button look what happens here.
The layout the main activity is going to be finished or it is going to be closed and we have this vision
here and I can actually float this widget over here over other applications.
And for example if I just open the other applications the menu you can see that we have this widget
over other apps.
So now here as you can see if we click on this widget here now it is expanded and we have these these
widgets here.
Right.
We have this close button we have for example this image this image again some other components here.
So this widget is going to have two states the first state is going to be the collapsed state.
So if you click on this close image here now it's going to be collapsed.
Right.
And if I click on this visit here again now it is going to be expanded.
So there are two states the collapsed state and the expanded state.
So let's go back to our lay out here.
This flawed view lay out that exemplified and let's see that first of all we need to create the collapsed
state.
So so it is relatively out here.
Let's create a comment let's say that we have actually the collapsed state first.
So here let me paste in some lines of code here.
So as you can see we have actually a linearly out right.
And take a look at these attributes.
So notice that we have a collapse that saw this linearly is going to hold the collapsed view.
So the idea of this linearly out is going to be collapsed.
View to lay out is going to be that content lay out height that content visibility.
Visible.
I'll talk more about this attribute later and why we put this attribute here.
And they have this orientation vertical Let's go inside is linearly out as you can see.
We have this buried image and this close spot in here at the bottom right.
So first we need to put this bird image here inside linearly out.
So now let me paste some lines of code here.
As you can see we have an image view here.
The idea of this image view is collapsed.
Beard image view delay out of it is 200.
DP The layout height is 200 DP and we use this as RC attributes in order to refer to an image inside
a tribal folder because our image view is actually just the container that holds an image.
So we need an image to put inside this image view.
So that's why we use this as our attributes.
So we use at sayan triable slash beard.
So here I am referring to the name of the image that I have inside the tribal folder Let me show you
this image here.
Inside this last there we have this tribal folder and here it is the beard that Pinti we don't have
to put that into here.
We just need to refer to the name of our image now.
So this is our image view for the bird that holds the bird image.
And now we have this close button.
We need to also put this close but in here.
So this is again another image for you.
Let's go inside are linearly out here below this image view for this beard.
Again I'm going to play some lines of code here.
So here it is my close button the image view.
So the idea is to collapsed close but in the out which is Furt TDP the layout height is for TTP and
we have this layout Margene for TDP.
This is actually lay out Martin left.
OK.
The outer space the outer distance is pretty deep.
If you want to you can modify these values later but for now just use the recommended values that I
put here after the application is finished.
After you have finished creating this application you can just manipulate these values and see what
happens.
For now just use these numbers because we want to first our purpose is to get the end result and we
have this as Tarsia attribute again at Signed Troy about slash close button click on this preview.
So here you can see the preview of the video.
Let me just have you know that to make this area wider and then let me click on preview and at the right
side by.
So we have this image and this close button OK.
Now it's time to create the expanded image.
Let me close this preview.
Now after this linearly.
So this linearly out here holds the collapsed view.
Now let me just get some space here and here.
After this linearly out we are going to create the expanded view.
What happens when the user clicks on that collapsed view.
So we are going to have an expanded view let me show you the application if I click on this collapse
view the expanded view here is going to be actually shown to the user.
It's enough for this story all in the next story.
We're going to actually create the expanded view inside our relative relatively out.
So thank you very much for watching.
If you have any questions about these concepts that you have learned so far please follow the discussion
in the course and I'll do my best to answer all of your questions.