1

00:00:00,180 --> 00:00:05,150

Hello this is Martez or Korti And in this story all you are going to create.



2

00:00:05,250 --> 00:00:10,350

They're floating you lay out exemplified of our application.



3

00:00:10,620 --> 00:00:17,840

So first of all let's open our Android manifested XML file here open this app folder and then double



4

00:00:17,850 --> 00:00:22,900

click on this folder or you can just opened this folder and then click on this android manifest that



5

00:00:22,940 --> 00:00:23,980

exemplified.



6

00:00:24,150 --> 00:00:27,110

So here let's actually take a look at this service here.



7

00:00:27,120 --> 00:00:32,250

I want to add two more attributes to our service so let me create a space here.



8

00:00:32,280 --> 00:00:35,030

The first one is going to be enabled.



9

00:00:35,300 --> 00:00:36,760

She's going to be true.



10

00:00:37,230 --> 00:00:41,910

And the final attribute is going to be exported which is going to be false.



11

00:00:41,910 --> 00:00:47,910

So what is this exported attribute the exported attributes determines whether or other applications



12

00:00:48,150 --> 00:00:50,510

can use our service or not.



13

00:00:50,520 --> 00:00:54,190

So I don't want other other applications to use our services.



14

00:00:54,270 --> 00:01:00,320

So that's why I put false here as the value of this export attribute of this service.



15

00:01:00,570 --> 00:01:06,880

So now let's close this out like manifesto they simplified and then let's actually open the Android



16

00:01:06,880 --> 00:01:07,490

view.



17

00:01:07,620 --> 00:01:14,040

Here we have this race folder inside Israel's folder so you can see it is triable folder in the previous



18

00:01:14,130 --> 00:01:21,600

lecture you have hopefully downloaded their resources they require resources of our application if you



19

00:01:21,600 --> 00:01:23,850

want to you can actually use your own resources.



20

00:01:23,910 --> 00:01:29,970

But I recommend if you are actually creating this application for the first time I recommend that you



21

00:01:29,970 --> 00:01:37,830

use my resources that I actually uploaded to the course and then later if you want to actually modify



22

00:01:38,040 --> 00:01:43,130

the resources we can actually change the resources or we can't totally modify the application.



23

00:01:43,500 --> 00:01:50,490

So now let's copy and paste the images into these tribal folder.



24

00:01:50,540 --> 00:01:53,910

So here it is the images I just selected.



25

00:01:53,930 --> 00:01:58,850

All of these images and I just right click on them and then click on copy.



26

00:01:58,850 --> 00:02:01,890

So now here we have this tribal folder.



27

00:02:02,120 --> 00:02:05,630

I just need to right click on the Straubel for their identity and paste.



28

00:02:05,630 --> 00:02:08,480

So it's going to show me this window here.



29

00:02:08,810 --> 00:02:11,650

I just need to click on OK and then OK.



30

00:02:12,690 --> 00:02:16,290

So now all of these images are actually copied and pasted here.



31

00:02:16,320 --> 00:02:18,440

Inside is triable folder.



32

00:02:18,450 --> 00:02:21,890

So now we have this layout folder.



33

00:02:22,110 --> 00:02:27,250

I want to add another layer out into these folders so right click on this folder near you.



34

00:02:27,570 --> 00:02:30,870

And then just click on layout resource fied.



35

00:02:31,110 --> 00:02:41,470

So the name of the file is going to be float under like view other like lay out.



36

00:02:41,590 --> 00:02:48,150

So now we have this root element sort the Ruth element by default is Android that support that constraint



37

00:02:48,160 --> 00:02:49,480

that can straitlaced.



38

00:02:49,710 --> 00:02:54,740

So the root element of our floating Bewley out is going to be a play out.



39

00:02:54,910 --> 00:02:59,600

So let's delete this value and instead just leave it here frame lay out.



40

00:02:59,650 --> 00:03:06,160

So the autocomplete feature here helps us to choose a frame of the source said is main and the directory



41

00:03:06,160 --> 00:03:07,370

name is laid out.



42

00:03:07,390 --> 00:03:08,690

Let's click on OK.



43

00:03:09,310 --> 00:03:11,280

So now we have our lay out here.



44

00:03:11,290 --> 00:03:14,440

Our float view lay out that exemplify.



45

00:03:14,710 --> 00:03:16,870

So let's switch to the text there.



46

00:03:17,020 --> 00:03:20,030

Let me double click on the that in order to make this area wider.



47

00:03:20,380 --> 00:03:24,180

So let me actually just create some space here.



48

00:03:24,340 --> 00:03:26,680

Let's go inside this frame out.



49

00:03:26,890 --> 00:03:32,220

So first of all we have this layout with which is actually much apparent and the layout height is much



50

00:03:32,220 --> 00:03:32,870

apparent.



51

00:03:33,040 --> 00:03:38,800

Let's change because it is going to be like you rejet are floating is going to be like if you get the



52

00:03:38,800 --> 00:03:44,170

frame lay out its feet and its height should be Lappe content.



53

00:03:44,200 --> 00:03:50,620

We don't want to match parent so let's delete this match parent value and instead to save it here wrap



54

00:03:50,620 --> 00:03:58,000

content for the layout of this frame layout and for the layout height again type in here wrap content.



55

00:03:58,000 --> 00:04:01,320

Now let's go inside is plainly out.



56

00:04:01,380 --> 00:04:06,320

So now let me paste some lines of code here as you can see here.



57

00:04:06,320 --> 00:04:07,460

I created a comment.



58

00:04:07,470 --> 00:04:11,620

So this is how you can actually create a comment in exemple.



59

00:04:11,640 --> 00:04:19,250

So you just need to open a tag and then an exclamation mark dash dash or value or text and then we ended



60

00:04:19,530 --> 00:04:23,140

with a dash dash and then a closing tag.



61

00:04:23,460 --> 00:04:24,670

So this is just a comment.



62

00:04:24,690 --> 00:04:28,990

The compiler is going to completely ignore this line of code.



63

00:04:29,010 --> 00:04:32,000

Now we have this relatively out right.



64

00:04:32,110 --> 00:04:39,750

So this relatively out it's going to play the role of a container the root container or the root view



65

00:04:39,990 --> 00:04:42,590

that contains all of the other views.



66

00:04:42,850 --> 00:04:43,380

OK.



67

00:04:43,590 --> 00:04:49,470

For our widget for our floating view widget we need to have a container we need to have our root view



68

00:04:49,650 --> 00:04:56,040

so that it actually contains other views and then we can just easily float that view over our screen



69

00:04:56,070 --> 00:04:58,000

or other applications.



70

00:04:58,320 --> 00:05:05,610

So the first attribute that I specified here is the ID attribute the ID is a route view and we have



71

00:05:05,610 --> 00:05:08,040

to leave out of it which is actually the raw content.



72

00:05:08,130 --> 00:05:12,650

It must be raw content because it is going to be a container for other views.



73

00:05:12,690 --> 00:05:18,930

So it should be that content because if you don't actually specify the layout of it as the content and



74

00:05:19,470 --> 00:05:27,630

for example you can hard core value or you can just say match palette the match parent is not acceptable



75

00:05:28,320 --> 00:05:36,390

because again the purpose of this widget is going to be just a floating widget that can flow over other



76

00:05:36,420 --> 00:05:37,130

views.



77

00:05:37,340 --> 00:05:37,890

OK.



78

00:05:38,160 --> 00:05:45,010

So I set up content as the value of this layout and the raw content again as the value of this play



79

00:05:45,010 --> 00:05:46,020

out hived.



80

00:05:46,140 --> 00:05:48,740

So let's go inside this container.



81

00:05:49,020 --> 00:05:55,830

So first of all let me show you how our application works so that we can actually just pause the video



82

00:05:56,250 --> 00:05:59,620

and then try creating the application yourself.



83

00:05:59,940 --> 00:06:04,860

And then if you encounter any other problems you can actually just watch these tutorials and create



84

00:06:05,100 --> 00:06:06,400

your own application.



85

00:06:06,660 --> 00:06:09,690

But let me show you how this application is going to work.



86

00:06:09,720 --> 00:06:16,560

So here it is my emulator as you can see we only have our display out here as the main layout and only



87

00:06:16,560 --> 00:06:18,300

have a one button here.



88

00:06:18,600 --> 00:06:20,790

The text is floating button.



89

00:06:21,000 --> 00:06:24,410

If I click on this button look what happens here.



90

00:06:24,960 --> 00:06:33,990

The layout the main activity is going to be finished or it is going to be closed and we have this vision



91

00:06:33,990 --> 00:06:41,150

here and I can actually float this widget over here over other applications.



92

00:06:41,460 --> 00:06:50,340

And for example if I just open the other applications the menu you can see that we have this widget



93

00:06:50,610 --> 00:06:52,330

over other apps.



94

00:06:52,360 --> 00:07:03,050

So now here as you can see if we click on this widget here now it is expanded and we have these these



95

00:07:03,690 --> 00:07:04,670

widgets here.



96

00:07:04,920 --> 00:07:05,600

Right.



97

00:07:05,670 --> 00:07:13,860

We have this close button we have for example this image this image again some other components here.



98

00:07:14,160 --> 00:07:21,660

So this widget is going to have two states the first state is going to be the collapsed state.



99

00:07:21,660 --> 00:07:27,320

So if you click on this close image here now it's going to be collapsed.



100

00:07:27,480 --> 00:07:28,040

Right.



101

00:07:28,970 --> 00:07:34,540

And if I click on this visit here again now it is going to be expanded.



102

00:07:35,800 --> 00:07:40,490

So there are two states the collapsed state and the expanded state.



103

00:07:40,510 --> 00:07:43,780

So let's go back to our lay out here.



104

00:07:43,910 --> 00:07:51,080

This flawed view lay out that exemplified and let's see that first of all we need to create the collapsed



105

00:07:51,120 --> 00:07:51,670

state.



106

00:07:51,700 --> 00:07:54,090

So so it is relatively out here.



107

00:07:54,460 --> 00:08:02,900

Let's create a comment let's say that we have actually the collapsed state first.



108

00:08:02,950 --> 00:08:06,410

So here let me paste in some lines of code here.



109

00:08:06,610 --> 00:08:10,660

So as you can see we have actually a linearly out right.



110

00:08:11,020 --> 00:08:13,780

And take a look at these attributes.



111

00:08:13,870 --> 00:08:19,540

So notice that we have a collapse that saw this linearly is going to hold the collapsed view.



112

00:08:19,990 --> 00:08:23,060

So the idea of this linearly out is going to be collapsed.



113

00:08:23,090 --> 00:08:30,280

View to lay out is going to be that content lay out height that content visibility.



114

00:08:30,280 --> 00:08:31,220

Visible.



115

00:08:31,270 --> 00:08:36,420

I'll talk more about this attribute later and why we put this attribute here.



116

00:08:36,820 --> 00:08:43,490

And they have this orientation vertical Let's go inside is linearly out as you can see.



117

00:08:43,540 --> 00:08:49,420

We have this buried image and this close spot in here at the bottom right.



118

00:08:49,420 --> 00:08:53,800

So first we need to put this bird image here inside linearly out.



119

00:08:53,800 --> 00:08:56,470

So now let me paste some lines of code here.



120

00:08:56,650 --> 00:08:59,450

As you can see we have an image view here.



121

00:08:59,590 --> 00:09:03,370

The idea of this image view is collapsed.



122

00:09:03,460 --> 00:09:06,780

Beard image view delay out of it is 200.



123

00:09:06,790 --> 00:09:16,750

DP The layout height is 200 DP and we use this as RC attributes in order to refer to an image inside



124

00:09:16,760 --> 00:09:23,350

a tribal folder because our image view is actually just the container that holds an image.



125

00:09:23,500 --> 00:09:26,020

So we need an image to put inside this image view.



126

00:09:26,140 --> 00:09:29,050

So that's why we use this as our attributes.



127

00:09:29,230 --> 00:09:31,740

So we use at sayan triable slash beard.



128

00:09:31,750 --> 00:09:36,910

So here I am referring to the name of the image that I have inside the tribal folder Let me show you



129

00:09:36,910 --> 00:09:38,490

this image here.



130

00:09:38,590 --> 00:09:44,500

Inside this last there we have this tribal folder and here it is the beard that Pinti we don't have



131

00:09:44,500 --> 00:09:45,930

to put that into here.



132

00:09:46,030 --> 00:09:50,290

We just need to refer to the name of our image now.



133

00:09:50,530 --> 00:09:55,890

So this is our image view for the bird that holds the bird image.



134

00:09:56,170 --> 00:09:58,990

And now we have this close button.



135

00:09:59,860 --> 00:10:02,660

We need to also put this close but in here.



136

00:10:02,670 --> 00:10:04,530

So this is again another image for you.



137

00:10:04,720 --> 00:10:09,790

Let's go inside are linearly out here below this image view for this beard.



138

00:10:09,860 --> 00:10:13,340

Again I'm going to play some lines of code here.



139

00:10:13,720 --> 00:10:17,070

So here it is my close button the image view.



140

00:10:17,230 --> 00:10:25,840

So the idea is to collapsed close but in the out which is Furt TDP the layout height is for TTP and



141

00:10:25,840 --> 00:10:29,630

we have this layout Margene for TDP.



142

00:10:29,890 --> 00:10:32,330

This is actually lay out Martin left.



143

00:10:32,370 --> 00:10:32,930

OK.



144

00:10:33,070 --> 00:10:36,390

The outer space the outer distance is pretty deep.



145

00:10:36,520 --> 00:10:44,170

If you want to you can modify these values later but for now just use the recommended values that I



146

00:10:44,170 --> 00:10:46,710

put here after the application is finished.



147

00:10:46,720 --> 00:10:51,760

After you have finished creating this application you can just manipulate these values and see what



148

00:10:51,760 --> 00:10:52,450

happens.



149

00:10:52,450 --> 00:11:00,340

For now just use these numbers because we want to first our purpose is to get the end result and we



150

00:11:00,340 --> 00:11:06,780

have this as Tarsia attribute again at Signed Troy about slash close button click on this preview.



151

00:11:06,880 --> 00:11:10,100

So here you can see the preview of the video.



152

00:11:10,330 --> 00:11:15,880

Let me just have you know that to make this area wider and then let me click on preview and at the right



153

00:11:16,030 --> 00:11:17,890

side by.



154

00:11:17,920 --> 00:11:21,330

So we have this image and this close button OK.



155

00:11:21,490 --> 00:11:25,270

Now it's time to create the expanded image.



156

00:11:25,270 --> 00:11:27,120

Let me close this preview.



157

00:11:27,580 --> 00:11:29,760

Now after this linearly.



158

00:11:29,770 --> 00:11:32,850

So this linearly out here holds the collapsed view.



159

00:11:33,280 --> 00:11:37,120

Now let me just get some space here and here.



160

00:11:37,180 --> 00:11:43,590

After this linearly out we are going to create the expanded view.



161

00:11:43,630 --> 00:11:46,910

What happens when the user clicks on that collapsed view.



162

00:11:47,050 --> 00:11:51,370

So we are going to have an expanded view let me show you the application if I click on this collapse



163

00:11:51,370 --> 00:11:57,130

view the expanded view here is going to be actually shown to the user.



164

00:11:57,130 --> 00:12:00,340

It's enough for this story all in the next story.



165

00:12:00,550 --> 00:12:07,950

We're going to actually create the expanded view inside our relative relatively out.



166

00:12:07,990 --> 00:12:09,780

So thank you very much for watching.



167

00:12:09,820 --> 00:12:15,370

If you have any questions about these concepts that you have learned so far please follow the discussion



168

00:12:15,370 --> 00:12:18,460

in the course and I'll do my best to answer all of your questions.