Now you may have noticed that we had some warnings about hardcoded strings when we created the browse and
content underscore photo underscore details layouts.
So let's actually have a look at the one in browse.xml.
So I'm going to open up browse.xml in the res layout folder.
Now at the top right of the designer pane is a little exclamation mark, now over here.
Now that's normally grey, but it turns orange or red
whenever there are errors or warnings, and if I hover over it you can see that it's changing to orange. And you can
click on it in either case to find out what they are.
So let's do that, and I'm just going to make a bit more space here to read it. Now we're interested in the one complaining
about hardcoded text down the bottom there,
and you can get more details by expanding the heading, using the triangle on it's left. And you can see there
that it actually talks about the Hardcoded string "TextView" should use the @string resource.
Now we don't display the text TextView, so we can ignore this one.
The correct text is provided by the title of the photo
when this layout's used, but what it does mean though, is that text shouldn't really be hardcoded into layouts or into
code for that matter.
And there are a couple reasons for this.
The main one is that it makes it very hard to translate the app into different languages, but by using
string resources, all the text for the app is in one place,
and Android can use a different resource file for different languages.
And what's better is that Android will do this automatically if you've provided a string resource for
the user's language.
I think that's pretty cool.
Now you still do have to do the translation, and also create the alternative resource files, but that's a
lot easier than modifying all the text in the app, and then distributing different language versions
of your app.
So in this video, we're going to go through and move all our text into a string resource so that you
can see how it's done.
So what we're going to do is close off this little triangle, and we're going to start with this top one, which
is complaining that there's no content description image,
there's no content description property for the image - Missing contentDescription attribute
on image.
Now the contentDescription is used by people who can't see the screen, and you use screen reading software
to read out what's appearing on the screen while the app's running.
It's a pretty cool feature that allows partially sighted people to use computers and mobile devices. Now
Android Studio is encouraging us here to provide a description of the image, so the screen reader
can read out the description.
So let's go ahead and provide some text for the contentDescription,
and at the same time, see how to store text in a string resource instead of hardcoding it.
So select the ImageView, which should be selected if you've clicked over here,
but I'm going to do that anyway.
And you can see over here to the right, contentDescription, well that property's currently one of
the ones that appears without expanding the properties pane.
Now the description I'm going to use is downloaded Flickr photos, but instead of typing it as text in
the property, I'm going to come over here and to the right of it, and click on the ellipses to get the
resources dialogue.
Now we haven't already stored this text anywhere, so I'm going to click on the Add new resource over here.
I'm going to choose New string value. Now at this point we have to specify the text we want,
which is the resource value, and we also have to provide a resource name to allow Android to find the
string.
So we'll use browse_image_description for the resource name, and
for the value, we're going to use Downloaded Flickr photo.
Now the file name's automatically selected. You can see here, down here, under File name, it's using strings dot
xml in the values folder.
So that's correct.
At this point we now need to just click on OK. Now the contentDescription over here is now set
to @string slash browse image, and you can't quite see the rest but it's actually browsse image description, which you'll
recognize as the normal way of referring to a resource, rather, a string resource in this case. So @string
slash and then the name.
And now that we've actually done that, and saved that in the contentDescription attribute, we should
now be able to see the text stored as a resource in the strings.xml file, and that's over here in the
res and values folder. So I'm going to open that up, the values, and double click strings.xml, and you can see down the bottom
now, string name equals browse_image_description, and our downloaded Flickr photo
value.
Now we also got the app name and the titles of our activities stored in here as well,
and the wizard did that automatically when we created the activities. And remember that we changed the
default title for the photo details activity,
and there's the change line there, Photo Details. So placing text into string resources, rather than hard
coding isn't a lot of extra work.
It makes translating the app much easier. But the second reason for doing this is, it also allows text
to be reused and that can make things more consistent across activities,
when you refer to the same thing more than once. And it also saves memory because the same string
doesn't have to be stored repeatedly.
Alright so I'm going to close down strings.xml for now.
Now we're not really bothered about that TextView text in browse.xml, so let's actually clear
that warning.
Now the obvious way to do that would be to create a string resource for the text, but we really don't
want to use the string text view anymore.
The only reason we've left it in this case, is so we can see where the TestView widget is on the
design.
Now to show you what I mean, I'm firstly going to make a bit more space here by closing down the project pane.
I'm going to click on the TestView,
and again, we're currently using the text there just so we can see where the TextView is on screen.
So if I come over here to text, and actually delete that and then press enter to accept the change, and then
click now somewhere else on the design to unselect the TestView. You can see that's a little bit
hard to try and figure out where the TestView is,
for example there. You can still see it in the blueprint, but in the design it's pretty hard to see.
So having text in the app just so we can see where the widget it isn't ideal,
and fortunately Android Studio provides another solution.
So I want to go back and select the TextView title in the component tree. There's two text properties for
it.
You can see over here to the right, there's text, and the second one's got a spanner or wrench next to it.
So text, text and this little wrench as you can see here. Now that property uses the tool's name space
and won't be compiled into the app. Any property actually that uses the tool's namespace, is just for use
by the Android Studio tools, such as this layout designer.
So we can put some text in there and it'll show up in the designer, but won't be included in the finished
app.
So if I come over here to this second text, the one with the wrench, and type in Empty TextView
and press enter, and you can see over here now that that becomes visible on
the design. Now that tools text property won't be part of our compiled app again, but it's a useful
way to check how things will look, without risking having some sample text in the finished app. So basically
we can now see that TextView a bit more clearly in the design,
and also we no longer have a warning down here about string resources.
So we're going to leave this particular warning there for now.
We're going to get back and have a look in our content_photo_details.
Well actually I've got this open up here anyway so I'm going to click on that, but open that one, and come over here
and have a look.
We've got some warnings as well.
There's basically warnings there as you can see, Hardcoded text for all three TestView widgets.
Now we're not actually worried about them either, because that text should never appear on the screen, but we
can clear the warnings by putting the text into the tools properly as we've just seen.
And there's also a quick way to do that. So we can select all the text in the text property by clicking
in the box. So if I open one,
say the first one, and I'm going to do the same thing but just do it a little bit quicker. So basically by clicking on
the box, that selects it as you can see there,
and holding the mouse button down I should be able to drag that into the second box, like so,
and release it, and you can see it's automatically moved that for us.
Now that should have moved the TextView text but I've found it necessary to click back into the text property
again, into the normal one, to prevent Android Studio from putting the text back in there.
It may or may not be doing the same thing when you come to test this on your current version of Android
Studio, but by clicking in there at the moment while it's blank,
that seems to get Android Studio to record the fact that the text has been deleted.
So for each of the TestViews, you want to drag the text from the text property down to the tools text property, again the one
with the spanner as I've done here,
and click back into text to make sure it stays blank. Then I'm going to do the next one now,
photo title, drag it, and I'm going to click back in there to make sure the change has been reflected.
And the third one, the tags, click, drag release, click back into the original one again. OK and just
click somewhere else, then that warning disappears. So that's reduced the number of errors.
and again, if this wasn't open you could
click over here to reopen and see what those errors are, but I've still got that screen open down here, down the
bottom.
And there's a warning about the missing content description on the ImageView as well,
so if we use the same string resource that we created for the content description this time.
So we can click on the image, we just select it, then we can come over here to the ellipses, to the right of our
content description.
And we can come down here and choose the browse image description this time from the list of resources, and
click OK.
And you can see we've no longer got any errors showing up there now,
and we're now using the same string resource to browse image description for both layouts.
Now this may not be a great idea from an accessibility point of view, but in this app most of the information
about the pictures come from the title and tags fields.
So there's not really a lot more we can say about the image itself. Obviously
though in other apps, you should give a bit of thought into what description you want to provide to people who
can't actually see the image.
So that's how you go about creating string resource values and how to use them.
They are actually a bit more powerful than that though, and
we're going to look at that in more detail in the next video.