Im getting started with android development and i have a few questions about supporting different screen sizes. I have read all about it here but still dont get how to use different sized images for different screens. My situation is that I have put an image in res/drawable/hdpi which will be picked up when running on my samsung infuse 4g as well as on my galaxy 10.1 tablet. Because they have the same density class the image will have roughly the same physical size on both devices. And this is the problem, obviously I want the image to be way bigger on my tablet but I have yet not found a way to do this.
I did look at another classification whith small, medium and large but that seemed only to be applicable to layouts and not image resources.
Any pointers would be appreciated.
Thanks!
Those two devices don't have the same density. The Samsung Infuse is hdpi, the Galaxy Tab 10.1 is mdpi.
Further, you don't generally want the image to be bigger on the tablet. Consider -- if I have a list of contacts in my application, I want them to be the same height on the phone vs. the tablet because there is no use making them taller (that height is sufficient to display the text and be able to tap on it with my finger), but rather that I want to do is use the extra space to be able to display more of them.
If you really do want an image that is larger on the tablet than on the phone, you are going to need to explain more about what you are actually trying to accomplish. For example, maybe this is a background image? In that case maybe what you are looking for is to just have the image stretch to fill the screen. (And be aware that doing background images on Android is tricky because you do need to deal with a wide variety of screen sizes you will be fitting. To avoid making yourself go insane, background images should generally be very abstract so that stretching works well on them. Look at the background images used in Android 3.0 and 4.0 for the default themes as an example.)
If you are writing a game, this is a very different world, and you should consider whether you want to use density based resources at all. Generally games will have resources that are independent of density, and just have their game playfield fill the screen and are happy with the result being something larger on a tablet.
After putting images into for example
/res/layout-480x800` - if you know resolution
/res/layout-w480dp - if you know witdh
/res/layout-h800dp - if you know height
Android automaticly choose picture for you. Just put picture in resolutions but with the same name into this subfolders. Then just use (without spacyfing qualifiers):
android:src="#drawable/background"
or
imageView.setImageResource(R.drawable.background);
The order of precedence of qualifiers can be found in documentation (Table 2)
Tablets are usually xhdpi, not hdpi. So, for your Samsung Infuse, place the image in:
/res/drawable-hdpi/
And for the tablet, place it into:
/res/drawable-xhdpi
When setting the image resource via
android:src="#drawable/image"
or
imageView.setImageResource(R.drawable.image);
It will pick the appropriate image based on the density of the device.
Related
I've read a lot of different posts and articles about how screen sizes are determined and it's pretty confusing to say the least so I thought I'd just ask!
Here are the facts:
I have developed an app that has a big logo on the login screen. This logo is 958x496 and is 30.6KB. It's a real nice big sharp looking image!
I have four development phones that each use different drawable sizes ranging from hdpi to xxxhdpi.
I currently have a dawable-nodpi folder that has the logo in and every phone uses it but I feel like this isn't the 'proper' way to do it so I'm trying to have different sized images for each phone.
So, I want to use this full 958x496 image as the baseline for the xxxhdpi drawable and I will scale them down accordingly using the 3:4:6:8:12:16 scaling ratio (meaning the full image will be my '16').
As it currently stands if I do that, for the hdpi phone I get an image that is 354x183 as its roughly 37% of full size. I run up the app and yes the logo looks great but here is the question.. if I use drawable-nodpi instead it will use the full 958x496 image and it looks better so why should I downsize my image when it will look slightly blurry? Why not just use the best possible version of the image? I thought this was because I wouldn't get the benefits of the high quality image on the lesser phone, but you can definitely tell a difference.
I start to design small app for android. But this is my first android app design. And I have a question about devices and displays.
I have read all developer guidelines at http://developer.android.com/, all about DPI and pixels. And still not clear with question.
I want to design in Photoshop CS6 because is the best way for me.
In guidelines i read "One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets. Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens."
I want to start with the largest screen size so this is XHDPI 320DPI. As an example I want to choose Nexus 4. What resolution (pixels and DPI) do I need to choose for PSD?
I think I need to create PSD with 1280x768px and 320dpi. Is that right? If so, when I need to scale down to 160dpi I have to create new PSD with 160dpi and resize the elements from 320dpi?
Please help me someone I'm confused.
Density and screen size are not the same thing.
XHDPI is the density. 1280x768 is the screen resolution, NOT the screen size. The Nexus 4 has a 4" screen, which is considered "normal" size. If you had a device with an 8" screen and resolution 1280x768, it would be 160dpi, and would be MDPI. However, you can still use the 1280x768 asset you created for the Nexus 4 and the system wouldn't have to scale the image.
Here's how all this relates:
With the Nexus 4's "normal" sized screen, you can display all sorts of UI elements, keeping in mind that they need to be large enough to read, tap, etc. If you launched the same app on an 7" screen, which is considered "large" you might add additional UI elements, since you have so much more real estate. Ok so far?
Now, let's say the 4" screen and the 7" screen have the same resolution (1280x768), they will have a different density. The 4" is XHDPI and the 7" is HDPI (my Nexus 7 reports 213dpi).
If you had a 80x80 image, it would be 1/4" square on the Nexus 4, but 1/3" square on the Nexus 7. The whole UI would look larger and somewhat Fisher-Pricey. Thankfully, Android scales the UI for you, as long as you use "dp" to declare the size of UI elements. You can provide assets in different densities so Android won't have to scale bitmaps too much -- though it still will.
So, if you're developing a phone app, target the normal screen first (and XHDPI if that's your dev device), and provide all the assets in XHDPI. Then create alternate layouts for large screens if you want to make the UI more usable for tablets. Lastly scale your images for other supported resolutions.
You can use PSD, but personally, I prefer vector-graphics as they scale beautifully.
I'm not a PhotoShop user, but since it's raster based, I would start with a higher resolution than you expect using, and scale down. At the very least, I would design for a 1600x2560 Nexus 10, and then scale down from there. In my process, I use CorelDraw (long story), design icons in 1"x1" boxes and then export in the various resolutions.
a little more detail on what you are trying to do would be helpful. Are you trying to design your icons, or the entire UI, or what?
In android, the UI is designed mainly through xml, and the default styles should be used when possible to stay consistent with the rest of the OS and looking nice. For many apps, there is no real graphical work to be done accept maybe launcher icons, which there are guides on the developer site for.
If you are trying to design some of your elements like icons, figure out how big they would need to be on the largest screen size, and start from there. then you can scale them down, but you should not actually be drawing the whole UI or anything. Take a look at how the graphics are done in some of the android examples, I find them to be extremely useful when trying to figure out how to do things.
I have been programming an application for Android. I want to target it for more devices(tablets, smartphones). I tried to find some info at http://developer.android.com/guide/practices/screens_support.html but it does not work correctly.
I want to automatically stretch images on different devices, not only in my testing device. I draw images for the mobile full screen (which has the same resolution as my mobile). But, for example in the tablet it draws incorrectly. I tried to change the size and it gives several folders(lhdpi, small, ...). When I tried to start it again in the tablet, it was bigger but still incorrect (there was a black space on the edges). I have several images in my application, and I want to retain the same size as in the mobile too. Please, help me.
Sorry for my spelling mistakes.
you have to maintain aspect ratio at your own . don't put same sized images in all folder (hdli, mdpi, ldpi), if this was the case they think why android provides different foldes ? put images in ratio 0.75 : 1 : 1.5 . it will work .
additionally read about 9-patch images, this will make your life much easier .
i am NOT an android developer and im trying to understand what they need in terms of graphical resources to make an app that functions across many android devices.
i have (tried to) read this page http://developer.android.com/guide/practices/screens_support.html , but find it somewhat bewildering. they talk as if screen density is the important thing "Supply alternative bitmap drawables for different screen densities" but then, if you dont know the size of the screen, you cant really think in terms of layout. is the idea to make buttons and logos that are the same size on all screens with the same density, such that on a large screen there is just a bunch of space, and on the small screen its all packed in tight? i dont understand how just thinking in pixel density gets me any closer to knowing what to provide.
are you supposed to create resources for every screen size AND pixel density? say it aint so.
anyway can somebody tell me... if you were developing an app what do you need for graphics? is it possible to provide graphics that are large and just let them scale down? is it inevitable that the devloper will have to mess with the graphics himself anyway? or can he be provided with sets of png files of certain sizes that will be ready to use?
thanks!
Here's what we do at my work place. Suppose we get a desing for the app. We make our designer create 3 psds versions for the same desing. the 3 psd's are for the 3 ranges of desnity. The size used for the psd are
240*320 (Low Density)
320*480 (Medium Density)
480*800 (High Density)
Most of the time when I write layouts, I use wrap_content which means a view must take the size of the content it wraps. Which works most of the time as I have a density specific version of the design so the image i use as background should be suitable. The thing to note is that, in android you can can put the 3 sizes of the same image in different folders such as drawable/ldpi, drawable/hdpi.
Eg: you have a bg.png and have a version for large phones and a version for small phones. You put the big bg.png into hdpi folder and the small png in the ldpi folder. Android will automatically select the appropriate image based on the phone density. But you need to make sure the file name is the same.
There are cases where you need to resize you background images without makeing the image looking too scaled. For this android uses the draw9patch tool. With this tool you can specify areas which can scale and areas that shouldn't scale.
9 Patch png's are your friend. Read up on them here:
http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch
and here:
http://developer.android.com/guide/developing/tools/draw9patch.html
Those are your best bet for any kind of graphic that will stretch nicely (i.e. not gradients, they will come out slightly pixelated on some screens probably) The power of these types of images is that you can tell the system which pixels to repeat if it needs to stretch the graphic. This means that stretching can be done without loss of image quality (again depending on your image and how you choose to make the nine patch. The "show bad patches" button in the draw9patch program will show you potential problems. Hint: keep your repeatable pixels down to 1 on left and 1 on top and you'll have no problems with bad patches) Any graphics that can be made in to 9 patches will only need 1 size since the system can effectively make it whatever size it needs.
are you supposed to create resources for every screen size AND pixel density?
You may if you like. This would ensure that the application will look great across all devices. I understand that this is not feasible for all projects though. In general if you make separate resources for the different densities you'll get something that looks acceptable on most of the devices out there. All of the devices are classified as ldpi, mdpi, or hdpi (there may be an "extra high" level now too, I am not certain off the top of my head) So if you supply graphics for those 3 densities then the system will know where the device falls under and will pull the correct graphics.
is it possible to provide graphics that are large and just let them scale down?
Yes the system will scale down your graphics if needbe. But be aware there are consequences with this approach. First every time the system hast to scale a graphic up or down it is going to taking up CPU and memory to do so. This may not be an issue if you have relatively few things to scale, but if you have many it could cause noticeable lag time during on the lower power phones. Second, To my knowledge all of the graphics in android are raster, which means if you are letting the system scale something up or down image quality is going to decrease some. Again depending on the specific images this may be more or less noticeable on the actually device at runtime.
My best advice is supply them with resources of a few different sizes and run the app on as many different devices as you can. Once you see how your different resources look on the devices of different sizes you'll have a much better feel for which ones you need to supply to get the UI looking as consistent as possible across the largest swath of screen sizes and densities.
I have a client that gave me a .psd file that contains the entire screen of an Activity with all the graphics. The resolution is 480x800. The client wants the application to look identical to the one in the .psd file. The problem is that different devices have different resolutions and sizes. I know that the density is what really matters but how can I scale the graphics to look the same on all the devices? For example, I exported all the layers and recreated the screen in Android but, for some reason, the screen looks more crowded on a Nexus One (480x800).
One idea would be to create 9 patch images from the graphics and use for ImageViews android:background instead of android:src right?
Isn't it better to have a 320x480 resolution for the graphics? Or do I need for both resolutions? Also, I have to consider the height of the status bar which I understood it is 25dip but I am not certain about this.
So, to summarize, I am interested to find out what is the best way for a client to give you the mockups and graphics so that it is easy for the developer to implement according to the specifications.
That's something that's not easy to solve. Think of a webdesigner, one can't know all the possible resolutions and settings of every browser so he has to scale things accordingly.
In my opinion there are only three approaches here.
First: Let him state what devices he wants to support and only support those devices. Extract the layers with the size of the device with the highest resolution and scale them down on other devices.
E.g. If you have to support two devices with 480x800(2) and 240x300(1), export all images to be 480x800 and scale them down accordingly. Don't write a single application for every device.
Second: Export the graphics with the highest resolution possible and scale them down on all devices relative to the device being used. Imagine, again, a webdesigner. All he does is define margins, paddings, etc. and it will look nice in almost any browser. You should do the same and resize your elements on demand.
Third: Make the application fixed, e.g. define a size of 200x200 for your whole application and just fill everything larger than the screen with a certain color, e.g. black. This happens a lot with java ME applications, they look great on the hardware they were made for and are still playable on hardware that is beyond their time though they look pretty ugly.
Hope this helps,
Robin.