Resources and Media and Dealies

Transcription

1 Resources and Media and Dealies In the second week, we created a new project that came with several files. The layout was kept in a res/layout folder. last week, we looked at a landscape layout, in the res/layout-land folder. Of course, the res/ folder is where we keep resources, but resources are comprised of far more than simply layouts. This week, we'll be mostly looking at different sorts of resources we can include, and how they're managed and used. Let's start simple, shall we? Reviewing the Folders First, let's take a look at our manifest file. There are a few things we glossed over before, that are now interesting: When specifying the app's icon, it makes reference The application itself has a label The app's theme is That's a familiar convention, isn't Similar when the system was managing id's for us. In this case, they're just additional resources that can be indexed, retrieved, and even accessed via code if necessary. mipmap Let's look at the mipmap first, since we've already glanced at this one. Note that, thanks to the different folders, we can actually have multiple versions of a resource, to accommodate, for example, different pixel densities. We'll be coming back to this one, so we're good for now. values Let's look at the project's folder, and take a look in the values folder of the resources. Inside, we'll see three initial XML files (we can add more later): colors.xml strings.xml styles.xml The names make their functions easy to guess, but let's still open them up and see how they work. It's worth remembering that we don't have to use these, but it's a good idea.

2 Additional Folders We aren't using any of them currently, but there are a few more folders worth noting. res/raw This one's typically used for files that you wish to be able to access as resources, but don't want managed in the traditional way. Examples include audio files, and images that absolutely can't be rescaled/compressed/etc. res/menu Action menus, context menus, etc. Typically, we define these via XML, and this is a useful place for them. res/xml If, for some reason, you need to include additional xml files, cram'em here. res/libs Have some additional libraries? Stick'em here! We can also define specialized versions of most of our folders. e.g. drawable-xhdpi, values-v11, etc. Let's get to customizing our content, shall we? values Resources strings.xml Let's edit our strings first. The default application name is fine, but let's handle our 'Hello World' more appropriately: <string name= hello_world >Hello World!</string> Great! And... how do we use it? Go back to the layout file, and look at the android:text attribute. The convention is the same for strings as it is for We might need some dummy data for later, so I'll also add: <string name= str_name >Dealies Unlimited</string> <string name= str_address >Canadia</string> <string name= str_message ><b>howdy!</b></string> If you try copying&pasting, remember to watch out for the quotation marks.

3 As mentioned earlier, we can access these resources via code, so it's easy to predict what this does, right? Toast.makeText(this,"Hello "+R.string.str_name+"!",Toast.LENGTH_SHORT).show(); Of course! So easy, in fact, that we don't even need to bother testing. But, for thoroughness, let's test anyway (done testing?) (great. now stop throwing things at me. this actually does make sense!) The fix is easy: just use the getstring function. dimens.xml Remember how, the other week, I mentioned in passing that you probably should explicitly hardcode things like padding and margins? That's because things like that are related to either styles or dimensions. Either way, they're about presentation, so they should be established elsewhere. We don't have a dimens.xml by default, but we can easily create it. Let's actually use Android Studio to create it, k? Then, let's give it some contents: <resources> <dimen name="small_size">15dp</dimen> <dimen name="medium_size">15sp</dimen> <dimen name="large_size">20pt</dimen> </resources> Hmmm... something seems fishy there... Let's try adding some text fields to our activity, so we can take a look. <LinearLayout xmlns:android=" android:orientation="vertical" > <TextView android:id="@+id/name_view" android:text="@string/str_name" android:textsize="@dimen/small_size" <TextView android:id="@+id/address_view" android:textsize="@dimen/medium_size" <!-- We'll set this address programmatically -->

4 <TextView </LinearLayout> Note that the comment promises to set one of the text fields programmatically, so that's easy: ((TextView)findViewById(R.id.address_view)).setText(getString(R.string.str_address)); Let's see what we have so far... By the way, 1pt should be 1/72 nd of an inch, but I wouldn't necessarily rely on that too heavily. The difference between dip and sp may or may not be visible, depending on other settings. Also, note that settextsize is a programmatic option, if desired (but I wouldn't advise it). If you do want to do it, use getresources().getdimension instead of getstring. color.xml This one is pretty easy, since we've already played with colour a little bit. Note that there are a few different ways to specify hexadecimal colours: #RGB, #RRGGBB, #ARGB, and #AARRGGBB, for example. We can either define some new colours, or we can redefine the existing ones (used by the theme). Or both! We have things like getresources.getcolor, settextcolor, etc., to play with. styles.xml If you take a look at the default theme for the application, you'll notice that it's pretty sparse. This is largely because one theme may extend another. In this case, our AppTheme is just an existing theme, but with three colours overridden. If desired, we could create another theme, but we can also create individual styles for specific types of elements: <style name="style1"> <item name="android:textcolor">#00ff00</item> <item name="android:typeface">serif</item> <item name="android:textsize">30sp</item> </style> <style name="style2" parent="style1"> <!--Inherits from style1--> <item name="android:textcolor">#0000ff</item> <item name="android:typeface">sans</item> <item name="android:background">#ff0000</item> <item name="android:padding">10dip</item> </style> <!--Overrides colour and typeface, but inherits text size--> <style name="style3" parent="style2"> <item name="android:textcolor">#00ff00</item> <item name="android:background"># </item> <item name="android:typeface">monospace</item> <item name="android:gravity">center</item> </style>

5 We should ensure that we roughly understand this before we try using it. Let's add the three styles to our TextViews. Note that we just define style, not android:style. Let's run it to ensure that we're good to continue. Of course, if we'd wanted to, we could have changed the android:theme in the manifest, but be careful with this (particularly if you're only specifying a couple values within a style. Before we continue... Let's add a button, and have it start up the next Activity (say, Pebbles). Arrays Just as with any other example of development, sometimes you want to associate a single name with a single value, but other times you want a single name to match up with a collection of values. Android does afford us a simple form of arrays. We could keep them in an arrays.xml. On the other hand, since our initial arrays will be of strings, I'm going to put them into strings.xml. Let's add the following: <string-array name="fruits"> <item>apple</item> <item>mango</item> <item>orange</item> <item>purple</item> <item>banana</item> </string-array> Our layout will start out as: <LinearLayout xmlns:android=" android:orientation="vertical" > <TextView android:id="@+id/fruits_view" </LinearLayout> Clearly, we need to add some content. Let's take a look at the activity's java code: TextView fruitses=(textview)findviewbyid(r.id.fruits_view); String[] fruitsarr=getresources().getstringarray(r.array.fruits); String str=""; for (String s:fruitsarr) str+=s+"\n"; fruitses.settext(str);

6 Well, if we run it, it works. And we can easily see what's going on. Still, it should be readily apparent that this is poor form. When it's running, it's easy to understand. But our preview in Android Studio? Less than helpful. Sometimes (oftentimes) that can be unavoidable. But this is not one of those times. We'll be looking at a better alternative next week-ish. Variation: integer-array If we wanted, we could also define an integer array. There's little to gain by actually adding this, but let's just cover the important points: I'd probably create a new XML file: arrays.xml and then create an integer-array entry. Everything else would be essentially the same. Before the next step Once again, let's create a new Activity (say, Picturesque), and a button to start it. Drawables Drawables are an interesting thing, largely because they're actually several things. In general, a Drawable is something that can be drawn. This means you shouldn't count on things like event handling, etc. However, how it's drawn can vary quite a bit. For example: Bitmaps Nine Patches Vectors and various compound drawables Before we get any further, a note on the res/drawable vs res/mipmap folders: These aren't the same thing, even though they might seem like it. Both can have multiple variants for matching up with different resolutions, but the mechanism is different: The res/drawable folder contains images you might wish to use The variation (e.g. res/drawable-hdpi vs res/drawable-tvdpi) is depending on the screen's pixel density The res/mipmap folder also contains images, but typically just the launcher icons The variation (e.g. res/drawable-hdpi vs res/drawable-tvdpi) is simply based on what the system happens to want to take for a task. e.g. maybe it wants to use a different size app icon for the home screen, vs the app tray And, as mentioned earlier, the raw folder can also hold resources you don't want it to fiddle with. Let's try displaying a simple image.

7 ImageView This isn't likely to be terribly shocking: an ImageView is a View for displaying an Image. Find some image you'd like to use. I'll use one of the moon from NASA (in this example, called nasa_moon.jpg). I'd suggest using only lowercase letters, with no spaces. It'll have an image extension, but we won't be caring about that. Try putting it into the drawable folder. Now, let's edit our Picturesque layout file: <LinearLayout xmlns:android=" android:orientation="vertical" > <ImageView android:id="@+id/imageview" android:src="@drawable/nasa_moon" </LinearLayout> Try running it to see how it looks. Lastly, as a final fun thought, suppose we added an onclick even to the view (remember: even if Drawables don't have events, the view containing it still can), and had the following corresponding code: public void flippy(view v) { ImageView iv=(imageview)v; iv.setimageresource(r.drawable.noom_asan); } What would we expect? If we're curious We can have different versions of the same image. Just as with the layout vs layout-land, we can have different resolutions of the same images. As mentioned earlier, it's primarily to match pixel densities. So, for example, the default emulator we've been using will probably match up with drawable-xhdpi, but if we also have drawable-xxxhdpi, that'll match up with a higher-resolution * phone. * Well, no, but you know what I mean. Just for ha-ha's, you might want to test this out a bit (easy way just to see what I mean is to create additional folders, and put in slightly different-coloured versions, or just another picture altogether). Note that, if you want to do this, you don't have to specify complete sets of all resources. Android will always try for the most specific, and then work down.

8 Toggle Buttons I know this isn't related to resources, but I didn't want to deal with how irritating videos and sounds can be in Android, so we'll look at this instead. We won't actually need to make a new Activity. We can just modify our Picturesque. For the layout, we'll need to tweak our ImageView a bit as well: <LinearLayout xmlns:android=" android:orientation="vertical" > <ImageView android:scaletype="fitcenter" android:adjustviewbounds="true" android:id="@+id/imageview" android:src="@drawable/nasa_moon" android:onclick="flippy" <ToggleButton android:id="@+id/toggler" android:layout_width="wrap_content" android:texton="yeah!" android:textoff="naw!" </LinearLayout> The code to add is trivial: final ImageView image=(imageview)findviewbyid(r.id.imageview); final ToggleButton toggle=(togglebutton)findviewbyid(r.id.toggler); toggle.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { if (toggle.ischecked()) { image.setimageresource(r.drawable.noom_asan); } else { image.setimageresource(r.drawable.nasa_moon); } } }); to the end of oncreate is all it takes. Of course, there are some interesting points that could arise here...

9 Additional Considerations Remember that the list of Drawables was longer than just raster images. We aren't getting into them here (at least, for now), but there are plenty more options, including XML-based. Also, in addition to the res/ folder, sometimes you want to store files as files. That is, though the raw/ folder is good for dumping in arbitrary files to be indexed (as R.raw.filename), you could also wish to simply include a collection of application assets. That's an option, as well. Instead of being under res/ at all, they simply go under assets/ and are accessed, e.g., as such: InputStream in; AssetManager assetmanager=getassets(); try { in=assetmanager.open("somefile.something"); /*(And then read in, as from any other InputStream)*/ in.close(); }catch (IOException ioe) {/*Do something here*/} Additionally, there are different reasons we might want to provide more specific resources, beyond just pixel density. Besides screen size, there are also considerations such as API level (e.g. for layouts), and locale (say, for strings). What would be the result of changing the colours in a values-v24 folder? What about the strings in values-fr?