1 00:00:00,130 --> 00:00:05,210 In this theater we're going to go ahead and create another Android application. 2 00:00:05,220 --> 00:00:06,150 So just click on this. 3 00:00:06,180 --> 00:00:14,230 Start in your Android studio project and for the application name just type in your app 58 next and 4 00:00:14,280 --> 00:00:20,660 he has choose AP 16 Android 4.1 Dehli been for a minimum STK and then click on next. 5 00:00:21,030 --> 00:00:25,920 And here choose Blanche activity next and then click on finish. 6 00:00:26,370 --> 00:00:32,380 So now let's actually select this hello world takes here and then press on delete key on your keyboard. 7 00:00:32,640 --> 00:00:38,250 And let's actually double click on these arrests for that layout and then double click and this activity 8 00:00:38,250 --> 00:00:39,710 underline made that example. 9 00:00:39,840 --> 00:00:42,080 And then here are selectees floating action button. 10 00:00:42,090 --> 00:00:44,400 And then presently here on your keyboard. 11 00:00:44,730 --> 00:00:50,070 So now it's actually double click and this content underline mentalism and tap here in order to make 12 00:00:50,070 --> 00:00:51,170 this area wider. 13 00:00:51,300 --> 00:00:55,010 So now we can actually designed to use an interface of our application. 14 00:00:55,230 --> 00:01:00,300 But first of all let me ask you to show you that more of the application that you want to create in 15 00:01:00,300 --> 00:01:01,540 this tutorial. 16 00:01:01,680 --> 00:01:10,430 So this is our application and here as you can see I actually have an image switcher inside this layout. 17 00:01:10,540 --> 00:01:17,110 And here I can actually scroll to the left in order to actually the images as you can see here. 18 00:01:17,310 --> 00:01:22,220 And if I actually click on this image now I can see the images at the bottom. 19 00:01:22,230 --> 00:01:22,660 OK. 20 00:01:22,830 --> 00:01:26,590 But as you can see we can see some animation effects here. 21 00:01:26,640 --> 00:01:31,770 If I click on this image here now you can see that there is a there is an extra The animation effect 22 00:01:31,770 --> 00:01:32,300 here. 23 00:01:32,440 --> 00:01:37,350 And I want to actually show you how we can actually use animation effects in your application. 24 00:01:37,350 --> 00:01:43,900 OK so if I click on this image view here now as you can see our previous image will fade out OK. 25 00:01:43,980 --> 00:01:49,310 And this image that is going to be our inside of this image view is actually fading. 26 00:01:49,520 --> 00:01:50,000 OK. 27 00:01:50,130 --> 00:01:54,230 So that's the animation effect that we want to actually create in this application. 28 00:01:54,450 --> 00:02:02,580 OK so now if I click on this image now that image that now I can actually scroll down to see the other 29 00:02:02,580 --> 00:02:02,990 image. 30 00:02:03,090 --> 00:02:04,630 So let me actually click on this image. 31 00:02:04,650 --> 00:02:07,670 Now this that previous image faded out. 32 00:02:07,710 --> 00:02:11,890 OK so now let's actually go back to our content underlined in that example. 33 00:02:11,970 --> 00:02:17,820 So now let's actually write our linearly out vertical into this relatively out here. 34 00:02:17,820 --> 00:02:23,920 So just select is linearly out vertical and put it at the center of this relatively out here. 35 00:02:24,120 --> 00:02:30,740 And then let's actually drag our scroll you are vertical scroll you into These are linearly out vertical. 36 00:02:30,750 --> 00:02:35,670 So just select this scroll view these vertical scroll view that is inside of these containers folder 37 00:02:36,090 --> 00:02:37,740 and put it inside. 38 00:02:37,740 --> 00:02:40,110 These are linearly out vertical here. 39 00:02:40,140 --> 00:02:47,120 OK so just put it at the center of this linearly reticle and then actually direct and either linearly 40 00:02:47,120 --> 00:02:50,350 as we have to call into this scroll view here. 41 00:02:50,660 --> 00:02:56,880 OK and now let's actually put our user interface components into this linearly Ellsworthy call that 42 00:02:56,940 --> 00:02:59,190 is inside of this scroll view OK. 43 00:02:59,280 --> 00:03:06,170 So first of all let's actually track a horizontal scroll view inside these linearly out 20 call. 44 00:03:06,210 --> 00:03:06,780 OK. 45 00:03:06,780 --> 00:03:08,600 So inside these containers fall there. 46 00:03:08,660 --> 00:03:10,840 If you have these a horizontal scroll view. 47 00:03:11,000 --> 00:03:14,200 So just put it inside this linearly outwards to call here. 48 00:03:14,430 --> 00:03:20,460 And then let's actually drag up a horizontal linearly out as you can see these linearly or horizontally 49 00:03:20,760 --> 00:03:23,080 into these horizontal scroll view. 50 00:03:23,160 --> 00:03:29,240 OK so now I want these are linearly out horizontal as you can see here that is inside of this horizontal 51 00:03:29,260 --> 00:03:30,080 scroll you. 52 00:03:30,340 --> 00:03:34,930 I want these a horizontal scroll view to be at the center of the screen. 53 00:03:34,950 --> 00:03:35,790 OK. 54 00:03:35,790 --> 00:03:42,360 So here first of all it's actually to select this vertical scroll view as you can see the layout of 55 00:03:42,360 --> 00:03:44,730 this scroll is Metropolit. 56 00:03:44,760 --> 00:03:47,350 So just change this to wrap content. 57 00:03:47,450 --> 00:03:50,800 OK let's actually change the layout height of this scroll. 58 00:03:50,880 --> 00:03:51,910 As you can see here. 59 00:03:52,140 --> 00:03:54,640 So just change it to wrap content. 60 00:03:54,960 --> 00:03:55,880 OK. 61 00:03:55,890 --> 00:04:01,380 So it can actually wrap the content of its child OK of its children. 62 00:04:01,380 --> 00:04:06,240 So now let's actually click on this linearly Ellsworthy Karl. 63 00:04:06,300 --> 00:04:06,900 OK. 64 00:04:07,110 --> 00:04:09,910 So as you can see here we have a gravity attribute. 65 00:04:09,990 --> 00:04:14,990 So just open this gravity attribute and then check it is a center check box here. 66 00:04:15,360 --> 00:04:16,400 OK. 67 00:04:16,440 --> 00:04:19,490 And then you have this linearly out vertical here. 68 00:04:19,590 --> 00:04:20,270 OK. 69 00:04:20,460 --> 00:04:21,440 Select it. 70 00:04:21,630 --> 00:04:25,320 And as you can see here we have this our gravity attribute here. 71 00:04:25,320 --> 00:04:25,760 OK. 72 00:04:25,890 --> 00:04:29,720 So just so just check these centers take a box here. 73 00:04:30,150 --> 00:04:30,780 OK. 74 00:04:31,050 --> 00:04:36,480 And now as you can see this scroll view as you can see here is at the center of this screen. 75 00:04:36,490 --> 00:04:36,910 OK. 76 00:04:37,050 --> 00:04:41,480 And as you can see here it's choice which is this linearly or vertical. 77 00:04:41,690 --> 00:04:43,790 It is also at the center. 78 00:04:43,860 --> 00:04:48,310 And we have this horizontal scroll view that is inside of this linearly as well as the code. 79 00:04:48,330 --> 00:04:50,140 It is also at the center of the screen. 80 00:04:50,250 --> 00:04:50,920 OK. 81 00:04:50,940 --> 00:04:57,510 And this is as you can see here this linearly or horizontal is actually at the center of just because 82 00:04:57,570 --> 00:05:00,950 it is a child of these horizontal you OK. 83 00:05:01,310 --> 00:05:08,020 So now let's actually go inside these experts for that as you can see here we have these experts there. 84 00:05:08,270 --> 00:05:11,120 And inside this folder we have this image switcher. 85 00:05:11,120 --> 00:05:11,710 OK. 86 00:05:11,930 --> 00:05:17,730 So just selected OK and put it inside this linearly out vertical here. 87 00:05:18,140 --> 00:05:19,820 OK so this is our image switcher. 88 00:05:19,880 --> 00:05:21,310 OK. 89 00:05:21,410 --> 00:05:24,080 Now let's actually find the ID attribute. 90 00:05:24,180 --> 00:05:27,440 So for the ID just type in here I m g switcher. 91 00:05:27,570 --> 00:05:28,900 Sweet chip. 92 00:05:29,570 --> 00:05:32,240 And then press enter key on your keyboard. 93 00:05:32,660 --> 00:05:38,070 OK so now let's actually go inside this main activity that double file here and this actually did it. 94 00:05:38,090 --> 00:05:43,910 Are these lines of code that are related to the Options menu and then Adelaida this block of code that 95 00:05:43,910 --> 00:05:46,430 is related to the floating action button. 96 00:05:46,610 --> 00:05:50,220 So here are let's actually create a class called animal. 97 00:05:50,240 --> 00:05:54,080 So click on file name and then click on Dobber class. 98 00:05:54,080 --> 00:05:57,300 So for the class name just type in here and command and then click on. 99 00:05:57,350 --> 00:05:57,930 OK. 100 00:05:58,040 --> 00:06:01,580 So now I want to actually put some images into my project. 101 00:06:01,790 --> 00:06:06,030 So as you can see here we have this triable folder and these are my images. 102 00:06:06,050 --> 00:06:13,290 I just need to copy these images OK and then paste them inside this tribal folder. 103 00:06:13,540 --> 00:06:15,710 And as it gets here you have these images here. 104 00:06:15,770 --> 00:06:16,350 OK. 105 00:06:16,610 --> 00:06:19,220 So now our inside is Animal class. 106 00:06:19,230 --> 00:06:21,540 I want to actually put in some lines of code here. 107 00:06:21,560 --> 00:06:26,010 OK so now I'm going to paste in some lines of code here. 108 00:06:26,030 --> 00:06:28,770 So as you can see here these are two arrows. 109 00:06:28,850 --> 00:06:32,540 OK animal images as you can see we have an array of integer values. 110 00:06:32,660 --> 00:06:34,070 And this area is static. 111 00:06:34,070 --> 00:06:41,210 OK so we can actually access these animal images at that's creating an object from this animal class. 112 00:06:41,210 --> 00:06:46,110 And if you have another at a here animal names and this is also static. 113 00:06:46,130 --> 00:06:46,740 OK. 114 00:06:47,030 --> 00:06:52,370 So let's actually go back and say this main activity that java file here and now inside this class let's 115 00:06:52,370 --> 00:06:54,130 actually putting some lines of code here. 116 00:06:54,170 --> 00:06:58,700 So inside of this main activity class I'm pasting some lines of code and then I'm going to explain to 117 00:06:58,700 --> 00:06:59,720 you what's going on here. 118 00:06:59,720 --> 00:07:03,760 So as you can see here I actually pasted these lines of code here. 119 00:07:03,800 --> 00:07:09,590 The first one is actually of type linearly out as you can see I created an object of type linearly out 120 00:07:09,830 --> 00:07:15,600 and the name of this object is linearly out horizontal and the second object is of type or image switcher 121 00:07:15,830 --> 00:07:18,710 and the name of this object is IMJ so each are OK. 122 00:07:18,740 --> 00:07:24,170 So now let's actually go back and say this content underline line that example and here are selectees 123 00:07:24,230 --> 00:07:25,970 linearly at horizontal. 124 00:07:26,060 --> 00:07:26,790 That is insane. 125 00:07:26,850 --> 00:07:28,630 Inside of this horizontal scroll view. 126 00:07:28,670 --> 00:07:33,990 OK select this linearly or horizontal and actually find the ID attributes. 127 00:07:34,010 --> 00:07:40,180 So as you can see here we have this id attribute here that is related to this linearly out horizontal. 128 00:07:40,220 --> 00:07:49,630 So for the ID to step in here a linear layout horizontal OK. 129 00:07:50,030 --> 00:07:53,150 And then our prison enter here on your keyboard. 130 00:07:53,150 --> 00:07:57,040 So here I need to put in our capital letter H. 131 00:07:57,120 --> 00:08:01,420 Ok linearly out horizontal and then press on until key on your keyboard. 132 00:08:01,520 --> 00:08:05,250 OK so now let's you go back and say this main activity that. 133 00:08:05,450 --> 00:08:11,210 And here I want to actually instantiate these two objects that they actually declared inside this main 134 00:08:11,210 --> 00:08:12,130 activity class. 135 00:08:12,140 --> 00:08:15,190 So here I can just type in linearly out horizontal. 136 00:08:15,200 --> 00:08:21,830 Assignment operator and here I need to actually cast this object to linearly out object as you can see 137 00:08:21,830 --> 00:08:32,540 here linearly out find the by ID that Id dots linearly out horizontal and then I need to put in a semi-colon 138 00:08:32,550 --> 00:08:36,770 at the end of my statement and then I need to actually instantiate this. 139 00:08:36,770 --> 00:08:40,370 I am just twitcher object that you declared in line 12. 140 00:08:40,490 --> 00:08:42,670 So here I need to refer to the name of that object. 141 00:08:42,680 --> 00:08:49,120 I just do it for assignment operator and then here I need to actually cast this object to an image switch 142 00:08:49,120 --> 00:08:49,940 an object. 143 00:08:49,980 --> 00:08:52,630 So Image switcher. 144 00:08:52,930 --> 00:08:59,300 Ok find view by ID or that ID that I am the switcher. 145 00:08:59,360 --> 00:09:03,850 So in order to use this I am just to each an object that is of type image each. 146 00:09:04,100 --> 00:09:08,390 We need to actually implement the view factory interface. 147 00:09:08,420 --> 00:09:11,180 Ok so what is this new factory. 148 00:09:11,180 --> 00:09:16,880 So as you can see here in Android documentation you can actually put in this you are in your browser 149 00:09:17,120 --> 00:09:19,250 and then you will be guided to this page. 150 00:09:19,250 --> 00:09:24,150 And as you can see here if you have an interface called view switch that view factory OK. 151 00:09:24,410 --> 00:09:27,200 And as you can see here this is actually an interface. 152 00:09:27,200 --> 00:09:28,060 OK. 153 00:09:28,250 --> 00:09:32,960 And here as you can see it says it creates views in a view suture. 154 00:09:33,020 --> 00:09:33,390 OK. 155 00:09:33,470 --> 00:09:40,580 So in order to use the image switcher in order to use the image of you switcher we need to actually 156 00:09:40,970 --> 00:09:44,340 implement this view factory or this interface. 157 00:09:44,380 --> 00:09:44,730 OK. 158 00:09:44,810 --> 00:09:50,240 Because it actually creates views in a view switcher and an image we use which is actually a subclass 159 00:09:50,300 --> 00:09:51,590 of these views to each other. 160 00:09:51,690 --> 00:09:53,220 OK you switch the class. 161 00:09:53,270 --> 00:10:00,030 So now as you can see this is the abstract method that we need to actually implement in our class view 162 00:10:00,330 --> 00:10:03,700 it creates a new value to be added interviews to each other. 163 00:10:03,830 --> 00:10:08,810 OK so now let's actually to go back to our Andrex studio of Iepe.