Alright, so let's experiment with the image now. I want to show you a potential problem you can get with certain
image sizes in our app.
Now to do that, without having to hunt through all the images in hopes that there's one of the right size, I've
actually modified the code slightly. So I've hardcoded an image URL, so that photo details activity always displays
my image rather than the one downloaded from Flickr.
So what we're going to do is run the app on all three emulators again, and as I've said I've hardcoded
the URL so that I always get the same image. The thumbnails are all different, but they'll all display this
bamboo forest image when I long tap them.
So I'm going to just run the app first on all three emulators, and you can see what I mean.
Give them all a moment to start.
So we've got our API 17, emulator API 21 and API 26,
I'll just open that.
OK and if I long tap, you can see can we've got that bamboo image.
The next one, and then API 26, just to confirm that is the case
I'm going to do another image,
select another thumbnail rather, and you can see we've got the same image.
So again the thumbnail's are all different but they all display this bamboo forest image
when I long tap them. And as you can see here, all three emulators look very similar with the image fitting nicely
in the center of the screen.
Now let's experiment with that
adjustViewBounds attribute that I mentioned a few videos ago.
So if we go back to Android Studio, I'm going to open up the content photo underscore details in the layouts
folder,
and I'm just going to close down the project pane for now and make a bit more space.
Then when I select the image view, which we can do either here from the component tree, or from the designer
or blueprint, and that's going to load up the attributes, and this adjustViewBounds is what we want to have a
look at.
Now it should appear here in the common attributes, but if Google have moved it when you come to watch
this video, you may need to come over here and expand the attributes to find it.
So at the moment, adjustViewBounds is to set to the default. The tri state button has a dash through it. Now
the default is off,
or false.
So let's see what happens when we turn this on to see what effect it has on our image.
So when I click it, you want to make sure that this is now a tick for the adjustViewBounds attribute.
Once you've done that run the app again. So let's go ahead and do that,
run it on all three emulators.
OK and let's just try opening them now.
Now as you can see, it looks OK on API 21 and API 26.
The image is as wide as possible, and I can scroll down to see the description and tags, or at least I
can if I do. I'm scrolling down to get the tags, you can see I can read those,
and same for API 26.
I can scroll down if I need to.
So everything seems to fit nicely.
Now that's why we used a scroll view by the way, so that we can do that.
Some images will extend off the bottom of the screen, and you have to scroll to see the lower portion,
and you can see that I needed to scroll just a little bit to see some of the tags.
OK, that's the difference that adjustViewBounds has made on API versions above 17, but on that API 17 devices,
it's made no difference.
So that's what adjustVBiewBounds does.
It causes the image view to fit the image to itself, then it recalculates and expands to fit the image if
necessary.
So you get the best fit possible in the available space, whilst preserving the aspect ratio of the image,
so that it doesn't stretch it in other words.
So what about that note that we looked at before?
Let's just go back to Google again,
on ImageView.
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,
down here for setAdjustViewBounds. So if the application targets API Level 17 or lower, adjustViewBounds
will allow the drawable to shrink the view bounds, but not grow to fill available measured space in all instances.
So in other words, it's not saying that it won't work on API 17 or lower,
it's saying that the image view won't always grow to fill the available space in all cases.
Now on the API levels above API 17 you saw that it did work. On my Nexus
emulator running API 17,
we hit one of those cases.
So going back to Android Studio,
well actually we'll go back to our emulator.
So I'll just minimize Chrome for now, so that we can get access to emulators again.
So again, on API levels above API 17 it did work, but on the Nexus 5X, running on API 17 we hit one of
those cases.
We still get the thick border, as you can see around here, and adjustViewBounds hasn't actually made
any difference.
So adjustViewBounds gave a good effect on API 21 and above, actually on API 18 and above, but
may not work on all devices running API 17 or below.
Now you could spend a lot of time trying to get the same effect on this API 17 Nexus 5X. One solution
would be to create a custom image view by subclassing the existing one.
And if you search on line you can find examples of how to do that, but you'd have to ask at this point
if it's really worth it. Now in some cases it will be. If you have a layout where the image ends up
so small that it's no longer usable, for example, then you would have actually have to find a solution.
But here though, the app works on API 17 so there's no real point restricting it to API 18 and above, and
losing users unnecessarily.
Now of course it doesn't look quite the same on this device, but I'd say it's still perfectly usable, and
sometimes your time's much better spent finishing the app, rather than trying to make it look identical on
all devices
for all the Android versions you support. Now there's a couple of other points to make about this.
The first one is, should we be displaying anything other than the image here.
So if the user's long tapped a thumbnail, they probably want to view the photograph.
Now I've added things like the author and title to the layout, to show you how to create more complex layouts.
In this particular application though, we may well be better off just displaying the image with nothing
else.
So you could allow a tap on the image to pop-up other details maybe, but they probably shouldn't be
appearing on this screen.
So when designing things like this,
think carefully about what the users want and what they'll expect when they perform certain actions.
Now the second point here is though, be careful when creating emulators. Now I've managed to simulate a problem
here by creating a Nexus 5X emulator running API 17.
Now the Nexus 5X is a more recent version of the Nexus 5 which was released originally with Kit-Kat
API 19.
So the Nexus 5X was even a later version than that.
So in other words, Jelly Bean wasn't installed on devices with the high resolution screen of something
like a Nexus 5. So bear that in mind, if you get strange behavior,
ask yourself if you're testing on a combination of a device on API that just wouldn't exist out there.
In other words, when the user bought a particular phone they would never have actually been running
that version,
that particular version of the API, in this case API 17.
Now the Nexus 4 was released with API 17, and adjustViewBounds will work OK on that.
So the effect is slightly different to the API 21 and API 26 devices, but the image does appear
larger.
Alright so I'm going to finish the video here. But your challenge is to experiment with the various margin and
padding settings for the widgets to make sure you understand the difference between margins and paddings,
and also which widgets you should change when they're nested inside each other, like ours are in this
particular screen.
Now try to do things like increasing the border around the photo, so the CardView acts like a bit more
of a picture frame, and also try to put more space all the way around CardView.
Now you may also want to change the layout so that there's just an ImageView inside a CardView. The
image would fill the screen and therefore wouldn't need to be scrollable. Now you could show a Toast message
if the user taps the photo,
so that they can see the author and title, without returning to the main screen. Bottom line experiment, and have
fun, because that's ultimately the best way to learn, and this layout is a good layout for experimenting
with. Before you start though, either copy the content_photo_details.xml file, or just paste
the xml into a text editor, so that you can put things back if you really mess up.
And of course if you don't really mess it up then you haven't experimented enough.
Alright, so that's it. I'll finish the video here and I'll see you in the next one.