Lessons

Lesson Info

Styling for Different Screens

So this last section has to do with I'm styling for different screens. Um, so this is just a beast. This d screenshots here, Show the emulator, um, at different screen sizes, which I will show you how to set up in just a second. Um, but what the case is you need to set up your application to to gracefully work on different sizes of screens, Um, in a few different edge cases, because the kind of standard cases, um, and more specifically, going from the standard android screen size android phone device, screen size to a bigger screen size, like we're gonna see on that dell device, which is one step up inside. I don't remember how many inches is gonna be, um, that that should happen just as just kind of for free. Um, the And in general, um, if you're defining, uh, if you're not defining like specific pixel values for for things on the screen, you're you're gonna turn out to be you're not. You know, I could have to do too much work to change between the different screens when you're upsizi...

ng, when it's going to a bigger screen. But when you're going to a smaller screen. You need to be explicit because, in fact, you have to define when you deploy your application in the market, whether or not you support smaller screen sizes. And you needed to find that in the manifest, which I'm gonna show just a second because it doesn't downsize and racism downsize, like for free. Um, and let's see what I mean about these different screen sizes. Um, well, first of all, here I've got two different screenshots of what, um, the the two different designs have done for a for a regular screen size on the small screen size, and we look at those more depth in just a second. But here, what is meant by the different screen sizes So there are it's kind of a grid of six. There are low density, medium density and high density devices that android is defined to work for those of names like wide Q B J H V g a W V g A. I think it means why, um, but the dimensions on those are like 2 40 Looking along the middle here for the medium screen density, which is about the phone size so low density device is gonna be 240 by 400 pixels. A medium density is 3 24 80 which is kind of the standard one and then high densities for 80 by 800. And I think that's I think, the Nexus one, maybe high density. I think maybe some other ones are not quite sure about that. And then you've got only one one thing for the large screen, which is for every 400 an 80 by 800 with 4.8 inch by 5.5 inch diagonal for a DVD A and so on. But those air those were basically what everything is set up against now to support these different screen sizes. Basically, all you need to do if you want to support screen, set a screen a small screen size. You don't need to do this for supporting larger screen sizes. Um, that's just supporting That's not designing for them. This, you need to say, in your manifests, you have to put a support screens tag, and that's a small screen. True, normal screens, large greens, any density. You can configure all those things, but you need to say the small screens one. Otherwise you won't you want It won't even show up in the market for small screens. And you also need Teoh Take something off when you point to the marketplace. Um, but what you could do wasn't so at the bottom, By the way, are a couple of links that describe this a lot more in depth in the documentation. But what you can do, um, also, for any screen size is actually have different layouts that will automatically get put into place, um, for different resolutions and different sizes. So you can see here are showing you in my code. I have a layout directory, and I also have a layout dash small. You could also have layout dash large, and then you can also define as thes links that that have at the bottom of the screen will tell you for specific pixel density is as well you could have different layouts, and, uh, android will automatically go find the right layout for the device that you're working on, which is kind of nice, and that will kind of end up like this. So I've got here on the left, a emulator that's running a normal size screen almost as pixel density on the right have an emulator that showing a a small screen. And what's gonna happen is layout. Dash small is gonna be pulled in for the small screen. And Leah, normal or layout The normal layout that we've already seen so far that post is gonna show up for the post view on the normal screen automatically. So what we've already seen a couple of times is where we where we define some sizes and stuff for fonts and for radius is and things like that in this styles. And we're using these weird units the S P unit and the DP or the D I P unit, you know, one of those will work. And so let's talk about what does actually mean. First of all, you can use, um, pixels if you want, but you should. You shouldn't ever find yourself using straight pixels because they're not gonna be automatically dealt with my android in the right way. Um, but basically, you have a choice between S P and DP or D I P for anything that you define and the way that breaks down as you use scale pixels for fonts or SP for fonts. And what that does is Android will automatically take into account the screen density, and the users fought preferences so should always use if they want to. Sochaux bigger um, fonts. Android will scale the fonts for you automatically based on that user preference if you use scale pixels. But for everything else, for all the other graphic things have used DP, then the pixels that you have defined will be, um, based on a screen density of 160 d. P. I. Um, So what that means is, if I say, for instance, just his example, if I say something is 160 pixels wide on a screen of 100 pixie pixel 160 dp I that's gonna show up as 100 sick or it'll take 100 60 pixels to show that. But if the screen density was 220 the right double that basically that is gonna show up as pixels instead, even though you defined it as hundreds 160 because it's going to make the right choice based on the screen density. So let's just look it quickly. The layout Well, okay, First, let's look at the manifest. Because I made one change there. So when step for the manifest, we go to the XML has this This supports screams, definition here. Small screens, large screens, any density. All those are true. So I support any screen that you want to throw. It may. Basically, I also have, um so this is what is needed to support a small screen and the other. Only other difference in the code is that I now have this resource layout resource layout small, um, and then in resource layout small have a post view, which is sort of the analog to the post of you in my regular layout. Um, and the difference There's and layout small. All I did was to give us a little bit room for a small size screen. I have moved the button up above the text view. So now the But Miss City, I'm sorry, Edit text. So the button is sitting up here above the edit text and next to the, um, uh, the counter text, the one that showing 140 characters or however many I have left to fill in for the tweet and that gives us a little bit more room on the bottom for the key keyboard to show up underneath. And I've also, I think, change the lions from 5 to 3 here for the edit text. We have a little bit more now to be able to show that I go here. You can see this device button here. If I click that you did to the Android Sdk and AIVD manager, and you can set up in your diverse virtual devices area here, I've set up a Navy D or an android virtual device called the Little Guy and given a name, whatever you wanna call it. Um, now let's look at the details of that. So that's set up to be using a Q V G A skin and the LCD densities 120. Whereas the one that I'm running right now, this simulator here is called New and the details there are It's an H V a skin, and the LCD density is 160. So if I run, I'm not sure if I'm able to run these both of the same time, cause it might be both using the okay, So if you click me. By the way, you can change all those things like the target. We went over that in the first class. But you can change the resolution to whatever you want right here. And you can use this table, uh, that I find things here. This is also on the documentation to figure out what the resolution is. That's how to make a new, um, a new one to see if I can run both of these at the same time. So they click start, I can. She's a few things and save launch and see if this will actually brought us. There's my other emulator. There it is, sitting next to be a bigger and better have smaller screen size. And then if I If I go here closed this aivd manager, um when I when I right click this project and I say run as android application What What happens is when 22 of these things were running, I get to choose which devices is the one that it's Oh, yeah, I have starting a starting an emulator with my headphones plugged in, so it's gonna crash, which is totally strange. Um, so I'm gonna have Teoh plug for a second to get this small device for the small emulator running so we can preview on the small screen. Eso give me just one second to start that up, and you could still see my screen. While I'm doing that, I'll be right back. It's taken him a long time, and I'm not even sure it's actually starting with this error. That showing up here. So we I mean, you may have to we just rely on my screenshot for now and then kind of give this a try it at home at your leisure Teoh to look at the differences, but basically the difference is gonna look like that. So it'll show up on a smaller screening at a smaller pixel density. Um, so the upshot of all that is you can use those alternate resource. Is this what 100 calls alter resource is? So it's a completely different layout, and that'll make it able to support different screen sizes without a bunch of conditional logic in your own code will just automatically happen, which is a pretty nice thing. So let me just let's just save the questions for this step for a second, let me finish up and then we will go in the questions. So in this class we have created a theme. We have set some custom text appearances, but in the list compere Ince's the edit text appearance basically some different components and we created a view that works for different device setups. So what you could do at home is take the code that I have so far and alongside of everything that we've got, um, create your own scene and then change the theme when you're ready to in the manifesto point of the theme that you're creating, you could look around for some inspiration in a website like make it look like twitter or make it look like something else kind of used colors that you find somewhere out there. Don't worry if it looks good. Just the point is that you're supposed to be kind of trying things out and give it a good experiment, and then these links that already showed before about the screen support Make sure you go through these and understand what the different options you have available to you are. And now, well, next next week we're gonna be talking about posting photos, eso working with the camera and working with the photo library and working with another library called Twitpic for J, which lets us post post photos to twit pic on. And then which will then post onto Twitter for you. So let's take some questions, because I know there's probably some questions. Yes, I would like to start with a question you have talked about creating multiple styles for different sizes of screens. Is it possible to programmatically switch between styles? Um, you know what? That's a good question. I talked about switching themes at the beginning of the of the class. I know there there is a way to define what themes going on, but I can't tell you what the code is off the top of my head. I think I think that there is, that's that's something we can take. The reforms okay, and a few people have asked about sir the benefits and trade us of using XML and themes and style in the XML, as opposed to using code and defining objects and their styles in the code and then using them that way and presumably want one big trade office that you can easily support the different devices that way. Potentially? Well, yeah, that's one thing. So that's a good point. But also, it can get cluttered in the code. You just have to define what you want, uh, to be, you know, in your code. If you don't want to see a whole bunch of styling information in your code and you'll prefer the XML, Um, I don't know if there's any other benefits off the top of my head. I can't think of any, um, like, straight across benefits, but I think it just looks better. And it's It's like a separation of what What you're doing in different cases to deal with things in code or the um, or the resource is, um, for one thing, you get to get to reuse things, although I guess you could do that code to. But you get to reuse things based on definitions, um, in like colors. You get to reuse things based on some name for a color instead of instead of having a color, settle over the place so you can get to change it in one place, and it also means a little bit more, and I think just XML is a better language for defining layouts. So I think it's just in general, um, better to do that kind of stuff. Inexorable. Yep. But all of the styles that we saw today all of the all of the different ways that you can modify the way things look that's that is all available in code if you wanted it. Yes, it is. Which one of those is is just like a layout, like the root root tag here relatively out. That's working with a relatively outclass somewhere. And I think a shape is also dealing with a rectangle class. If you say that the type of shape is his rectangle. Okay. And someone else asked if, uh, for padding between elements you would use the DP. Yes, OK, yeah. Basically, you scale scale pixels for fonts and dp for everything else, and you'll be good. Okay? And I think that's all I have. Brian, do you have a couple questions from the chair? Um, yes, the 1st 1 of a kind of ties into what you previously were talking about. Can we inflate the entire themed XML file and brute? Force it into the current activity not again. I'm not sure. Off the top of my head how to do things programmatically I assume there's probably a way to change theme. I'm not sure if you can do it on activity by activity basis, but that's something we could kind of look into. Okay. And sorry. And the second question is, ah, can we style the links so that they show that they were visited after we've clicked them inside of the each individual list item? Ah, it's a good question. I don't I don't think there is a style for that. And I also don't know if if Andrew keeps track of that because that's that. Like it? Like, um, that's a lot like an eight. Uh, I'm sorry. Is that activity that would have to keep track of that right? Because you, uh you, um, you you click the link, you go away to the browser, you may browse around for a while and then come back through the back button or whatever to the activity. That activity may have shut down in the meantime, because you were around doing something else, so they would have to keep that, That the fact that you click that link somewhere somewhere beyond I guess I It would have to be some sort of global store for the fact that you click that link. That be kind of weird. I don't I don't think there's anything like that. Okay. Thanks, Sarah. Do you have You can see these two emulators sitting next to each other. By the way, I got this working. Great. So how did you get the post button to magically pop up into the top right corner? Just a different layout. Oh, that's right. You went over that yet? Okay, I remember that now. Yeah. So just like this? Yep. Okay. Cool. And then, um, a couple of people had asked since we're right at the very end, if you could just quickly go over the nine patch thing again and how to set up your PNG Just a quick review, because I think some people found that a little confusing. Yeah, I find it confusing to, but and I did kind of go over quickly, and I don't have an example of it because that much other would use the XML, but basically will go to this link. First of all, this will tell you everything you need to know. There is a program that you have to start from the the SDK Tools directory that can help you draw this and then also preview what it's gonna look like a different different, um, different sizes. So tall, wide and just generally big will show you how the how they think stretches. Basically, what you're doing is you're drawing a black one pixel chunk at the at Thea like the edge, the one pixel edge around the whole item, Um, the whole ping. But that tells Android how to stretch on the left in the top. So what? So basically what parts of this ping will stay constant as it gets as it stretches in any direction and what partial stretch and where you draw, uh, something here looking down down here, this green line shows where it's going to stretch. What part is gonna stretch in the the horizontal directions? And this green line here is showing where it's going to stretch in the vertical directions and there's padding is showing what area it is allowed to draw text into, um, in that way, everything outside of those are going to stay static, and I'm not gonna They're not going to stretch it on that way. Your corner radius will be constant as the rest of you. The ping, um, stretches to fit. Whatever uh, needs the component has it's almost like putting those the, you know, the struts and springs from the IPhone developments. It's almost like putting those inside the PM two point right inside the pain. Yeah, very bizarre. All right, cool. Well, thank you for going over that, Tony, and I think we'll end here because we're out of time. And we've got some questions that will put into the forums if you so if you didn't get your question answered, look for it there. And I just want to say thank you to Tony and thank you to our sponsor. Add Mom, and let's give Tony a big round of applause. Thanks. Everyone will see on the forums because there's probably a lot of questions and tune in next week when we talk about posting photos