I have a xxhdpi xml file that I need to downscale for xhdpi and mhdpi.
The dp sizes in the XXHDPI file are perfect, but I have xhdpi and mhdpi devices that are displaying inaccurately.
I understand sizing for bitmap/PNG graphics. That is not my problem.
My problem is trying to scale elements within the UI (picture questions and answers with background fills and/or font especially sizes). I'm being advised to go back and remeasure each element in Photoshop? This cannot be right, surely I can apply a mathematical formula to this problem?
Also how can I account for the strange sizes of todays XHDPI marketplace?
For example:
xxhdpi: < dimen name="standard_button_height">40dp< dimen >
xhdpi: < dimen name="standard_button_height">?dp< dimen >
If I understand you correctly you want your app to look identically scaled across all devices (meaning you don't wish to take advantage of the extra space on tablets and instead just blow everything up to be proportional across the board). If that's not correct, please elaborate further.
However, to solve the above problem...
What you need to focus on is not the xxhdpi vs. xhdpi here but rather the DP of the target device. The vast majority of Android devices fall into two classes. Those that are ~360x640dp and those that are ~800x1280dp (when held in portrait). The latter is the xlarge class (tablets).
So, you'll want to create a directory called res/values-xlarge and in that folder you'll have a dimens.xml in which you'll scale all your DP widths by 2.22 (800/360) and all your DP heights by 2 (1280/640). So your 40dp tall button will need to be 80dp.
This is not a perfect gambit because some devices use some of the screen real estate for non hardware keys (while others have hardware keys and give you the entire screen to utilize).
Related
I am having trouble managing my application layouts in three different resolutions; 720x1280, 1080x1920 and 1440x2560.
In drawable-xhdpi folder is the corresponding images to 720x1280 resolution.
The folder drawable-xxhdpi is the corresponding images to 1080x1920 resolution and in drawable-xxxhdpi to 1440x2560.
I began to adjust the screens in layout folders. The layout-sw360dp was setting screens for 720x1280 and the layout-sw480dp the 1080x1920.
When testing in the emulator 720x1280 all settings worked perfectly.
But to test the emulator 1080x1920, oddly taking this information in layout-sw360dp folder and not the layout-sw480dp.
In the case of adjusting each folder layout-sw360dp and layout-sw480dp, I'm using margin with values in 'dp' and emulator higher values (layout-sw480dp) are being dropped are being used and the values of the layout-sw360dp.
How can I manage three screen sizes correctly?
Well designed Android applications cater for varying screen sizes, the screen size being a function of both resolution and density. Using several layout-sw###dp folders allows you to vary the layout according to the width of the display, e.g. showing fewer elements and controls on a small screen and perhaps more detail on a large one.
The 'sw' in the layout folder name is the 'shortest width' a display must have in device independent pixels (dip). One dip = 1 real pixel on a 160 density screen. So on a 320 density screen, 2 real pixels make up one dip.
Your nexus 5 has 480/160 = 3 real pixels per dip. So with a width resolution of 1080, that is 360dip wide.
Your nexus 4 has 320/160 = 2 real pixels per dip. So with a width resolution of 768, that is 384dip wide.
Neither device is more than 480 dip wide so both use the sw360dp folder.
Both devices are physically very similar in size. The Nexus 5 (5.4inch screen) has more pixels than the Nexus 4 (4.7inch screen) but the pixels are physically smaller. So it is correct that the same layout is used for both. The UI should look the same on both devices, assuming you correctly specify the size and layout of your various UI elements in dip.
As a further example, I have an old tablet (10inch screen) with a resolution of 800x1280 and a low density of 149, hence is 859dip wide. You can comfortably display far more info on a screen that size than on a Nexus 4/5, hence you might consider creating a layout-sw720dp for that.
So you appear to be doing exactly the right thing already by designing different layouts for different screen sizes. Just remember that resolution is not the same thing as screen size. Screen size is a combination of resolution and density.
As for your drawables, you are also already doing the right thing by using drawable-xhdpi, drawable-xxhdpi etc with appropriate resolution images in each one. So for example a small device with an extremely high density would likely use the 1440x2560 images and the sw360dp layout. My low res tablet would use the 720x1280 images, unless you'd put something in drawable-mdpi which is where it would look first.
So firstly you'd create appropriate resolution images in the drawable folders so that they would look as good as possible on different resolution screens. Then create appropriate swxxxdp for your layouts so they take up the appropriate space depending on the physical screen size, i.e. make good use of available screen space on large devices and don't clutter up small ones. It's likely you would want to go further and create -land and -port versions of each as well.
It is worth noting that even if you only have one layout folder and one drawable folder, your application will still work on all devices. Android simply looks for the best choice and if there is only one, it'll use that. Adding in the various folders simply allows you to make your app look as good as possible on a range of devices.
Everything I have discussed here and more is explained in detail at http://developer.android.com/guide/practices/screens_support.html.
I have 3 custom made android devices.
First one has a 5 inch screen with 1280x800 res
Second has a 5 inch screen with 800x480 res
Third has 7 inch screen with 800x480 res
I tried giving sizes with dp, px and inches but it seems they cant support those screens properly with the same value (even inches seems to be not exact inches but translation to px eventually).
How can i use same code to properly adjust view sizes relatively to the screen size?
Well, as first, the correct measure unit to use is: dp for controls and sp for fonts.
These are normally for margin, paddings, widths, heights, and other attributes.
Also xml drawables can take advantage of pixel independency
Define your dimensions in a res/value/dimens.xml file (this is a PROPOSED standard name, you can call it whatever you like best), in order to have them referrable from all your code, instead of being hardcoded and often repeated in many files.
Then you must know that you should provide your graphics AT LEAST in mdpi resolution (160 dpi), which will be scaled up or down to match other resolutions.
Notice that I said at least.
For every resolution you are supporting, you should add a folder in your res path containing the graphics at the corresponding density for that resolution.
this means that you will have, let's say 3 resolutions mdpi, hdpi and xhdpi (today's favourites, excluding tablets - these ones deserve some folders on their own):
The graphics is going into:
res/drawable-mdpi
res/drawable-hdpi
res/drawable-xhdpi
Just put your graphics (with the same names) with (respectively) a dpi density of 160, 240, 320 in those directories.
Now your graphics is resolution compliant.
Now, I don't realize what the problem really is.
I mean, is it the background not fitting well? then the solution is to use a tiling or an "abstract enough" stretchable picture.Or you could use 9 patches, as well
If the problem is how the fonts and other objects interact with each other, you should always reference to an mdpi device (even emulated, if you don't own a physical one). When things scale well on a mdpi device, they are supposed to scale well on every device.
For tablets in particular, you are supposed to provide specific folders for values (where you put your dimens.xml file, containing the dimensions).
These folders normally have names like values-sw600dp or values-sw720dp-land. The suffix land indicates landscape mode, the particle sw###dp indicates the minimum dimension (width or height), so, I guess that in you case you could prepare some folders called values-sw480dp and values-sw480dp-land and there you would put your dimens.xml file, with the special dimensions for that particular device.
I guess that providing only the non-land folder would be enough.
How does the density dependent layouts work?
For landscape orientation only:
Two tablets -
One with mdpi density and 7inch screen size.
Other with tvdpi density and 7inch screen size.
I placed the layout1.xml in folder layout-large-land.
*The result: *
Tablet 1 with mdpi density working fine but Tablet 2 with tvdpi density layout disordered like shorter bitmap length and shorter margins for child layouts.
On account of getting this problem, I did the following change:
The layout1.xml now is in two different folders viz..
layout-large-land. and layout-large-land-tvdpi.
Now, Do I need to adjust (bitmap length and shorter margins for child layouts) manually for layout1.xml in layout-large-land-tvdpi OR will android auto adjust and set the tvdpi pixels by just seeing that its in a folder layout-large-land-tvdpi?
Your layout is mostlikely using absolute pixels, while, for sake of compatibility among variety of devices you should use device independent pixels. Also to avoid ending with blurry images (like upscalled from mdpi to tvdpi) you shall consider having your assets made for certain densities. Anyway, this is quite elementary subject and well explained in android docs: Supporting Multiple Screens
For quite a long time, I have been declaring resource folders for 4 different densities:
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
In the layout's XML, I have been using fixed widths (while still density-independent) such as 128dp for those graphics.
However, when more and more large-screen phones, and especially tablets, were introduced, that approach did not work anymore. Although you provide density-independent resources this way, the layout will not look good on large screens.
This is why I think I need to add Dimension resources that depend on the screen size, for use in the XML layouts, e.g.:
values
values-w600dp
values-w720dp
values-w1024dp
But does that mean that I should drop supporting those 4 density containers? Or do I need to provide 16 resource folders, i.e. one for every combination of density and size?
I can't find any good help in the Android documentation as to this topic.
drawables and layouts are different. To answer your question, should you stop support those densities. Yes, but you should still support xdpi and hdpi. Romain Guy recently said that modern devices like the Nexus 7 (at a tvpi) can scale the assets properly enough that mdpi isn't really needed. And nobody uses ldpi anymore. Last I looked is was less than 2% of the market.
About layouts. A Nexus 7 (1280x800 tvdpi) would use something from the values-w1024dp but still get assets from the drawable-hdpi folder. Those two aren't mutually exclusive. Something like a S3 would also pull from the values-w1024dp but use drawable-xdpi. You only need to provide an alternative layout if your use-case calls for it.
So do you need 16 different things? No. You do need xdpi & hdpi (if not mdpi). You may want to include alternative layouts for different sizes. You can be as specific as you want or as generic. Unless you're doing a hybrid app for both phone & tablet (7 & 10 in) you probably don't need a lot of xxxx-sizexxx folders.
In the layout's XML, I have been using fixed widths (while still density-independent) such as 128dp for those graphics.
This is probably a source of your issues. Your layouts should be as fluid as possible using wrap_content and match_parent. Fixed sizes should be reserved for padding around the sides and image where you know the size ahead of time. If you do this, your layout should look decent at any size from a small 320 x 200 to a GTV size.
1) Regarding dimensions in your layouts (values/dimens.xml):
values values-w600dp values-w720dp values-w1024dp
But does that mean that I should drop supporting those 4 density
containers? Or do I need to provide 16 resource folders, i.e. one for
every combination of density and size?
No, you don't need to provide different dimensions per dpi bucket (hdpi/xhdpi), because the dimensions are already being scaled up or down based on the device (if you're using dp instead of px). So for dimensions, you only need to provide values for devices with different sizes (hence the name, values-smallest possible width-600-dp). Because you don't want 16dp padding on a phone AND 16dp on a 10" tablet as well. You'd want 64dp instead. And no, it doesn't matter what density the device has. It still needs to have the same padding on the respective device width. So for dimens, you only need to think about the device's actual physical dimensions.
2) Regarding drawables scaling for different resolutions (drawables/xdpi):
The system scales them appropriately for the device. You don't need to worry about this. Also, you don't need to add any other buckets here. Just use mdpi/hdpi/xhdpi and maybe xxhdpi because many new devices are going to use the new density in the future.
Conclusion: there are 2 different UI building components that vary according to 2 different rules: drawables based on screen density and dimensions based on screen size. Do not mistake one for the other and think you need tens of buckets in the values folder, because that's not only wrong, it's just mind boggling.
I've an android project with layouts and resources for screen size large and mdpi (resources are in folders "layout", "drawable", and "drawable-mdpi").
The layout is mostly relative but some margins are given as absolute dp values.
The screens look perfectly on a device with above specifications (large/mdpi: aka device 1) and a pixel resolution of 480x800. Now, I have another device which has the same pixel resolution of 480x800 but since the screen is smaller, it has screen size normal and hdpi (aka device 2). The screens on device 2 look really messy (elements overlap etc.)
Since the pixel resolution is identical on both devices, it should be possible to create perfectly fitting screens for device 2 as well with little effort.
If I don't care about elements physically appearing smaller on device 2, what would be the approach to just physically "scale" my layouts (to fit on device 2)?
Just copying the drawable-mdpi to drawable-hdpi helps a little bit, but there are still problems. Are the absolute dp margins in the layout the problem? Should they be replaced by pixel dependent ones and everything is OK?
In general, what are best practices when I want to use a design that was originally created for a specific pixel resolution on devices with different pixel resolutions and I don't care much about elements appearing smaller or bigger?
In my case I basically just want to "scale" the original design and I don't care much about the vertical size (because the main view is scrollable anyway).