1 00:00:05,450 --> 00:00:10,890 Alright, so let's experiment with the image now. I want to show you a potential problem you can get with certain 2 00:00:10,890 --> 00:00:12,420 image sizes in our app. 3 00:00:12,580 --> 00:00:17,610 Now to do that, without having to hunt through all the images in hopes that there's one of the right size, I've 4 00:00:17,670 --> 00:00:24,690 actually modified the code slightly. So I've hardcoded an image URL, so that photo details activity always displays 5 00:00:24,830 --> 00:00:28,370 my image rather than the one downloaded from Flickr. 6 00:00:28,380 --> 00:00:33,270 So what we're going to do is run the app on all three emulators again, and as I've said I've hardcoded 7 00:00:33,270 --> 00:00:39,030 the URL so that I always get the same image. The thumbnails are all different, but they'll all display this 8 00:00:39,030 --> 00:00:41,390 bamboo forest image when I long tap them. 9 00:00:41,630 --> 00:00:47,770 So I'm going to just run the app first on all three emulators, and you can see what I mean. 10 00:00:52,000 --> 00:00:53,090 Give them all a moment to start. 11 00:00:53,280 --> 00:00:58,340 So we've got our API 17, emulator API 21 and API 26, 12 00:00:58,650 --> 00:00:59,090 I'll just open that. 13 00:01:02,090 --> 00:01:07,690 OK and if I long tap, you can see can we've got that bamboo image. 14 00:01:07,760 --> 00:01:13,170 The next one, and then API 26, just to confirm that is the case 15 00:01:13,180 --> 00:01:15,420 I'm going to do another image, 16 00:01:15,550 --> 00:01:18,870 select another thumbnail rather, and you can see we've got the same image. 17 00:01:19,060 --> 00:01:22,690 So again the thumbnail's are all different but they all display this bamboo forest image 18 00:01:22,690 --> 00:01:28,690 when I long tap them. And as you can see here, all three emulators look very similar with the image fitting nicely 19 00:01:28,690 --> 00:01:29,930 in the center of the screen. 20 00:01:30,120 --> 00:01:31,340 Now let's experiment with that 21 00:01:31,360 --> 00:01:34,720 adjustViewBounds attribute that I mentioned a few videos ago. 22 00:01:34,870 --> 00:01:40,330 So if we go back to Android Studio, I'm going to open up the content photo underscore details in the layouts 23 00:01:40,330 --> 00:01:40,700 folder, 24 00:01:45,850 --> 00:01:49,140 and I'm just going to close down the project pane for now and make a bit more space. 25 00:01:49,290 --> 00:01:53,700 Then when I select the image view, which we can do either here from the component tree, or from the designer 26 00:01:53,700 --> 00:02:00,920 or blueprint, and that's going to load up the attributes, and this adjustViewBounds is what we want to have a 27 00:02:00,920 --> 00:02:01,740 look at. 28 00:02:01,970 --> 00:02:06,170 Now it should appear here in the common attributes, but if Google have moved it when you come to watch 29 00:02:06,170 --> 00:02:10,210 this video, you may need to come over here and expand the attributes to find it. 30 00:02:10,669 --> 00:02:16,040 So at the moment, adjustViewBounds is to set to the default. The tri state button has a dash through it. Now 31 00:02:16,410 --> 00:02:17,800 the default is off, 32 00:02:17,870 --> 00:02:19,080 or false. 33 00:02:19,100 --> 00:02:23,800 So let's see what happens when we turn this on to see what effect it has on our image. 34 00:02:23,810 --> 00:02:29,790 So when I click it, you want to make sure that this is now a tick for the adjustViewBounds attribute. 35 00:02:29,960 --> 00:02:33,890 Once you've done that run the app again. So let's go ahead and do that, 36 00:02:33,920 --> 00:02:35,120 run it on all three emulators. 37 00:02:44,520 --> 00:02:55,880 OK and let's just try opening them now. 38 00:02:56,010 --> 00:03:01,440 Now as you can see, it looks OK on API 21 and API 26. 39 00:03:01,510 --> 00:03:05,910 The image is as wide as possible, and I can scroll down to see the description and tags, or at least I 40 00:03:05,920 --> 00:03:10,150 can if I do. I'm scrolling down to get the tags, you can see I can read those, 41 00:03:10,350 --> 00:03:12,020 and same for API 26. 42 00:03:12,030 --> 00:03:13,600 I can scroll down if I need to. 43 00:03:13,890 --> 00:03:15,520 So everything seems to fit nicely. 44 00:03:15,660 --> 00:03:18,370 Now that's why we used a scroll view by the way, so that we can do that. 45 00:03:18,520 --> 00:03:23,210 Some images will extend off the bottom of the screen, and you have to scroll to see the lower portion, 46 00:03:23,210 --> 00:03:27,240 and you can see that I needed to scroll just a little bit to see some of the tags. 47 00:03:27,520 --> 00:03:34,990 OK, that's the difference that adjustViewBounds has made on API versions above 17, but on that API 17 devices, 48 00:03:35,010 --> 00:03:36,570 it's made no difference. 49 00:03:36,630 --> 00:03:39,270 So that's what adjustVBiewBounds does. 50 00:03:39,380 --> 00:03:46,110 It causes the image view to fit the image to itself, then it recalculates and expands to fit the image if 51 00:03:46,110 --> 00:03:47,040 necessary. 52 00:03:47,100 --> 00:03:53,910 So you get the best fit possible in the available space, whilst preserving the aspect ratio of the image, 53 00:03:54,210 --> 00:03:56,560 so that it doesn't stretch it in other words. 54 00:03:56,610 --> 00:03:58,740 So what about that note that we looked at before? 55 00:03:58,980 --> 00:04:00,240 Let's just go back to Google again, 56 00:04:04,320 --> 00:04:05,370 on ImageView. 57 00:04:07,550 --> 00:04:13,570 And just to save a bit of time I'm going to do a search for level 17, to get to where we want to go to, down here, 58 00:04:14,110 --> 00:04:21,970 down here for setAdjustViewBounds. So if the application targets API Level 17 or lower, adjustViewBounds 59 00:04:21,970 --> 00:04:28,340 will allow the drawable to shrink the view bounds, but not grow to fill available measured space in all instances. 60 00:04:28,610 --> 00:04:32,760 So in other words, it's not saying that it won't work on API 17 or lower, 61 00:04:32,770 --> 00:04:37,840 it's saying that the image view won't always grow to fill the available space in all cases. 62 00:04:38,130 --> 00:04:43,180 Now on the API levels above API 17 you saw that it did work. On my Nexus 63 00:04:43,200 --> 00:04:45,060 emulator running API 17, 64 00:04:45,060 --> 00:04:46,660 we hit one of those cases. 65 00:04:46,840 --> 00:04:49,520 So going back to Android Studio, 66 00:04:49,670 --> 00:04:52,300 well actually we'll go back to our emulator. 67 00:04:52,320 --> 00:04:56,920 So I'll just minimize Chrome for now, so that we can get access to emulators again. 68 00:04:59,450 --> 00:05:07,310 So again, on API levels above API 17 it did work, but on the Nexus 5X, running on API 17 we hit one of 69 00:05:07,310 --> 00:05:08,240 those cases. 70 00:05:08,390 --> 00:05:13,280 We still get the thick border, as you can see around here, and adjustViewBounds hasn't actually made 71 00:05:13,520 --> 00:05:14,790 any difference. 72 00:05:14,840 --> 00:05:20,750 So adjustViewBounds gave a good effect on API 21 and above, actually on API 18 and above, but 73 00:05:20,750 --> 00:05:24,020 may not work on all devices running API 17 or below. 74 00:05:24,290 --> 00:05:31,430 Now you could spend a lot of time trying to get the same effect on this API 17 Nexus 5X. One solution 75 00:05:31,520 --> 00:05:35,730 would be to create a custom image view by subclassing the existing one. 76 00:05:35,840 --> 00:05:40,280 And if you search on line you can find examples of how to do that, but you'd have to ask at this point 77 00:05:40,280 --> 00:05:45,470 if it's really worth it. Now in some cases it will be. If you have a layout where the image ends up 78 00:05:45,470 --> 00:05:50,150 so small that it's no longer usable, for example, then you would have actually have to find a solution. 79 00:05:50,450 --> 00:05:57,290 But here though, the app works on API 17 so there's no real point restricting it to API 18 and above, and 80 00:05:57,290 --> 00:05:59,320 losing users unnecessarily. 81 00:05:59,450 --> 00:06:04,730 Now of course it doesn't look quite the same on this device, but I'd say it's still perfectly usable, and 82 00:06:04,730 --> 00:06:10,250 sometimes your time's much better spent finishing the app, rather than trying to make it look identical on 83 00:06:10,250 --> 00:06:11,300 all devices 84 00:06:11,300 --> 00:06:16,250 for all the Android versions you support. Now there's a couple of other points to make about this. 85 00:06:16,280 --> 00:06:20,050 The first one is, should we be displaying anything other than the image here. 86 00:06:20,270 --> 00:06:24,550 So if the user's long tapped a thumbnail, they probably want to view the photograph. 87 00:06:24,590 --> 00:06:29,450 Now I've added things like the author and title to the layout, to show you how to create more complex layouts. 88 00:06:29,840 --> 00:06:34,190 In this particular application though, we may well be better off just displaying the image with nothing 89 00:06:34,190 --> 00:06:35,010 else. 90 00:06:35,180 --> 00:06:39,920 So you could allow a tap on the image to pop-up other details maybe, but they probably shouldn't be 91 00:06:39,920 --> 00:06:41,340 appearing on this screen. 92 00:06:41,690 --> 00:06:43,130 So when designing things like this, 93 00:06:43,130 --> 00:06:49,490 think carefully about what the users want and what they'll expect when they perform certain actions. 94 00:06:49,490 --> 00:06:55,370 Now the second point here is though, be careful when creating emulators. Now I've managed to simulate a problem 95 00:06:55,370 --> 00:06:59,900 here by creating a Nexus 5X emulator running API 17. 96 00:06:59,910 --> 00:07:05,600 Now the Nexus 5X is a more recent version of the Nexus 5 which was released originally with Kit-Kat 97 00:07:05,630 --> 00:07:06,920 API 19. 98 00:07:06,960 --> 00:07:10,190 So the Nexus 5X was even a later version than that. 99 00:07:10,190 --> 00:07:14,960 So in other words, Jelly Bean wasn't installed on devices with the high resolution screen of something 100 00:07:14,960 --> 00:07:18,850 like a Nexus 5. So bear that in mind, if you get strange behavior, 101 00:07:19,070 --> 00:07:24,970 ask yourself if you're testing on a combination of a device on API that just wouldn't exist out there. 102 00:07:24,980 --> 00:07:29,300 In other words, when the user bought a particular phone they would never have actually been running 103 00:07:29,300 --> 00:07:30,090 that version, 104 00:07:30,140 --> 00:07:34,110 that particular version of the API, in this case API 17. 105 00:07:34,220 --> 00:07:39,700 Now the Nexus 4 was released with API 17, and adjustViewBounds will work OK on that. 106 00:07:39,980 --> 00:07:46,010 So the effect is slightly different to the API 21 and API 26 devices, but the image does appear 107 00:07:46,010 --> 00:07:47,400 larger. 108 00:07:47,640 --> 00:07:52,910 Alright so I'm going to finish the video here. But your challenge is to experiment with the various margin and 109 00:07:52,910 --> 00:07:57,500 padding settings for the widgets to make sure you understand the difference between margins and paddings, 110 00:07:57,860 --> 00:08:03,410 and also which widgets you should change when they're nested inside each other, like ours are in this 111 00:08:03,410 --> 00:08:04,680 particular screen. 112 00:08:04,760 --> 00:08:10,370 Now try to do things like increasing the border around the photo, so the CardView acts like a bit more 113 00:08:10,370 --> 00:08:14,900 of a picture frame, and also try to put more space all the way around CardView. 114 00:08:14,990 --> 00:08:20,930 Now you may also want to change the layout so that there's just an ImageView inside a CardView. The 115 00:08:20,930 --> 00:08:25,920 image would fill the screen and therefore wouldn't need to be scrollable. Now you could show a Toast message 116 00:08:25,930 --> 00:08:27,250 if the user taps the photo, 117 00:08:27,490 --> 00:08:33,169 so that they can see the author and title, without returning to the main screen. Bottom line experiment, and have 118 00:08:33,169 --> 00:08:38,929 fun, because that's ultimately the best way to learn, and this layout is a good layout for experimenting 119 00:08:38,929 --> 00:08:45,260 with. Before you start though, either copy the content_photo_details.xml file, or just paste 120 00:08:45,260 --> 00:08:49,870 the xml into a text editor, so that you can put things back if you really mess up. 121 00:08:49,910 --> 00:08:53,660 And of course if you don't really mess it up then you haven't experimented enough. 122 00:08:53,710 --> 00:08:56,870 Alright, so that's it. I'll finish the video here and I'll see you in the next one.