1 00:00:00,210 --> 00:00:03,240 So and I say this uncle if ever I can actually with my logic here. 2 00:00:03,300 --> 00:00:04,260 So here I am. 3 00:00:04,290 --> 00:00:10,130 For example I want to actually change the text of this text view so I can't just typing in the. 4 00:00:10,170 --> 00:00:14,220 So when a user clicks on this button this and click if it is going to be executed. 5 00:00:14,280 --> 00:00:21,130 So excited that said text and instead of double quotes I can't just say the text. 6 00:00:21,630 --> 00:00:22,740 The text is changed. 7 00:00:22,740 --> 00:00:28,020 For example I want to actually change the value of this checkbox so I can just say I can see a text 8 00:00:28,430 --> 00:00:30,730 that's set checked. 9 00:00:30,990 --> 00:00:32,950 For example true. 10 00:00:33,650 --> 00:00:37,960 OK so now let's actually run our project and see what happens. 11 00:00:38,130 --> 00:00:41,770 So as you can see here inside this activity underlying minute example. 12 00:00:41,850 --> 00:00:44,850 So here let me actually click on this clear cashier here. 13 00:00:45,180 --> 00:00:49,390 We have this include file inside our main activity here. 14 00:00:49,410 --> 00:00:49,690 OK. 15 00:00:49,700 --> 00:00:52,590 Inside that inside our activity underline minute example. 16 00:00:52,590 --> 00:00:56,100 So now if I run my project we should see this include exemplified here. 17 00:00:56,100 --> 00:00:56,440 OK. 18 00:00:56,490 --> 00:01:02,490 So now as you can see here our application is actually running on this emulator and this is our include 19 00:01:02,740 --> 00:01:03,580 exemplified right. 20 00:01:03,600 --> 00:01:06,300 These are the user interface components that are inside. 21 00:01:06,300 --> 00:01:07,270 It includes vide. 22 00:01:07,290 --> 00:01:09,780 So now let's actually click on the spot in here. 23 00:01:09,810 --> 00:01:17,140 This is button and now as you can see the text is changed here and the value of this checkbox is true. 24 00:01:17,160 --> 00:01:18,660 This is checkbox. 25 00:01:18,660 --> 00:01:26,040 I can even actually change the text of this checkbox here so I can just typing or see a text that said 26 00:01:26,310 --> 00:01:33,150 text and I can actually to change the text of this checkbox to another value for example I can say that 27 00:01:33,290 --> 00:01:42,800 the value of this checkbox is true now. 28 00:01:43,440 --> 00:01:46,020 So let's run our project again and see what happens. 29 00:01:46,110 --> 00:01:50,840 So now as you can see here our application is running on this emulator here. 30 00:01:50,850 --> 00:01:55,460 So let's actually click on the spot in here and now as you can see the text is changed. 31 00:01:55,500 --> 00:02:01,000 And here we can see that the text of this checkbox is actually changed the values of this text box. 32 00:02:01,000 --> 00:02:02,150 That is true now. 33 00:02:02,310 --> 00:02:08,070 So I actually tightened values I should type value here. 34 00:02:08,190 --> 00:02:11,060 And as you can see here the search box is actually checked. 35 00:02:11,070 --> 00:02:15,420 So this means that disembarks the value of the search box is actually true. 36 00:02:15,420 --> 00:02:16,060 OK. 37 00:02:16,500 --> 00:02:20,860 So this is how you actually use the include files in your projects. 38 00:02:20,970 --> 00:02:22,800 And now I want to do another thing here. 39 00:02:22,800 --> 00:02:23,770 So look look at this. 40 00:02:23,790 --> 00:02:26,220 Look at that application now here on the simulator. 41 00:02:26,310 --> 00:02:30,440 So let's actually use Let's see how our application. 42 00:02:30,530 --> 00:02:33,620 See the design of our application in landscape mode. 43 00:02:33,700 --> 00:02:34,190 OK. 44 00:02:34,320 --> 00:02:40,500 So here as you can see I just need to rotate my device by clicking on the spot in here and I can see 45 00:02:40,500 --> 00:02:42,340 my device is rotated. 46 00:02:42,500 --> 00:02:48,780 And now as you can see the design of my user interface is actually changed and I cannot see the user 47 00:02:48,780 --> 00:02:51,270 interface components properly here. 48 00:02:51,510 --> 00:02:57,960 So there is a problem here so we should actually design our user interface to be good or to be nice 49 00:02:58,210 --> 00:03:00,110 in land in landscape mode. 50 00:03:00,210 --> 00:03:00,860 OK. 51 00:03:01,080 --> 00:03:02,730 So let's see how we can do that. 52 00:03:02,730 --> 00:03:08,490 So in our project structure as you can see in our project structure just click on this layout folder 53 00:03:08,490 --> 00:03:09,050 here. 54 00:03:09,060 --> 00:03:14,340 So I want to actually change the design of my user interface when the device is actually in the landscape 55 00:03:14,340 --> 00:03:14,890 mode. 56 00:03:14,910 --> 00:03:15,400 OK. 57 00:03:15,630 --> 00:03:21,460 So right click on this layout folder new and then click on layout resource file. 58 00:03:21,500 --> 00:03:27,280 So for the file name the name of your file they must be the same as this activity underline minute example 59 00:03:27,420 --> 00:03:32,910 because I want to actually change the design of my activity underline minute example when the device 60 00:03:32,910 --> 00:03:34,700 is actually in the landscape mode. 61 00:03:34,740 --> 00:03:38,080 So the name of my file must be the same as this in here. 62 00:03:38,240 --> 00:03:42,410 Activity underline made. 63 00:03:42,880 --> 00:03:44,760 OK that example. 64 00:03:45,240 --> 00:03:48,660 And here as you can see here we can't see these qualifiers here. 65 00:03:48,870 --> 00:03:54,870 So just select selectees orientation qualifier here and then click on this button here as you can see 66 00:03:56,030 --> 00:04:01,450 and here choose our this screen orientation to landscape identical. 67 00:04:01,540 --> 00:04:08,620 OK so now as you can see here I actually created another example file with this thing name as activity 68 00:04:08,630 --> 00:04:10,330 underline mean that exemption. 69 00:04:10,340 --> 00:04:13,540 So now it's actually DoubleClick and is laid layout directly here. 70 00:04:13,580 --> 00:04:19,700 And as you can see the ID actually created another directory with this name activity underlined made 71 00:04:19,760 --> 00:04:20,580 that example. 72 00:04:20,750 --> 00:04:24,450 And as you can see here inside the prentices we have disvalue number two. 73 00:04:24,560 --> 00:04:28,360 So this means we have two exemplifies with the same name. 74 00:04:28,400 --> 00:04:30,460 The first one is going to be for the device. 75 00:04:30,470 --> 00:04:32,130 Orientation is actually vertical. 76 00:04:32,270 --> 00:04:37,430 OK that this is the design of our user interface here a device orientation is vertical right. 77 00:04:37,460 --> 00:04:43,040 So what happens then the device orientation is landscape as you can see here when a device is actually 78 00:04:43,040 --> 00:04:45,370 in landscape mode what is going to happen. 79 00:04:45,380 --> 00:04:50,550 So now I can actually design the user interface of my application. 80 00:04:50,550 --> 00:04:55,090 Relativize is landscape as you can see here we have this linearly aesthetical as the that. 81 00:04:55,140 --> 00:04:55,670 Right. 82 00:04:55,700 --> 00:05:01,640 So if you click on this tapes stop here at the bottom we can see that we can see that we have a linear 83 00:05:01,650 --> 00:05:07,130 layout and the orientation is vertical and the lay out which is much Pallant and the layer of height 84 00:05:07,130 --> 00:05:07,710 is much parallel. 85 00:05:07,750 --> 00:05:08,600 Right. 86 00:05:08,600 --> 00:05:10,740 So let's actually go back to the Design tab. 87 00:05:11,120 --> 00:05:16,780 And now let's actually track and scroll view of vertical scroll view into this linearly Ellsworthy call. 88 00:05:16,940 --> 00:05:22,490 So just select this scroll view here inside this container's folder as you can see just selectees scroll 89 00:05:22,490 --> 00:05:26,530 view and put it at the center of this linearly aesthetical. 90 00:05:26,630 --> 00:05:27,130 OK. 91 00:05:27,290 --> 00:05:32,640 Soon as you can see here we have this scroll view that is actually inside is linearly earthwork to cut 92 00:05:32,640 --> 00:05:33,630 right. 93 00:05:33,650 --> 00:05:39,570 So now let's actually put our include file into this scroll view. 94 00:05:39,680 --> 00:05:43,420 So here as you can see inside this custom folder we have this include. 95 00:05:43,560 --> 00:05:49,280 OK so now I can actually search for my include file as you can see here this is my include underlined 96 00:05:49,280 --> 00:05:52,530 text underlined button underlined checkbox underlined panel. 97 00:05:52,560 --> 00:05:54,240 I just need to select it and then click on it. 98 00:05:54,280 --> 00:05:59,960 OK so now as you can see that I actually selected the include file I can actually put it inside this 99 00:06:00,020 --> 00:06:01,170 scroll view. 100 00:06:01,280 --> 00:06:07,820 I just need to click on the scroll and as you can see here my include file is actually now inside this 101 00:06:08,060 --> 00:06:08,770 scroll view. 102 00:06:08,900 --> 00:06:13,190 OK so now let's actually run our project and see what happens. 103 00:06:13,190 --> 00:06:19,250 So as you can see here our application is running on this emulator here and this is the design of the 104 00:06:19,250 --> 00:06:22,870 user interface of our application of this main activity here. 105 00:06:22,970 --> 00:06:26,860 This activity underline minute example of any device orientation is vertical. 106 00:06:27,020 --> 00:06:32,690 So let's see what happens then I actually rotated this device and that device is going to be in in the 107 00:06:33,380 --> 00:06:34,470 landscape mode. 108 00:06:34,550 --> 00:06:39,920 So just click on this rotate here and now you can see Mike the device is actually there in the landscape 109 00:06:39,920 --> 00:06:40,460 mode. 110 00:06:40,730 --> 00:06:46,160 And now as you can see it does include file is actually inside a scroll view or you can actually scroll 111 00:06:46,280 --> 00:06:47,790 and see these values right. 112 00:06:47,930 --> 00:06:53,900 So if I click on the spot in here now you can see that I can actually scroll and these values changed. 113 00:06:53,930 --> 00:06:57,990 The text is changed and the value of the checkbox is true now. 114 00:06:58,040 --> 00:07:04,610 So if you have two XML files for two different modes of any device orientation is vertical and when 115 00:07:04,610 --> 00:07:09,020 the device is actually in the landscape mode when the device orientation is actually vertical we don't 116 00:07:09,020 --> 00:07:11,440 have any scroll of use here. 117 00:07:11,630 --> 00:07:12,130 OK. 118 00:07:12,200 --> 00:07:18,740 But when the device is actually in the landscape mode we have actually of scroll view and this includes 119 00:07:18,740 --> 00:07:20,670 file is actually inside the scroll view. 120 00:07:20,750 --> 00:07:22,230 So I can scroll now. 121 00:07:22,490 --> 00:07:23,030 OK. 122 00:07:23,120 --> 00:07:28,910 So this is how you act how you can actually design the user interface of your application when the device 123 00:07:29,660 --> 00:07:34,930 orientation is actually vertical and when the device orientation is actually horizontal like this. 124 00:07:34,940 --> 00:07:37,680 So now hopefully that makes sense. 125 00:07:37,720 --> 00:07:41,330 I can I can even actually change the design here. 126 00:07:41,330 --> 00:07:47,570 I can actually select these include and put it at the center of these linearly out here on inside this 127 00:07:47,900 --> 00:07:49,220 scroll view as you can see. 128 00:07:49,310 --> 00:07:51,100 I have this include So as you can see here. 129 00:07:51,110 --> 00:07:54,320 Now these included is actually inside this linearly as vertical. 130 00:07:54,320 --> 00:07:59,280 So I just need to select it here and put it inside this scroll view here as you can see. 131 00:07:59,430 --> 00:08:05,030 And now as you can see here our include file is actually at the center of this scroll view so we can 132 00:08:05,030 --> 00:08:07,900 actually change this includes flight. 133 00:08:07,900 --> 00:08:10,770 And for example put it here at the right hand side. 134 00:08:11,150 --> 00:08:14,870 And again this include file is inside the cylinder linearly as vertical. 135 00:08:14,870 --> 00:08:18,740 So again I just need to select it and put it inside this scroll view. 136 00:08:19,070 --> 00:08:19,700 OK. 137 00:08:19,950 --> 00:08:24,160 Now as you can see here our include file is actually at the right hand side here. 138 00:08:24,290 --> 00:08:31,040 Inside this scroll view OK and this scroll as you can see is actually inside this linearly I-30 card. 139 00:08:31,040 --> 00:08:36,470 So now let's actually change this position the position of this include file and put it at the center 140 00:08:36,740 --> 00:08:38,700 of the city nearly vertical. 141 00:08:38,930 --> 00:08:42,310 And let's actually select it again and put it inside the scroll view. 142 00:08:42,500 --> 00:08:45,590 So let's actually run our project now and see what happens. 143 00:08:45,590 --> 00:08:50,380 So now as you can see here our application is running on the emulator here. 144 00:08:50,390 --> 00:08:53,020 So this is the design of my application. 145 00:08:53,120 --> 00:08:58,800 When the device orientation is actually vertical right so let's see what happens when a device orientation 146 00:08:58,830 --> 00:09:02,880 is actually horizontal or when the device is actually in the landscape mode. 147 00:09:02,880 --> 00:09:05,610 So I just need to click on this rotates button here rotate. 148 00:09:05,610 --> 00:09:06,560 Right. 149 00:09:07,140 --> 00:09:13,640 And now as you can see here my include file is actually at the center of this linearly out vertical 150 00:09:13,740 --> 00:09:19,770 as you can see here and I can actually scroll down here or scroll up as you can see and if I click on 151 00:09:19,770 --> 00:09:20,420 the spot. 152 00:09:20,550 --> 00:09:22,440 Now these values changed. 153 00:09:22,530 --> 00:09:24,000 The text is changed. 154 00:09:24,000 --> 00:09:27,210 This is button the value of this checkbox is true now. 155 00:09:27,280 --> 00:09:27,900 Right. 156 00:09:28,750 --> 00:09:33,960 So hopefully that makes sense and I think that's enough for this tutorial. 157 00:09:33,970 --> 00:09:39,250 So now you guys know how you can actually design the user interface of your applications when the device 158 00:09:39,280 --> 00:09:43,310 orientation is vertical or when the device is actually in landscape mode. 159 00:09:43,330 --> 00:09:48,340 So if you have any questions please post the discussion in the course and then I'll do my best to answer 160 00:09:48,430 --> 00:09:49,500 all of your questions. 161 00:09:49,660 --> 00:09:52,030 Thank you very much for watching and I'll see you in the next year. 162 00:09:52,030 --> 00:09:52,510 Tauriel.