Alright,
so our recycler view's going to display a thumbnail of the photo with a title next to it.
Now if you remember, when we used the list view in the top 10
downloader app, we had to provide a basic layout to display the data in.
Now that layout contained three text few widgets to show the app name, the artist and a summary.
Now whenever the list view requested new data, we put the values into those three text views, and sent
the entire view back to the list view to display.
Now our recycler view works in a similar way.
We need a basic layout that'll contain, in this case, an image view for the thumbnail, and a text view
for the title.
So what I'm going to do is create a new layout. So I'm going to right click on the res layout folder and select
New, Layout resource file.
Now this is for the initial browsing of the photos.
So I'm going to call this one browse.
I'm going to change the root element to be a linear layout,
so I'm just going to type that,
linear, so it selects, so it comes up with LinearLayout, double click that to select it.
Now a LinearLayout's a very useful layout to use for something simple like this.
So if we click OK at this point, leaving everything else as the default, we can have a look at how to use a
linear layout, and how it is different to a constraint layout.
Now firstly a linear layout doesn't give you much in the way of arranging the widgets it contains.
It just really lets you place them alongside each other,
if it's a horizontal linear layout, or one above the other when it's set to vertical.
Now we want
our image view and text view next to each other,
so the first step is to select the layout, so we're going to select over here in the component tree. Then we're going to set the orientation,
going back to our standard set of attributes, and it's making sure that that's now set to horizontal. Now
I'm going to drag the two widgets onto it before I set any more attributes, so that we get a visual indication as things
change.
So first we need an image view,
but before we can do that we need an image to display in it.
Now when the app's running it'll be displaying our photos,
but until then it needs a placeholder image to show, until it has the proper photo.
So what I'm going to do is download an icon that'll serve as a placeholder image, and Google
have a lot of really decent icons available at this address, so I'm going to bring that website up
in a browser.
We can download it from there.
You can see the link there is design dot Google dot com slash icons.
This is actually a great resource if you need icons, and the good thing is that Google have designed them all
to work well with material design.
So when scrolling down, about halfway down, we've got these major characters here, content, file, hardware.
Come down here to image.
This is the one that we actually want.
And there's also within there, there's actually an icon that's also called image, in the image section,
see over here, image.
Now it's only an icon,
not a full size image.
So we're going to grab the largest size available.
Now you choose the size by selecting an image. I'm going to click on image, then down the bottom,
we come down here and we select the size we want, and what I'm going to do is select 48
dp, the largest possible from the dropdown list.
We want to download it as a png file.
So what I'm going to do is come over here and click on the download button for pngs or ping files, and
you can see that's brought that up on the screen there, and I'm going to just save that to my desk top.
So it is basically a zip file that we've downloaded,
and that's because it contains the icons and all the resolutions you need for an Android app, and even
contains an IOS and web version as well.
But at this point though I'm going to do something slightly strange.
I'm going to go ahead
and open the zip file.
In my case I'm just going to navigate to the file to show it in finder, and I'm going to double click it on my Mac to unzip it, and you can see it's created
this sub file so I'm going to double click it to get into that folder.
And there's the three directories I was telling you about, and then double click into the Android
folder. You can see that inside this, all these drawable directories at the various resolutions, and we can
actually open them up,
and you can see the files
in each one of those. Now because we're using a small icon as an image, it's going to be scaled up when
Android displays it
in our app. Now normally we'd place each of these icon files in the appropriate MIP map directory
in your project, so that the icons appear at the correct resolution on high density devices etcetera.
But here though, we're using a small icon in place of an image,
so it's going to be scaled up anyway.
Now I wouldn't advocate doing this for most things, but in this case it's only a placeholder.
And what's more it's only going to be visible when the image is loading, or if no matching photos are found,
so what we're doing here should be fine, but bear in mind that this is not the way to handle icons
that you're going to use in your app as icons.
In that case what you want to do is copy each of the drawables that Google provides, into the resources
directory of the same name, so that you get the correct resolution for each type of device.
But what I'm going to do is extract the highest resolution icon, in this case it'll be from the drawable
dash x x x hdpi,
so that's the file there. I'm going to copy that, right click and select copy, and then I'm going to go back into
Android Studio.
I'm going to paste that into the drawable file, this one here,
right click that and select paste. Now by the way Android Studio doesn't support copy and paste from a
zip file,
even if it does appear to be a folder in your systems file browser.
So if you're doing that on Windows, you have to extract the file first and then copy the extracted file, and
paste it into the drawable folder in Android Studio. And in this case what I'm going to do is just not use Android Studio's
suggestion to create a drawable v
24 folder. I'm just going to paste it into the root drawable file, I've made one there, and click on OK.
And you can see our image now,
ic underscore image underscore black 48dp is now in that drawable subfolder.
And what I probably should have done before OKing that was actually rename it to placeholder dot
png because it's a better name for what we're going to be using it for.
But that's OK because I can do that now, right clicking it and do a Refactor,
Rename, and again we'll call it placeholder,
because it makes more sense to understand what this file is all about.
Alright so
now that we've done that, if we close down the project pane to give us a bit more space,
and what I want to do is open up our new browse dot XML. You can see that's open up on the screen for us
now. At the moment you can see it's got the linear layout over here.
So what we'll do now is drag an image view on screen. Click on images over here or we can click on
and drag an image view. So I'm just going to drag it in there for now. It doesn't really matter where you drag it, but once I do that
you can see that Android Studio's asking for an image to display, and that's why we wanted to make sure that
we had a placeholder image available.
So I'm going to choose the placeholder images that we've downloaded and added to our project.
I'm going to click on OK.
So you can play at the scale type when the apps running, but for now I'm going to set that to fit start,
and you can see that's still a little bit too big at the moment, so I'm going to set the layout width. I'm going to change that,
instead of wrap content I'm going to change that to 80dp.
And I'm also going to set the layout height to wrap content which it already is there.
At the moment the icon, the image view rather, appears to fill the entire width of the layout as you can see,
especially over here in the blue print view.
So what we're going to do is drag a text view widget to the right of the image view,
but don't worry about trying to make space for it because the layout's going to take care of that for us.
So I'm going to come back to text, and I'm going to drag in a text view into the right and release, and you can see
how space was automatically added for that,
again that's got to do with the fact that we're using a linear layout. I'm just going to undo that again,
and I just wanted to point out that when you do come over here, notice how we've got this green indication
of where the text view's going to go.
So in other words the green highlighting's showing which side it's going to go to. And that's all you can really
do with a linear layout as far as positioning's concerned. You can put things next to each other, or above
and below each other if the layout orientation's vertical, but of course our orientation's set to
horizontal.
That's basically it, so I'm going to drop it to the right of the image view,
and you can see that the image view resizes to make room for it. Now we can space the widgets out,
and there's a couple of ways to do that.
First though, I think we should give these widgets ID's because we're going to need to refer to them
in our code. So the image view, I'm going to click on that first, and we'll use the name thumbnail for that,
thumbnail.
Now the ID, the text for the ID rather, for the text view, we'll go with title for that.
Now the most straightforward way to space these views out, is just to set margins. So we can actually expand the
properties pane,
and we can give text view a left margin. Let's expand so we can see some of these a little bit better, Layout
underscore margin and click on left, select left, and we can give it a left margin of 16 dp, and you can see that
a margin has now appeared in between our image view and our text view. And we want to remember to also set the start
attribute as well,
to the same, and we talked about the reasons for that in previous videos, 16 dp.
And again as a refresher, we're targeting API 17 which introduced support for left to right languages
which means you really only need a start attribute,
but we're doing both anyway.
Now if you want your app to run on devices before API 17, you should set the layout underscore margin
start whenever you set layout underscore margin left.
And similarly, always set layout underscore margin end to the same value as layout underscore margin
right. Versions of Android that don't support right to left languages,
will just use the left to right values. Later versions will use start end, and apply them to left or right
as appropriate for the writing direction.
Now I'm not going to set the left margin of the image view and right margin of the text view.
Actually you can see though,
they are too close to the edges, but also to the top as well.
But to fix that problem we're going to be using padding inside the layout instead.
So I want to come over here and select the layout, the linear layout in the component tree, and we want to come over here
and expand padding under the extended attributes. Now you can set the padding on each one individually.
bottom end left right start and top, but the first option all will set the padding for all sides at once.
So I'm going to come over here and click into all, and make that 8 dp, and you can see when I've done that, it's all moved
nicely, both the top left and right have all got now space around those widgets, which is exactly what we
wanted to happen.
Now margins and padding are very similar,
but think of a margin as setting space around a widget, and padding setting space inside it. I'm going to
be talking about this again
when the app's running, because then we can experiment with some of the attributes and see their effects
in the app.
But notice that the two widgets have moved in and down, and that's because the padding inside the layout, forces
them away from the edges.
Now the text view's height and width both need to be set to wrap content, so lets select the title, the
text view title there, and go back to our normal attributes, and you can see that they're both set currently correctly,
to wrap content,
and we're setting it to wrap content so that it can grow to cope with longer titles.
So we've managed a bit of positioning by using margins and paddings, but it's a bit basic. We've also
got our image view set to a fixed width.
Now there is something else we can do, and that's to use what's known as weight.
Now if you give the layout a weight, you can divide that number amongst the widgets so that they occupy
a proportion of the available space.
So as an example, let's make the image view occupy the left third of the screen, and the text view
the remaining two thirds.
So I'm going to start by selecting the layout, and we come over here,
and go into our extended properties again, and we're looking for an attribute called weight sum. Now it should
be right towards, or at the bottom. I'm going to scroll right down to the bottom there.
There's weightSum, literally the last attribute.
So what I'm going to do is enter a value of three there.
And incidentally I noticed that there's some inconsistency between Android Studio Windows and Linux. So
whenever you're setting an attribute,
always check the section at the top first.
This is the section I'm talking about, as right up here, otherwise you can waste time trying to find the
attribute you want.
On Linux it was at the bottom of the list, but on Android it was in the top section, and you can see here on
a Mac weightSum was right down the bottom. Right so now that I've entered a value of weightSum for the layout,
we can now use the layout underscore weight property for the image view.
So I'm going to use the, select the image view, and the layout underscore weight, and there's layout underscore weight. You can
see it's currently set to 1 which is the default, so
I'm going to leave that on 1, but we're also going to change the text view's
layout underscore weight to 2, and see that's currently set to 1, we're going to change that to 2.
And then what we want to do now is change the layout underscore width for both widgets is to zero dp.
So I'm going to go back to our normal attributes, and
we've currently got the text selected, so I'm going to change the layout width to zero dp.
We're going to do the same over here for the image view, the width to zero dp. You can see that once I've done
that, they now fit nicely in their third or two thirds of the screen, and that'll happen even if I change
the orientation to landscape. You can see they're still quite nicely using that appropriate area that we've
defined. Now back to portrait.
So now that we've got our calculated width for the image, we can change the image to views layout underscore
height to match parent.
So again I've got the image we selected,
layout underscore height, we're going to change that to match parent.
Right so let's finish this video here. In the next one we've got a few other things to talk about
for this layout, and we're going to start by talking in the next video about adjusted view bounds.
So see you in the next video.