1 00:00:00,150 --> 00:00:08,610 Hello this is Martez Arkadi and in Israel you're ready to learn about floating a view over other views 2 00:00:08,610 --> 00:00:09,480 in Android. 3 00:00:09,510 --> 00:00:13,300 The feature that you may see on other apps such as Facebook. 4 00:00:13,440 --> 00:00:16,220 So let's see how we can create this feature. 5 00:00:16,470 --> 00:00:20,890 Let's create a new site actually and you Andrew it's your project. 6 00:00:21,090 --> 00:00:23,570 I'm here for the application name just in here. 7 00:00:23,560 --> 00:00:24,730 Floating view. 8 00:00:24,750 --> 00:00:29,640 So here you can specify the company domain and the project location. 9 00:00:29,910 --> 00:00:33,150 So here you can see these two checkboxes here. 10 00:00:33,150 --> 00:00:39,530 The first one says include C++ support and the second one says include Kathleen support. 11 00:00:39,570 --> 00:00:42,090 So we use neither of these options. 12 00:00:42,090 --> 00:00:47,970 We do not want to actually support the C++ or programming language or the code in programming language 13 00:00:48,390 --> 00:00:52,410 so to not check these boxes here and just click on next. 14 00:00:52,410 --> 00:00:58,800 So here for the minimum STK to Android a five point one lollipop. 15 00:00:58,830 --> 00:01:03,510 Or you can actually choose Actually the kid chats 4.4. 16 00:01:03,840 --> 00:01:11,790 But I think 5.1 is good because by targeting API 22 and later your app will run on approximately sixty 17 00:01:11,790 --> 00:01:18,870 two point six percent of the devices that are out there that are registered on Google Play. 18 00:01:19,230 --> 00:01:29,790 So here just choose Android 5.1 lollipop as the mini SDK and then click Caloocan next. 19 00:01:29,790 --> 00:01:32,360 So here is interactivity next. 20 00:01:33,800 --> 00:01:38,990 And here make sure that the activity name is actually the main activity you can change this name if 21 00:01:38,990 --> 00:01:46,040 you want to but I recommend that you leave it as default and make sure that this box is checked generate 22 00:01:46,040 --> 00:01:46,990 lay out fine. 23 00:01:47,330 --> 00:01:48,760 And this is the lay out name. 24 00:01:48,890 --> 00:01:54,680 So it is good activity and there like Maine and make sure that these safe boxes are back for compatibility 25 00:01:54,890 --> 00:01:56,900 app compact is actually checked. 26 00:01:56,930 --> 00:02:02,240 So this could become finished so now that the product is created lets go into this activity underlayment 27 00:02:02,260 --> 00:02:03,350 at them in here. 28 00:02:03,500 --> 00:02:09,920 So if you want to open this file you just need to open the Android you at the left hand side by just 29 00:02:09,920 --> 00:02:17,120 clicking on the file at the top menu or they you just click on and they view the top menu tool windows 30 00:02:17,420 --> 00:02:23,570 and then click on project and then it's going to open the view here for you make sure that here it is 31 00:02:23,680 --> 00:02:24,410 Android. 32 00:02:24,620 --> 00:02:30,440 If it is not Android just click on these two little triangles here and click on Android to open the 33 00:02:30,440 --> 00:02:31,750 Android view. 34 00:02:32,120 --> 00:02:38,940 And here in this race for lay out folder double click on this activity and alignment of this image here. 35 00:02:39,170 --> 00:02:42,840 So let me remind you that in order to make this area wider here. 36 00:02:42,920 --> 00:02:49,550 Now let's delete this hello world takes three here at the center and here take a look at this company. 37 00:02:49,740 --> 00:02:53,570 This componentry section here at the bottom left corner. 38 00:02:53,630 --> 00:02:55,520 It says a componentry. 39 00:02:55,520 --> 00:02:59,420 So here we have this constraint play out as the parents let parents play out. 40 00:02:59,450 --> 00:03:03,620 So let's change these concerns into play out to really play out at the bottom. 41 00:03:03,620 --> 00:03:07,220 We have these two taps the design tab and the text tab. 42 00:03:07,340 --> 00:03:09,210 Let's assume to the design tab. 43 00:03:09,470 --> 00:03:14,900 And here we have this one android that supports the strength that comes through intellect. 44 00:03:15,110 --> 00:03:21,380 Let's delete this value just highlights its value here and then delete it and instead just type in your 45 00:03:21,500 --> 00:03:28,840 relative with capital or relatively out and now you can see that for the end tag here. 46 00:03:28,850 --> 00:03:30,660 It's also relatively out. 47 00:03:30,710 --> 00:03:32,230 Let's use the design tab. 48 00:03:32,240 --> 00:03:37,120 Now inside this componentry section it says relatively out as the parents lay out. 49 00:03:37,140 --> 00:03:42,860 So now I want to add a button to these relatively up here inside this pallet section. 50 00:03:42,860 --> 00:03:49,880 Just click on all and then select a spot in and drag it here into this relatively let's put it at the 51 00:03:49,880 --> 00:03:51,200 center. 52 00:03:51,200 --> 00:03:56,090 So now first let's change the background and color of related play and just select is relatively out 53 00:03:56,090 --> 00:03:56,890 here. 54 00:03:57,110 --> 00:04:00,230 And inside these attributes section we have this search. 55 00:04:00,260 --> 00:04:01,590 I can just click on it. 56 00:04:01,790 --> 00:04:05,580 Now I can actually search for a specific attribute. 57 00:04:05,810 --> 00:04:08,890 So it's going to be background attributes. 58 00:04:09,080 --> 00:04:14,880 And here I wanted the background color of this relatively out here to be read. 59 00:04:15,050 --> 00:04:17,330 So just for typing here hash tag. 60 00:04:17,510 --> 00:04:20,010 So we have all the G-B values right. 61 00:04:20,180 --> 00:04:26,370 R stands for red G stands for green and B stands for Blue. 62 00:04:26,750 --> 00:04:31,400 Each of these letters represent two numbers. 63 00:04:31,400 --> 00:04:37,880 So here for they are just going to be red. 64 00:04:38,050 --> 00:04:46,810 I'm going to type in here if it is going to be pure red and I don't want to have the blue color or the 65 00:04:46,810 --> 00:04:47,620 green green color. 66 00:04:47,620 --> 00:04:54,370 So for the green color I just put 0 0 and for the blue color I also put 0 0 and then press enter on 67 00:04:54,370 --> 00:04:54,970 your keyboard. 68 00:04:54,970 --> 00:04:59,670 Now the background color is actually a pure red light. 69 00:04:59,680 --> 00:05:05,570 So now let's change the background color of this button at the center of this relatively out to blue. 70 00:05:05,680 --> 00:05:10,900 So just select this pattern here and again inside this attribute section. 71 00:05:10,900 --> 00:05:12,870 Here we have this back and an attribute. 72 00:05:13,060 --> 00:05:14,970 So just typing here hash tag. 73 00:05:14,980 --> 00:05:23,980 Now I want you to pause the video and specify the background color of these button to be blue OK by 74 00:05:23,980 --> 00:05:26,380 using our G-B values. 75 00:05:27,140 --> 00:05:31,460 So when you are ready to play the bit you get ready go. 76 00:05:31,500 --> 00:05:38,250 So now let me show you how you can actually change the background color of this button by using B values 77 00:05:38,260 --> 00:05:43,460 so you just need to put hash tag you don't want to have a red not a color right. 78 00:05:43,470 --> 00:05:48,500 So we just put 0 0 we have G which stands for clean. 79 00:05:48,540 --> 00:05:57,360 Again we don't want to have a green color which we again put 0 0 here and we have to be stands for blue. 80 00:05:57,390 --> 00:05:59,450 So we want pure blue. 81 00:05:59,610 --> 00:06:05,880 So I just put f f if you want to you can actually use Phi Phi. 82 00:06:06,420 --> 00:06:12,600 It's going to actually give you a blue color but it's not going to be an intense blue color. 83 00:06:12,600 --> 00:06:15,360 It's going to be more light blue color. 84 00:06:15,540 --> 00:06:22,410 So let's trews if you want to you can actually test this color with other values for example number 85 00:06:22,410 --> 00:06:25,720 1 2 3 5 6 7 8 9. 86 00:06:26,010 --> 00:06:29,890 Or if and then press enter key on your keyboard. 87 00:06:30,180 --> 00:06:33,660 Now the background color of this button is pure blue. 88 00:06:34,050 --> 00:06:38,710 And he wants to text the color of this button to be white. 89 00:06:38,760 --> 00:06:47,450 So select the spot in here and inside this search section let's search for text color text color. 90 00:06:47,460 --> 00:06:49,670 Now we have this text color attributes. 91 00:06:49,890 --> 00:06:54,850 So I want that back and uncle that takes color of this button to be white. 92 00:06:54,870 --> 00:07:01,450 So I just need to put it if it f f f and that person into chair on your keyboard. 93 00:07:01,570 --> 00:07:09,270 OK so as you can see I forgot to put hash tag before this f f f here for the value of this text color 94 00:07:09,310 --> 00:07:15,430 and that's why it's not giving us the result that we are actually after. 95 00:07:15,430 --> 00:07:19,770 So before this if if if we must put a hash tag. 96 00:07:19,930 --> 00:07:24,800 So just select it and put a hash tag here and then press on into your keyboard. 97 00:07:24,980 --> 00:07:30,190 Now it's giving us the result that we are looking for. 98 00:07:30,610 --> 00:07:31,690 So that's it. 99 00:07:31,690 --> 00:07:36,610 And now let's actually change the text of the spot in so select the spot. 100 00:07:36,940 --> 00:07:40,990 And here inside the search area you can see this close icon. 101 00:07:40,990 --> 00:07:48,550 Just click on it in order to close this specific attribute and in order actually to see other attributes 102 00:07:48,550 --> 00:07:49,200 you're right. 103 00:07:49,300 --> 00:07:54,770 And again inside this search bar search for the text attributes. 104 00:07:54,940 --> 00:07:57,600 Now we have this text attribute here. 105 00:07:57,760 --> 00:08:07,650 So for the value I can put a floating point in floating bottom and then press on and to key on your 106 00:08:07,650 --> 00:08:09,310 keyboard. 107 00:08:09,460 --> 00:08:10,310 So that's it. 108 00:08:10,310 --> 00:08:13,990 Now let's also give an ID to the Spartan. 109 00:08:13,990 --> 00:08:23,800 Again let's actually close this search and let's search for ID attribute and for the ID just put PTEN 110 00:08:24,130 --> 00:08:31,080 floating in between had floated and then press on into the key on your keyboard in order to separate 111 00:08:31,080 --> 00:08:31,960 this value. 112 00:08:32,160 --> 00:08:35,260 Now it's time to go inside our Java code. 113 00:08:35,430 --> 00:08:39,870 So open the main activity of a file if you don't know how to open this file. 114 00:08:39,990 --> 00:08:41,920 You just need to open the entry to view. 115 00:08:42,060 --> 00:08:47,370 So at the top menu you just need to click on view to leave windows and then click on project you will 116 00:08:47,370 --> 00:08:53,910 Vino's project and then it's going to actually show you the Android view here and then open the app 117 00:08:53,940 --> 00:08:54,430 for there. 118 00:08:54,430 --> 00:08:58,980 We have this Java for that open it and we have this first package here. 119 00:08:59,250 --> 00:09:01,540 Just open it and then you can see this file. 120 00:09:01,560 --> 00:09:03,050 This main activity fight. 121 00:09:03,180 --> 00:09:07,710 So let me tell you on this that you know there's to make this area wider So this video is already very 122 00:09:07,750 --> 00:09:11,200 long and I think that's enough for this tutorial. 123 00:09:11,340 --> 00:09:15,860 If you have any questions about the concepts that you've have that you have learned so far please post 124 00:09:15,850 --> 00:09:19,820 the discussion in the course and then I do my best to answer all of your questions. 125 00:09:20,250 --> 00:09:25,670 And in the next story are we going to continue building the floating view application. 126 00:09:25,950 --> 00:09:28,270 And I look forward to seeing you then.