in my app I have a preview screen. On one device (LG, with Android 2.2, 320x480 screen) and another one (HTC, with Android 2.3, 480x800 screen) everything is OK. In both cases the list of supported preview sizes include one that fits the screen size exactly, I choose it and the image is perfect.
The problem comes with yet another device, having a screen similar to the first one (Samsung, Android 2.3, 320x480 screen). Regardless of the fact that I select a preview size that fits the screen size, as in previous cases, the image doe not preserve its aspect ratio; circles appear oval; the image is squeezed along the short axis of the screen. It seems the hardware itself, in order to obtain a 320x480 preview, squeezes the image (the camera has a form factor 4:3, while the screen has a form factor 3:2).
So I have altered the layout params of the view where the preview appears, in order to fit the form factor of the camera (size: 360x480. This PARTIALLY solves the problem; actually, to solve it completely I had to set 380x480 (!!!).
The fact is that I can't possibly find any API that tells me about this different behavior, so that I can automatically compensate for it. Not even the Camera.Parameters.getHorizontalViewAngle and Camera.Parameters.getHorizontalViewAngle seem to be helpful; they give the same values on all of the three devices!
Can anyone help me?
After deeper investigation, that included writing ad-hoc code to check how the preview is actually shown on the screen, this is what I found out.
On one device (LG E-720), the preview image is cropped in order to obtain a 3:2 form factor, then it is resized to fit on the screen. Aspect ratio is preserved:
On the second device (Samsung ACE), the preview image appears to be cropped in a different way, resulting in a 5:4 image (!?), that is then resized to fit on screen. Due to the different form factors, the image on screen appears squeezed.:
I have checked whether a software update was available for the second device, but this wansn't the case. So in order to get a more or less correct image on screen, I have defined the target view as being 384 pixels tall; this actually causes a cropping that restores the correct aspect ratio. It doesn't compensate, though, a small horizontal shift due to the fact that the original cropping is horizontally asymmetric.
Related
I have read Android guidelines regarding different screen sizes, but still I have some considerations.
Client has given me an image from PSD file which has certain resolution that fits
1080 X 1920. I just use wrap_content, and it perfectly fits the part
of screen.
I am not using DP to define its width-height, If i was using DP it would have
adjusted image according to screen sizes.
My questions are,
Does wrap_content works the same way as Density Pixels?
Is it also responsive, and changes the image width-height according
to different screens?
If not, then Is it necessary to use DP to support different screen
sizes ?
Thanks
The setting wrap_content tells your view to size itself to the dimensions required by its content. In the case of your test, your image is 1080x1920 and your device's screen resolution is likely 1080x1920 as well, hence the perfect fit. Since you set the width and height to wrap_content, Android is simply trying to use as much screen space as it needs to correctly display the amount of content it was supplied. In this case, since the available screen space matches the size of the content, it just fits perfectly.
But what if the device screen isn't 1080x1920? In that case, Android will only use as much space as it can, but still attempt to fit the image inside the bounds of the available screen space. In other words, the system will appropriately scale the image down to get it in the container you have provided for it. But this can lead to awkward fits if the aspect ratio isn't the same as the image. For instance, see this screenshot below:
This image is 1920x1080, but notice that it doesn't quite fit. That's because this nexus 7 screen is 1824x1200 when viewed in landscape. Additionally, the toolbar at the top of the screen is eating up available screenspace, making my viewable area even smaller and more awkwardly shaped. So while the system would love this image to extend all the way to the left and right borders, it can't, because then that would mean the height would be bigger than the viewable space. Since I used wrap_content to display this image, the system is using as much vertical space as it can, and the result is that the image doesn't quite fit the horizontal space.
So to more directly address your questions, yes wrap_content is a relative size setting that will make it easier to get a consistent look across multiple screen sizes, similar to using dp. But realize that there are hundreds, if not thousands of available Android devices on the market, and they all have varying screen sizes and densities. So your drawables may not always appear the way you want them on every device.
The way to overcome this is to supply multiple versions of your assets and provide alternate layout files for different screen sizes and densities. Once you do that, all you can do is test, test, and test some more. Use emulators for weird screen densities or devices you don't own, just to make sure you're getting the look you want. In the case of your 1920x1080 image, it looks great on that one device, but how will it fit a large tablet or a tiny handset that is smaller than the resolution of the image? These are situations you must account for in your design.
I suggest you read these resources, as they are hugely helpful in learning how to deal with issues resulting from varying screen sizes and densities:
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I'm making a game on Android in Eclipse, and when I run it through the emulator, it appears fine. The emulator I set up has the resolution at 800x480 (sideways). When I run the game on my phone, with resolution 1920x1200, it screws up the bitmaps by only drawing a fourth of them. I've made test code and two screenshots to show what I mean.
Small screen, emulator, running 2.3.3
http://i.stack.imgur.com/2WstK.png
Large screen, Galaxy S4, running 4.2.2
http://i.stack.imgur.com/8wtAD.png
It's the same code on each. The top has the dimensions correctly in the emulator (frame size of the bear, which is 64x64), but on the larger resolution it's halved the width and doubled the height for some reason.
The bear at the bottom is set to be near the bottom coordinates whatever the screen size, which is why it's different in each screenshot. The rectangles and top bear is set from the top coordinates.
I can post code but I'm just wondering if it's some type of setting that I'm unaware of because of the difference in resolution.
One more thing, I have the rectangles flipped horizontally from their original bitmap, so the fact that it appears to have taken the top right part of the bitmap to draw is not part of this, as far as I know. Again, just wondering if it's some setting that auto-scales things if the resolution is huge. I have a feeling it's something like that, OR that it's running on such a newer version of Android. Could be lots of things I guess.
Android usually scales up / scales down the image if it cannot find the right image assets for the device resolution. I believe this could be the reason for the behaviour you are observing. You can read more about providing the proper assets for different device configurations here,
http://developer.android.com/guide/practices/screens_support.html
Alternatively, if you don't want android to scale your images you can also place the image resources under drawable-nodpi folder.
I have my view built to fit a phone screen 800x480. The background PNG shows up as a perfect fit. I have a bunch of imageViews of PNGs sitting on the view that should line up perfectly on any screen that is that size.
When tested on my phone, it works fine. However, when tested on my 7" tablet that has the same screen resolution, the backdrop fits as expected, but the imageViews are all too small.
Why wouldn't they fit the same way, considering the resolution is the same?
Could it be the aspect ratio of the second screen?
I know that when I developed an app on my Note I, it showed up differently on almost every other device with the same resolution, on account of the aspect ratio of the Note I being so wide.
Can you check and see the actual pixel ratio of your second device?
Also, is it showing the on screen action bar thing? The back/menu/etc bit? Because that could be because of the version you're targeting is less than the version of your 7" device, causing it to run in backwards compatibility mode. That'll squish your layout a bit as well.
I have a partial answer to this.
I couldn't find a way to set the size of the PNG itself. Only the ImageView height and width. So I set those to 90dp. I tried px first. Don't do that. It's no good.
But, check this out... Forcing the size in dp made the images show correctly on the tablet, but enormous on the phone! So, it more or less reversed my problem.
But at least I know what the problem is now. I just have to create a secondary view for 7" screens to set the imageView sizes. Or, I'm thinking there must be a way to do this problematically. Before the view launches, detect the screen size, if it's not a phone, change the height and width accordingly.
That should work because, as I mentioned in an earlier comment, the relative positioning is perfect. It's just the size that's incorrect.
I'm wanting to target WVGA (480x800) and FWVGA (480x854) devices with my program. My question is: for my full screen background bitmaps which resolution should I make them?
There are a few ways you can attack this issue.
Make one background per aspect ratio and calculate which to use when the app starts. Find the aspect ratio by dividing the width by the height.
Make one background with filler on the sides and bottom for cropping, when you display the image resize it's dimension which has the largest difference from that of the screen's resolution to the exact screen resolution. This will cause the bottom or sides to get cropped a bit.
You could also use a combination of these strategies to create a couple backgrounds, one each for a range of aspect ratios, and then use the cropping strategy to take up the negligible difference.
Be flexible. Android can be run on many different devices, and it would be a very bad idea to limit yourself to certain resolutions. Instead, write your code so that it scales. (Keep it mind that you might have to crop the image if necessary, or live with different aspect ratios).
Just as food for thought... there are Android devices with 480x320, 240x320, 480x800, 480x854, not the mention the upcoming Samsung tablet at a higher resolution. Limiting yourself to a certain resolution would be bad.
Here is something from the SDK you may want to read up on too: http://developer.android.com/guide/practices/screens_support.html
EDIT: Assuming that you're focusing on those two resolutions -- I would say it depends on your image. Your best bet may be to go for 480x854 and design the image in such a way that it won't look bad if you lose 27 bytes on either side. If that's impossible, make it 480x800 and add black bars on either side if run on 480x854.
you can get any bitmap and convert it into a drawable using BitmapDrawable .Then you can set bounds to the drawable to match your screen background.
I've made my background graphics 480x864, the hdpi equivalent of WQVGA and thus as large as it gets. Since I center background graphics vertically, this will display nicely on QVGA, HVGA, WQVGA and WVGA, cropping a bit in most cases. To make sure that the important elements are always seen, I limit them to an area of 480x640 in the center.
To leave nothing to chance, I provide scaled down versions of the graphics at the same aspect ratio for MDPI and LDPI. Works great so far.
I'm creating a splash screen that will display while my Android application loads. I'd like to create it at the correct size so Android won't auto-scale it up or down to fit the screen. (It's a bitmap image, a photograph of an oil painting, so I can't just turn it into a nine-patch.)
But there are at least three important screen sizes I care about: 320x480, 480x854 (Droid), and 480x800 (Nexus One).
I've read the documentation on supporting multiple screen sizes, but I still don't see how I'm supposed to configure different splash screens for Droid/Nexus one (they're both "hdpi" resources as far as Android is concerned), and I don't know exactly how large my splash screen should be in any case. (How tall is the OS title bar/menu in Droid? N1?)
What size should I make these images, and how do I tell Android to use the correct size on a given screen?
You don't need to worry about the absolute screen size or status bars or anything — that's why we have nine-patch images.
What I did was have an image that looked good for each resolution — essentially a logo on a transparent background, with some text at the bottom.
Then I chopped off quite a lot of space at the top and side edges, made a nine-patch border round the image, with a single pixel near the left, right and top edges. This allows the image to expand evenly at the sides and top to fill the screen.
Edit, in response to Dan's comment below:
Yes, there is a way to determine which graphics should be used for which explicit screen sizes, but it's deprecated.
Just as there are drawable-hdpi and -ldpi resource qualifiers, it's also possible to use drawable-HHHxWWW — the larger pixel dimension coming first.
e.g. drawable-800x480 and drawable-854x480
Okay, firstly: you can find the device model via android.os.Build and use that to determine which image to show.
Secondly, I personally wouldn't bother. Layouts should be done in dip since every android screen is 320x480 dip I believe, and android maintains aspect ratio among devices very well through this in my experience. A 480x800 splash set to fill parent has been pretty reliable on both N1 and the droid as far as I have encountered.
Another solution that I implemented is to put an ImageView that fills the screen (width and height both "MATCH_PARENT") with scale type "centerCrop". This way, the image is not stretched but cropped along the edges. Try not to put important content (logos and stuff like that) close to the edges. If it is a photograph, I hope that the edges are "expendable" and can be cropped out.