1 00:00:00,130 --> 00:00:06,300 Hired Avon in this story are going to go ahead and we're going to download the image that we uploaded 2 00:00:06,300 --> 00:00:11,050 to the firebase in the previous tutorial so you can see that here we have this image just for there. 3 00:00:11,250 --> 00:00:15,870 And inside these images will there we have this image if I click on it you can see this image here. 4 00:00:15,870 --> 00:00:18,180 So let's wait a little bit here so I can see this image. 5 00:00:18,300 --> 00:00:24,210 So now we are going to download this image into our Android application and you're going to put this 6 00:00:24,210 --> 00:00:25,800 image into an image view. 7 00:00:25,800 --> 00:00:28,000 So let's go back to android studio. 8 00:00:28,050 --> 00:00:30,130 So here it is the android studio. 9 00:00:30,300 --> 00:00:37,090 And here let's go to the activity underline made that is now and here inside this appellate section 10 00:00:37,140 --> 00:00:38,640 you can see these images here right. 11 00:00:38,640 --> 00:00:42,910 Just click on it and just select this image and put it into our constraints. 12 00:00:42,900 --> 00:00:44,100 Lay out here. 13 00:00:44,130 --> 00:00:50,610 So now let's select actually a default image here sort of like this one I.C. Lanter I lantern around 14 00:00:50,640 --> 00:00:51,640 and then click on OK. 15 00:00:51,690 --> 00:00:56,240 So let's add some constraints to this image so let's actually select this image and put it here below 16 00:00:56,240 --> 00:00:57,030 the spot in. 17 00:00:57,090 --> 00:01:03,750 And here you can see that these two constraints are automatically created here to that left at the edge 18 00:01:03,750 --> 00:01:05,760 of the screen and to the right edge of the screen. 19 00:01:05,760 --> 00:01:06,140 Right. 20 00:01:06,270 --> 00:01:12,990 So these constraints are created because this option is actually on this we can see that we have some 21 00:01:12,990 --> 00:01:13,510 options here. 22 00:01:13,510 --> 00:01:18,450 Right the first one here allows you to actually see the constraints. 23 00:01:18,450 --> 00:01:25,100 The second option here actually allows you to turn on the auto connect feature of constraints. 24 00:01:25,100 --> 00:01:33,240 So this means that whenever you write a user interface component into it lay out some constraints based 25 00:01:33,330 --> 00:01:40,020 on the actually place that you put that user interface component as are going to be created. 26 00:01:40,320 --> 00:01:42,880 But you can see that these two constraints here are created here. 27 00:01:42,870 --> 00:01:47,010 So now let's create a constraint to the bottom edge of the Spartan. 28 00:01:47,010 --> 00:01:52,850 So just we can see this little circle that is pulsating here on the top edge of this image view. 29 00:01:52,950 --> 00:01:59,490 So create a constraint here to the bottom edge of the spot in here and just it connected to the little 30 00:01:59,490 --> 00:02:01,940 circle that is pulsating on the bottom edge of this button. 31 00:02:02,100 --> 00:02:04,930 So there is a constraint here to the bottom of this button. 32 00:02:05,070 --> 00:02:12,860 Let's change the top margin here to number 20 and then press and until you keyboard select this image 33 00:02:13,260 --> 00:02:20,910 and let's for example I want to actually increase the width and the height of this image so we can actually 34 00:02:21,030 --> 00:02:22,800 change these. 35 00:02:22,970 --> 00:02:24,810 Actually that is of concern here. 36 00:02:24,810 --> 00:02:30,010 So you can see inside this property section if you consider it currently it is wrapped content. 37 00:02:30,030 --> 00:02:36,840 If I click on it now it is what it is actually let me hover over it in order to show you that it is 38 00:02:36,840 --> 00:02:42,440 actually fixed and now it is actually it is not fixed and it is match constraints. 39 00:02:42,660 --> 00:02:48,780 So I wanted this image viewed to take the entire width of eyes of the parent which is going to be the 40 00:02:48,780 --> 00:02:49,970 constraints there. 41 00:02:50,130 --> 00:02:56,200 So you can see that I selected these match constraints here for which constraint. 42 00:02:56,250 --> 00:03:01,250 So now let's I want to increase the height of this image so selected. 43 00:03:01,620 --> 00:03:08,160 And now for the height we can actually change it here if you can for the lay of height let's add the 44 00:03:08,160 --> 00:03:10,790 value 100 and then press and it'll change. 45 00:03:10,890 --> 00:03:12,300 So 100 is good. 46 00:03:12,300 --> 00:03:13,020 Right. 47 00:03:13,050 --> 00:03:15,870 So let's give an ID to this image of you. 48 00:03:15,870 --> 00:03:17,300 So for the artist they can. 49 00:03:17,370 --> 00:03:19,490 IMT downloaded. 50 00:03:19,530 --> 00:03:22,720 I emptied them loaded and then present intention your keyboard. 51 00:03:22,950 --> 00:03:27,240 So let's go to our main activity class let's declared it image here. 52 00:03:27,260 --> 00:03:33,180 Inside me an activity class private's image view and the name of this image is actually AMG download 53 00:03:33,210 --> 00:03:33,720 right. 54 00:03:33,750 --> 00:03:34,910 I am g download. 55 00:03:34,970 --> 00:03:41,460 I notice that your image name here to your rowdier but it means you must not be of type must not be 56 00:03:41,460 --> 00:03:45,680 the same as the ID that you actually specified inside the exemplified. 57 00:03:45,810 --> 00:03:52,390 But here I just decided to use the design name as the name of this. 58 00:03:52,480 --> 00:03:57,870 So you can see this name is the same as the name of the ID that V is specified for the image view inside 59 00:03:57,900 --> 00:03:59,240 or Actimel fight. 60 00:03:59,280 --> 00:04:05,610 So let's go into our uncreate Smurfette here and now let's up is below this line of code that actually 61 00:04:05,640 --> 00:04:07,020 initialises this button. 62 00:04:07,140 --> 00:04:11,820 Let's initialize our image viewer so I m g down low that assignment operator. 63 00:04:11,940 --> 00:04:20,940 And now let's cast this object to an image object find view by id r that Id dot or M G downloaded and 64 00:04:20,940 --> 00:04:23,900 then put a semicolon at the end of your statement right. 65 00:04:23,970 --> 00:04:29,560 So here inside this class let's create two body but this let's actually declare ready to rock the bells 66 00:04:29,580 --> 00:04:29,920 here. 67 00:04:30,090 --> 00:04:35,310 So again just say it in private and then it and the data type of the first value but that we are going 68 00:04:35,310 --> 00:04:40,710 to create here is going to be off the Procrustes dialogue and the name of this variable is going to 69 00:04:40,710 --> 00:04:43,820 be download progress dialog. 70 00:04:45,530 --> 00:04:48,190 Right and then put a semicolon here. 71 00:04:48,260 --> 00:04:52,890 The second variable is going to be of type you are or you are. 72 00:04:53,420 --> 00:04:55,570 And the name of this variable is going to be download. 73 00:04:55,680 --> 00:04:57,270 You are right a semi-colon. 74 00:04:57,470 --> 00:05:02,880 So now that we actually declare these variables it's time to initialize these variables. 75 00:05:02,900 --> 00:05:05,690 So let's go into this uncreate Smurfette here. 76 00:05:05,690 --> 00:05:10,610 So after these two lines of code it actually initializers these user interface components. 77 00:05:10,610 --> 00:05:16,220 Let's initialize our download progress dialog assignment operator and he has just left. 78 00:05:16,230 --> 00:05:19,340 He had new progress dialog like. 79 00:05:19,460 --> 00:05:25,470 So now we just need to pass the context which is going to be main activity that this slight semi-colon. 80 00:05:25,550 --> 00:05:26,540 That's it. 81 00:05:26,540 --> 00:05:32,030 So let's go into our unactivated result to me an activity result if it hit at the bottom. 82 00:05:32,060 --> 00:05:34,700 So here it is our unactivated result method right. 83 00:05:34,730 --> 00:05:37,310 So inside this case statement here. 84 00:05:37,310 --> 00:05:38,240 Case number 1. 85 00:05:38,270 --> 00:05:40,760 If request code is equal to a result. 86 00:05:40,770 --> 00:05:41,900 OK here. 87 00:05:42,260 --> 00:05:48,320 Now I'm going to actually say that a Procrustes dialog with progress they like actually thought sets 88 00:05:48,380 --> 00:05:52,930 message and we can't say downloading image downloading. 89 00:05:54,610 --> 00:06:00,780 Image from firebase from Firebrace dot dot dot. 90 00:06:01,000 --> 00:06:04,560 And now we can actually say download progress. 91 00:06:04,570 --> 00:06:07,560 I like that show semi-colon. 92 00:06:07,930 --> 00:06:14,130 So now we want you to go inside these unsuccess listener here inside is unsuccess the and and Mefford 93 00:06:14,590 --> 00:06:20,400 and after uploading the image after uploading the image to the firebase here. 94 00:06:20,590 --> 00:06:24,970 Now we are going to download the image to our Android application. 95 00:06:24,970 --> 00:06:29,650 So here first we need to get the download you are right from the task snapshot. 96 00:06:29,680 --> 00:06:32,040 So let's see if referred to our downloads. 97 00:06:32,050 --> 00:06:37,540 You are valuable that we created above inside our main activity class assignment operator. 98 00:06:37,780 --> 00:06:45,300 So now we are going to refer to this task snapshot that get download you are the semi-colon. 99 00:06:45,400 --> 00:06:50,050 So I refer to this argument task snapshot and I call it the Smurfit on this argument. 100 00:06:50,050 --> 00:06:56,680 So notice that there is this red line here and there is a bug here. 101 00:06:56,710 --> 00:06:59,440 I think it is this bug is related to Android studio. 102 00:06:59,520 --> 00:07:01,550 Don't forget it is not an error. 103 00:07:01,710 --> 00:07:02,250 OK. 104 00:07:02,320 --> 00:07:03,090 It is not an error. 105 00:07:03,100 --> 00:07:07,270 It is just a bug and it's not going to actually cause problems. 106 00:07:07,550 --> 00:07:08,310 I don't know. 107 00:07:08,350 --> 00:07:13,200 It's not going to cause for example a runtime error or maybe a compile time error. 108 00:07:13,510 --> 00:07:20,650 And after this line of code here I'm going to actually say so remember that we added the Picasso library 109 00:07:20,650 --> 00:07:22,770 to our Android project. 110 00:07:22,780 --> 00:07:23,220 Right. 111 00:07:23,230 --> 00:07:28,190 So we can actually refer to this Picasso class Picazo that we get. 112 00:07:28,240 --> 00:07:30,130 So we need to pass the context here. 113 00:07:30,130 --> 00:07:30,570 Right. 114 00:07:30,580 --> 00:07:35,600 The context is going to be main activity that this dot load. 115 00:07:36,010 --> 00:07:42,280 So now we need to actually pass the file here to this method and see that we have different versions 116 00:07:42,280 --> 00:07:42,910 of this method. 117 00:07:42,910 --> 00:07:44,250 Let me show you this method again. 118 00:07:44,250 --> 00:07:45,230 Load. 119 00:07:45,660 --> 00:07:49,960 If you have different versions of this method that actually access different arguments the first one 120 00:07:49,960 --> 00:07:51,500 accepts or you are right. 121 00:07:51,670 --> 00:07:58,210 The second argument accepts a path the first argument exits a fight and the final argument accepts actually 122 00:07:58,200 --> 00:08:00,080 a resource ID because of that integer. 123 00:08:00,220 --> 00:08:04,940 So we have the you are right we have to download you are here so we can pass it here. 124 00:08:05,030 --> 00:08:11,200 But actually we can't pass down to you are here and now we can actually say that feat. 125 00:08:11,260 --> 00:08:15,540 So it's going to fit the image into our image view but Center Kropp. 126 00:08:15,970 --> 00:08:23,050 OK so it's going to actually put our image into our image view you like this image that we have here. 127 00:08:23,050 --> 00:08:23,320 Right. 128 00:08:23,320 --> 00:08:25,800 You can see the center image view here. 129 00:08:25,810 --> 00:08:30,190 So let's go back to Andrew so that let's go back to our main activity class actually and then we translate 130 00:08:30,190 --> 00:08:32,300 that into. 131 00:08:32,530 --> 00:08:34,180 So now we need to pass the image view. 132 00:08:34,210 --> 00:08:39,280 So we have this I m g download that's it. 133 00:08:39,290 --> 00:08:45,880 So now after actually downloading the image and put it and putting it into our image view we can actually 134 00:08:45,880 --> 00:08:49,410 say download progress they dialog with progress. 135 00:08:49,410 --> 00:08:51,190 They like that this is. 136 00:08:51,370 --> 00:08:57,010 So now let's run the application here let's click on the wrong button here at the bar at the top menu 137 00:08:57,010 --> 00:08:57,560 here. 138 00:08:57,700 --> 00:09:00,890 So let's read a little bit here let's select one of these devices and then click on OK. 139 00:09:00,940 --> 00:09:04,490 So here you can see that our application is running on this emulator. 140 00:09:04,500 --> 00:09:08,100 Let's click on the upload the image to firebase here. 141 00:09:08,120 --> 00:09:09,990 So for example choose this one. 142 00:09:10,060 --> 00:09:15,680 Right now it says Downloading image from firebase uploading was successful. 143 00:09:15,700 --> 00:09:18,490 And now we have this image here into our image view. 144 00:09:18,760 --> 00:09:22,430 So you can see that the entire image is not set into our image view. 145 00:09:22,570 --> 00:09:24,340 That's because of the constraints lay out. 146 00:09:24,340 --> 00:09:29,930 Let's go to our activity and activity on that minute exam and here we can actually select this image. 147 00:09:29,970 --> 00:09:33,790 So for the layout height let's pass the value 200. 148 00:09:34,240 --> 00:09:36,850 Let's run the application again. 149 00:09:36,850 --> 00:09:39,020 Let me show you the emulator. 150 00:09:39,030 --> 00:09:43,680 See that the app is actually running and the simulator lets you can upload the image to firebase this 151 00:09:43,720 --> 00:09:47,030 choose this fun and now it is downloading image from Firebrace. 152 00:09:47,050 --> 00:09:51,490 And now it's going to actually say uploading was successful and now you can see this image here. 153 00:09:51,640 --> 00:09:52,460 That's it. 154 00:09:52,810 --> 00:09:58,840 So if you have any questions about the concepts that I taught you in this lesson please post the discussion 155 00:09:58,840 --> 00:10:03,670 in the course and then I'll do my best to answer all of your questions in the next two years. 156 00:10:03,720 --> 00:10:08,910 I'm going to actually show you how we can upload the voice to firebase. 157 00:10:09,190 --> 00:10:10,140 Right. 158 00:10:10,180 --> 00:10:11,960 So that's it. 159 00:10:12,250 --> 00:10:13,810 And I'll see you in the next tutorial.