I am creating an application in Xamarin forms both both iOS and Android which will also have images in it. I have two questions.
Can I have one image and use some API calls to modify the resolutions based on the device.
If not, what are the different resolutions needed, for targeting iOS and Android devices both phones and tablets
You certainly could, but this could slow down performance especially if you are loading a lot of images and need to resize often.
I believe it is better to pre-supply images at the correct resolutions. Both Android and iOS have good mechanisms for doing so and the way to do it is identical in Xamarin as in a native app project.
In iOS you can add an image set to your asset catalog for each image you will use and the three different resolutions for that image will go in that Image set, helping to keep things organized. There are no set resolutions, but you would want 1x, 2x and 3x versions where 1x is the "base" version that will be used on non-retina devices, 2x should be double the resolution of 1x and will be used on retina devices, where 3x should be 3x the res of 1x and (I believe) will be used for the 6 Plus and 7 Plus iPhone models.
For Android, it gets a bit more complex, but basically you provide multiple resource image folders (usually named "drawable" but can also be "mipmap") with screen density qualifiers in the names of the folders, e.g. drawable-hdpi or mipmap-hdpi. See this Android document for more info:
https://developer.android.com/guide/practices/screens_support.html
Here are the screen density qualifiers you can use:
ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi
Again the actual size of the image is up to you, but the resolution of, e.g. the mdpi version would want to be ~30% larger that the version in the ldpi folder and so on.
Related
Android runs on a variety of devices that offer different screen sizes and densities. For applications, the Android system provides a consistent development environment across devices and handles most of the work to adjust each application's user interface to the screen on which it is displayed. At the same time, the system provides APIs that allow you to control your application's UI for specific screen sizes and densities, in order to optimize your UI design for different screen configurations. For example, you might want a UI for tablets that's different from the UI for handsets.
This leads us to this question what are the best qualifiers to use from the list bellow:
A set of six generalized densities:
ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi
Or
sw600dp
sw720dp
w720dp
w1024dp
h720dp
h1024dp
or
A set of screen size :
small
normal
large
xlarge
I suggest to use
sw600dp
sw720dp
w720dp
w1024dp
h720dp
h1024dp
because with those you can control exactly how it looks, while making it easier for you quickly tell the values.
In addition, this is the more "modern" way of defining sizes.
From developer.android.com:
One of the difficulties developers had in pre-3.2 Android devices was
the "large" screen size bin, which encompasses the Dell Streak, the
original Galaxy Tab, and 7" tablets in general. However, many
applications may want to show different layouts for different devices
in this category (such as for 5" and 7" devices), even though they are
all considered to be "large" screens. That's why Android introduced
the "Smallest-width" qualifier (amongst others) in Android 3.2.
The Smallest-width qualifier allows you to target screens that have a
certain minimum width given in dp. For example, the typical 7" tablet
has a minimum width of 600 dp, so if you want your UI to have two
panes on those screens (but a single list on smaller screens), you can
use the same two layouts from the previous section for single and
two-pane layouts, but instead of the large size qualifier, use sw600dp
to indicate the two-pane layout is for screens on which the
smallest-width is 600 dp.
I am developing an Android app that downloads images from an S3 bucket and displays them full screen on the phone.
How many different densities should I create in the S3 bucket for each image, in order to include both phones and tablets?
What about for Apple devices (again, both phones and tablets)?
Note: I have read the Android Supporting Multiple Densities help page. I have also found similar questions on Stackoverflow, but they are 3-4 year old and new devices have popped up since then.
Thanks!
You could include one of them or all of them, that depends on how many densities you want your images to look good. The answer to this question depends on how much you care about it. If you don't care and just want it to work, add only one.
For Android you have:
ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi
And for iPhone:
normal
#2x
#3x
The Google Nexus 10 comes out shortly, and is the first device to use xxhdpi resources. It sports a display density of about 300 DPI (according to the Nexus 10 website and this calculator).
However, when I go to the Android documentation, it states:
ldpi : ~120dpi
mdpi : ~160dpi
hdpi : ~240dpi
xhdpi : ~320dpi
xxhdpi is not specified.
How come the Nexus 10's 300 DPI screen is xxhdpi instead of xhdpi, and what should be the approximate DPI of xxhdpi? Should we even worry about having new resources (aside from icons) for xxhdpi at this point, or should we just let the OS scale up xhdpi resources?
According to the post linked in the G+ resource:
The gorgeous screen on the Nexus 10 falls into the XHDPI density
bucket. On tablets, Launcher uses icons from one density bucket up
[0] to render them slightly larger. To ensure that your launcher icon
(arguably your apps most important asset) is crisp you need to add a
144*144px icon in the drawable-xxhdpi or drawable-480dpi folder.
So it looks like the xxhdpi is set for 480dpi. According to that, tablets use the assets from one dpi bucket higher than the one they're in for the launcher. The Nexus 10 being in bucket xhdpi will pull the launcher icon from the xxhdpi.
Source
Also, was not aware that tablets take resources from the asset bucket above their level. Noted.
xxhdpi was not specified before but now new devices S4, HTC one are surely comes inside xxhdpi .These device dpi are around 440. I do not know exact limit for xxhdpi See how to develop android application for xxhdpi device Samsung S4
I know this is late answer but as thing had change since the question asked
Note Google Nexus 10 need to add a 144*144px icon in the drawable-xxhdpi or drawable-480dpi folder.
The DPI of the screen of the Nexus 10 is ±300, which is in the unofficial xhdpi range of 280‑400.
Usually, devices use resources designed for their density. But there are exceptions, and exceptions might be added in the future.
The Nexus 10 uses xxhdpi resources when it comes to launcher icons.
The standard quantised DPI for xxhdpi is 480 (which means screens with a DPI somewhere in the range of 400‑560 are probably xxhdpi).
480 dpi is the standard QUANTIZED resolution for xxhdpi, it can vary something less (i.e.: 440 dpi) or more (i.e.: 520 dpi). Scale factor: 3x (3 * mdpi).
Now there's a higher resolution, xxxhdpi (640 dpi). Scale factor 4x (4 * mdpi).
Here's the source reference.
The resolution is 480 dpi, the launcher icon is 144*144px all is scaled 3x respect to mdpi (so called "base", "baseline" or "normal") sizes.
The newer android phones in the market like HTC one, Xperia Z etc have resolutions in the >480dpi range, putting them in the new xxhdpi class as well. The new assets might be useful for them too.
A set of four generalized sizes: small, normal, large, and xlarge
Note: Beginning with Android 3.2 (API level 13), these size groups are deprecated in favor of a new technique for managing screen sizes based on the available screen width. If you're developing for Android 3.2 and greater, see Declaring Tablet Layouts for Android 3.2 for more information.
A set of six generalized densities:
ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi
From developer.android.com : http://developer.android.com/guide/practices/screens_support.html
As per this PPI calculation tool, Google Nexus 10 has a display density of about 300 DPI...
However, Android documentation states that:
ldpi : ~120dpi
mdpi : ~160dpi
hdpi : ~240dpi
xhdpi : ~320dpi
xxhdpi is not specified.
I think we just let Android OS scale up xhdpi resources...
I'm gonna release my app, it's a 1.2Mb apk that includes about 120 icons in 4 different formats (ldpi, mdpi, hdpi, x-hdpi).
If I add xx-dpi and xxx-hdpi icons the apk grows bigger and loading time increases.
There are many entry-level devices out there with really loooow memory and I'd like my app to run everywhere.
Do I really need to add xx-hdpi?
And is there a real device that requires xxx-hdpi?
You shouldn't really need xxxhdpi. It was only introduced because of the way that launcher icons are scaled on the nexus 5's launcher
Edit
Back when I answered in Jan 2014, the Nexus 5 was the only device using xxxhdpi. Now many devices including the Nexus 6 and LG G3 use it. So it would be a good idea to include it in your app.
We had to add xxxhdpi to our app for the Nexus 6, LG G3, and Samsung Galaxy Note 4. There will be more xxxdhpi devices in the future.
You do not need xxxhpdi for most of your images. You only need xxxhdpi for your launcher icon. Please see http://developer.android.com/guide/practices/screens_support.html
You should not use the xxxhdpi qualifier for UI elements other than the launcher icon.
It's pretty clear in the above quote. In the example folder layout they give, they show all the densities for the res/drawable folders up to -xxhdpi, but then they show the res/mipmap folders up to -xxxhdpi. Here are more quotes:
xxxhdpi Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above.
The mipmap-xxxhdpi qualifier is necessary only to provide a launcher icon that can appear larger than usual on an xxhdpi device. You do not need to provide xxxhdpi assets for all your app's images.
You don't need ldpi, because Android downsizes hdpi to ldpi.
From https://developer.android.com/design/style/iconography.html
Note: Android also supports low-density (LDPI) screens, but you normally don't need to create custom assets at this size because Android effectively down-scales your HDPI assets by 1/2 to match the expected size.
From Android iconography documentation itself:
Some devices scale-up the launcher icon by as much as 25%. For example, if your highest density launcher icon image is already extra-extra-high density, the scaling process will make it appear less crisp. So you should provide a higher density launcher icon in the drawable-xxxhdpi directory, which the system uses instead of scaling up a smaller version of the icon.
Note: the drawable-xxxhdpi qualifier is necessary only to provide a launcher icon that can appear larger than usual on an xxhdpi device. You do not need to provide xxxhdpi assets for all your app's images.
more on: http://developer.android.com/design/style/iconography.html
I don't know if there is a device that requires xxx-hdpi, but xx-hdpi is not yet used very often. But the same goes for ldpi, almost no device still requires ldpi. If you just do mdpi, hdpi and xhdpi, it will be just fine. If a device requires something bigger or smaller android just scales it to the right size.
Heres what Android says about this:
Provide different bitmap drawables for different screen densities
By default, Android scales your bitmap drawables (.png, .jpg, and .gif
files) and Nine-Patch drawables (.9.png files) so that they render at
the appropriate physical size on each device. For example, if your
application provides bitmap drawables only for the baseline, medium
screen density (mdpi), then the system scales them up when on a
high-density screen, and scales them down when on a low-density
screen. This scaling can cause artifacts in the bitmaps. To ensure
your bitmaps look their best, you should include alternative versions
at different resolutions for different screen densities. The
configuration qualifiers you can use for density-specific resources
are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high).
For example, bitmaps for high-density screens should go in
drawable-hdpi/.
You can find the documentation here:
https://developer.android.com/guide/practices/screens_support.html
Hope this helps
I think you should focus on the most popular screen densities, which are hdpi, xhdpi, and xxhdpi. See this link for the current worldwide average distribution of each density.
Forget Everything & make it Simple !
Just store highest resolution images in only one folder. Either in drawable-hdpi, & delete other images from the rest drawable folders.
I have tested it in various devices & it works like a charm...
Extract from Android Developer Guide link above:
320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
480dp: a tweener tablet like the Streak (480x800 mdpi).
600dp: a 7” tablet (600x1024 mdpi).
720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc)
So i got graphics(images) at resolution 320 pixels per inch from designer in these dimension only
480x800 hdpi
720x1280 mdpi
800x1280 mdpi
I am confused which size of images should be placed in mdpi folder, hdpi folder and xhdpi folder. I want to make one application which can work on most android phones and tablets ?
You can create different graphic objects for use at different pixel densities. Android treats mdpi (160 pixels/inch) as the base density. So for mdpi devices, 1 dp = 1 pixel. At higher densities, there are more pixels per inch (240 for hdpi, 320 for xhdpi). Android attempts to make graphic images occupy the same physical dimensions on the screen regardless of the device pixel density. So if all it finds is an mdpi resource, and the device is hdpi, it will scale the graphic by 240/160 = 150%, and it will double the size of the graphic for xhdpi.
If you don't want this automatic scaling (which can make graphics look poor), you can simply supply your own version of graphic resources for use at higher densities. These graphics should be of the same size that Android would scale an mdpi resource.
Note that the pixels/inch that was stored in the image file has nothing to do with this. It's all based on where you put the graphics files in the resources directory for your project. Any graphics placed in res/drawable are assumed to be properly sized for mdpi displays, as are graphics placed in res/drawable-mdpi. Image files that it finds in res/drawable-hdpi are assumed to be properly sized for hdpi displays, etc. When your program runs on a particular device, Android will first look for a graphic that matches the display density of that device. If it does not find one but instead finds one for a different density, it will use that and automatically scale the image based on the above rules.
When you request a resource for which you provide alternatives, Android selects which alternative resource to use at runtime, depending on the current device configuration. To demonstrate how Android selects an alternative resource, assume the following drawable directories each contain different versions of the same images:
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/
And assume the following is the device configuration:
Locale = en-GB
Screen orientation = port
Screen pixel density = hdpi
Touchscreen type = notouch
Primary text input method = 12key
By comparing the device configuration to the available alternative resources, Android selects drawables from drawable-en-port.
The system arrives at its decision for which resources to use with the following logic:
Ref : How Android Finds the Best-matching Resource
Other References : Density independence , Providing Alternative Resources and Best Practices
And I will say that you should read complete page Supporting Multiple Screens, I don't think nothing will be better documentation than it...
I'm confused myself with all the screen size fragmentation but the basics are:
1. You need to create various folders under layouts to work with your images
2. Images will exist in the drawables folders also under various folders.
3. You should have a basic /layout and /drawable folder to accompany non-specific folders
4. Work from xhdpi then scale images down!
Examples for specific screen folders:
/layout-hdpi
/layout-xhdpi
/drawable-hdpi
/drawable-xhdpi
From what I know:
480 x 800 is hdpi (older phones eg S2, HTC Desire etc)
720 x 1280 is xhdpi (new phones eg S3, Galaxy Nexus etc)
Basically, Depending on the phone, android will grab resources from the necessary folder and if there is none then it will grab from the main '\layout' or '\drawable' folder. For example, the app running on a Galaxy Nexus will grab resources from '\layout-xhdpi' if the folder exists.
yes, you can make one app, but was need creating folders: /res/drawable, /res/drawable-mdpi, /res/drawable-hdpi and add content for all screen sizes