Have read the doc which is lengthy and still not clear.
Assuming I have an image with size = 120px * 80px, under the default mdpi/160 density, I also need to prepare
ldpi = 90 * 60
hdpi = 180 * 120
xhdpi = 240 * 160
Are the calculation above right? Assume I only have a single layout, so what I need is to prepare the images and place them under the corresponding drawable folders, right?
Thanks
The image sizes you have calculated are correct based on the formula from Google:
pixels = dp * (density / 160)
Knowing the target densities of the various DPIs will allow us to calculate final image sizes:
ldpi = 120 DPI
mdpi = 160 DPI
hdpi = 240 DPI
xhdpi = 320 DPI
Here would be the correct calculation for width, starting with a medium density asset at 120 pixels wide:
ldpi (120 DPI) = 120 * (120 / 160) == 90
mdpi (160 DPI) = 120 * (160 / 160) == 120
hdpi (240 DPI) = 120 * (240 / 160) == 180
xhdpi (320 DPI) = 120 * (320 / 160) == 240
Here would be the correct calculation for height, starting with a medium density asset at 80 pixels tall:
ldpi (120 DPI) = 80 * (120 / 160) == 60
mdpi (160 DPI) = 80 * (160 / 160) == 80
hdpi (240 DPI) = 80 * (240 / 160) == 120
xhdpi (320 DPI) = 80 * (320 / 160) == 160
Making your final images:
ldpi = 90 x 60
mdpi = 120 x 80
hdpi = 180 x 120
xhdpi = 240 x 160
Create the following folders under res/ if they don't already exist and drop the correct assets in:
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
Yes, those are the correct sizes.
Yes, just put your various versions in the res/drawable-ldpi, -mdpi, -hdpi, and -xhdpi
folders and you're done.
Depending on your image -- specifically whether it still looks good scaled down automatically -- you could just provide hdpi and xhdpi versions and Android will automatically scale them at run-time for ldpi and mdpi respectively.
Edit: Ok, the calculations are correct. According to the formula px = dp * (dpi / 160) from http://developer.android.com/guide/practices/screens_support.html, where pixels on mdpi = dp.
And here is some additional information:
Dpi tells you how much dots (pixels) are in 1 inch. But it doesn't tell you how much pixels the screen has in total. So, you can have a device, which has, let's say, 400 pixels width and height and the screen has a diagonal of 5 inches. With this you get the dpi value. (Using http://members.ping.de/~sven/dpi.html for example).
Now you have another, device, which has the same dpi value, but has a higher resolution and it's bigger, for example, 1000 x 1000 pixels and also large diagonale.
If you created an image for the first case, of let's say 200 x 200 pixels, it will occupy half of the screen, but in the second case it will be only 1/5 of the screen, although both devices having same dpi, and that's probably not what you want to do.
What I usually do is orientate on the resolution of devices which usually have this dpi (like hdpi -> 480x800, xhdpi -> 720x1280, etc.), and in the layout use dip in combination with scaleType "fitStart", "center", etc. to keep the images proportional. So I put images with different resolutions in ldpi, hdpi and xhdpi folders but I don't use a formula.
There's also the possibility to use screen sizes in combination/instead with dpi, in the case it's necessary:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
This works with additional folders like dpi.
BTW. Currently it's possible to put different versions of the app in Google Play for different resolutions / screens, so the user doesn't have to download all the files (huge app size, long time downloading, etc.), only the ones necessary for the device.
the scaling ratio of images for the ldpi,mdpi,hdpi,xhdpi is 3:4:6:8 but u think once
1)if there is mobile with ldpi small screen is there then it will be suitable for the screen.
2)if there is mobile with ldpi medium screen is there then the images appear little bit smaller
3)2)if there is mobile with ldpi large screen is there then the images appear smaller.
like this for all the mdpi,hdpi and xhdpi screens.
If there is chance of using nine patch images in your app try those images.
Yes, the calculations on the sizes that you have made are correct.
Now, you need to put them in the respective folders of ldpi , mdpi , hdpi and xhdpi in res/drawable of your project.
Your calculations are correct if your goal is for your image to have (approximately) the same physical size on devices of different pixel densities. The images would go in directories
res/drawable-ldpi
res/drawable-mdpi
res/drawable-hdpi
res/drawable-xhdpi
Android classifies the device into one of these general density classes (which are 120dpi, 160dpi, 240dpi, and 320dpi) and scales images according to those ratios. Since physical devices aren't necessarily exactly one of these densities, the physical size of the image can still vary slightly from device to device. Note that if you don't supply an image for a particular density, Android will generate one by scaling the default/mdpi image. Generally, the result isn't quite to the quality that you would get by providing your own image.
If you run Android Lint, it will tell you about any missing resources (such as forgetting to include a xhdpi image) and it will also tell you if your scaling calculations are substantially off. It's a nice feature to know about.
Note that this entire image scaling approach has nothing to do with screen size, only pixel density. You can also have resource folders for different screen sizes or even for different screen size/density combinations.
However, if you want an image that will display at 120 x 80 pixels regardless of the screen density, the above scheme won't work. Instead, you should put the image in the folder
res/drawable-nodpi
Android won't scale images that it retrieves from there. The result is that your image would be about 3/4" x 1/2" on an mdpi device, 1" x 3/4" on an ldpi device, 3/8" x 1/4" on an xhdpi device, etc.
You can use this to calculate equivalent size in pixels if you know the screen density(dpi) of the device:
equivalentPixels = sizeInDP*(screenDensity/160)
where sizeinDP is the size of widget where you want to display the image. Calculate the sizes in pixels for various screen densities and put them under respective folders.
So if you have an ImageView of size 300dp X 200dp (Width X Height), and the screen density is 320dpi, the image size in pixels should be:
Width = 300*(320/160) = 600px
Height = 200*(320/160) = 400px
Hope this helps!
Related
I am developing an android app that run on every size screen. For this I have created folder drawable, drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi. And for layouts creating folders layout, layout-small, layout-normal, layout-large and layout-xlarge. For values I am creating values, values-small, values-normal, values-large, values-xlarge. This is first time I am working on multiple screen support. And on Internet so many links that explain multiple screen support in different ways. So I have few questions.
There is need of any other folder than these folders?
Am I doing right?
How to convert resolution from ppi to dpi?
And the important thing I am creating app only in portrait mode.
Edit-
First I am creating values folders with ldpi, mdpi, hdpi. But devices belongs to same dpi but having different sizes creating problem. So I decide to create folders like above.
Dp are Density independant pixels and are used to generalise the number of pixels a screen has. These are generalised figures taken from
http://developer.android.com/guide/practices/screens_support.html
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Generalised Dpi values for screens:
ldpi Resources for low-density (ldpi) screens (~120dpi)
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
Therefore generalised size of your resources (assuming they are full screen):
ldpi
Vertical = 426 * 120 / 160 = 319.5px
Horizontal = 320 * 120 / 160 = 240px
mdpi
Vertical = 470 * 160 / 160 = 470px
Horizontal = 320 * 160 / 160 = 320px
hdpi
Vertical = 640 * 240 / 160 = 960px
Horizontal = 480 * 240 / 160 = 720px
Edit - adding xhdpi as they are becoming more popular
xhdpi
Vertical = 960 * 320 / 160 = 1920px
Horizontal = 720 * 320 / 160 = 1440px
Keep it simple silly
You are already aware about the usage of different folders to provide alternative resources and images to the application.so just go with it.add it to your application.
and now the next step is,
Just design your layout files and look at its Graphical Layout for Preview All Screen Sizes.
Now,Check->Analyse->Change if required
And you're done :-)
values-w360dp
values-w360dp-xhdpi
values-w360dp-xxhdpi
drawable-w360dp
for better reference , read this thread.
http://developer.android.com/guide/practices/screens_support.html
public static int convertDpToPx(int dp,Context context)
{
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
return (int)px;
}
public static int convertPxoDp (int pixel,Context context)
{
float density = context.getResources().getDisplayMetrics().density;
int minHeight = (int) (pixel*density + 0.5f);
return minHeight;
}
There is need of any other folder than these folders?
There is no "need" to put any of the extra folders actually. Create them only if you need them and only if you want to provide a different layout/resources for the specific device. For example if you have a list view whose items open a detail view (activity) on a phone, you might want a separate layout for tablets(xlarge for example) that has only 1 activity with 2 fragments side by side.
Am I doing right?
Can you test it now? Do you have any problems running your app on different devices?
How to convert resolution from ppi to dpi?
Can't give you an exact formula, but you can find more info about DPI and PPI in wikipedia.
In iOS preparing graphics is simple. There are either a normal image (height x width) or a retina image which is #2x (2 times height x 2 times width).
However, since I'm new to Android, I see a ton of drawable-* folders in Eclipse where the * can be "hdpi" or "ldpi" or "mdpi" or "xhdpi" or "xxhdpi". Can someone very clearly and simply list for me what I must do to satisfy each of the display possibilities so my images will look right in each instance? I'm envisioning an answer will be a bullet list with each "*" listed and a sub-bullet list including the things that must be done.
I'd also really enjoy an answer that would start with the highest density and greatest dimension image and working down since I'll be creating in Photoshop and will be reducing quality from a master image.
i got this off of this site a while back, it still comes in handy
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Generalised Dpi values for screens:
ldpi Resources for low-density (ldpi) screens (~120dpi)
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
Therefore generalised size of your resources (assuming they are full screen):
ldpi
Vertical = 426 * 120 / 160 = 319.5px
Horizontal = 320 * 120 / 160 = 240px
mdpi
Vertical = 470 * 160 / 160 = 470px
Horizontal = 320 * 160 / 160 = 320px
hdpi
Vertical = 640 * 240 / 160 = 960px
Horizontal = 480 * 240 / 160 = 720px
xhdpi
Vertical = 960 * 320 / 160 = 1920px
Horizontal = 720 * 320 / 160 = 1440px
px = dp*dpi/160
In Android Studio just go to File -> New -> Image Asset and create your images right out of the IDE.
On Android we usually handle image sizes in units of "dp" or "dip" which stands for device independent pixel. 1 dip = 1 pixel, on a mdpi screen. There are loads of devices out there with different screen densities, not just normal and retina, so there are multiple DPI buckets a device's screen may fall into:
ldpi (low dpi): around 120 dpi
mdpi (medium dpi): around 160 dpi
hdpi (high dpi): around 240 dpi
xhdpi (xtra high dpi): around 320 dpi
Note that these are buckets, so a device with a 170 dpi screen will count as an mdpi device.
Let's say that you have a vector based image in PS and you need to create an image resource for Android and you'd like to support all these screen densities. Let's say that image needs to be 100x100 dip large. So you create a 100x100 pixel version for mdpi, a 150x150 pixel version for hdpi, 200x200 for xhdpi, and 75x75 for ldpi. You can think of "mdpi - xhdpi" on Android as "normal - retina" on iOS.
As for the larges image size that you can use, I really can't say. There's no hard limit as far as I know, but the device obviously won't be able to load a 20000x20000 bitmap into memory without downsampling because of heap limits.
There is an online tool for that Android Asset Studio
And also there is File|New|Android Icon Set in Eclipse
I have two images I want to display within my app.
The first image is to be full screen (as a background for the app). I have read the 'Supporting Multiple Screens' article on developers.android.com multiple times but, I am still at a loss as to what size the image should be for each dpi category. I have attempted what I thought to be the correct sizes but, when viewing the app on larger screens (ie. 1280x800#mdpi), I find that the background appears pixelated. This is understandable since my image for mpdi is 320x480px. How can I correct this? What size image should I use?
The second image is a button. Currently I have the image at a very high resolution but, the app scales this down so it looks fine. However, I do not wish for it to be this way when the app is released. For this image, I need to know what size in pixels the image should be. Currently, it is 60dp x 50dp within the app. What would this convert to in pixels? I know to use the formula px = dp * (dpi / 160) but, what would the dpi be in this case? I cannot use a NinePatch PNG for this image.
I do not understand what size (in pixels) to make my images to begin with so that they appear correctly on Android devices. Does dp = px if you are on a mdpi device?
UPDATE:
After hours of banging my head around, I have came up with the following:
drawable-xlarge-xhdpi 2560x1920px
drawable-large-xhdpi 1920x1440px
drawable-normal-xhdpi 1280x960px
drawable-xlarge-hdpi 1920x1440px
drawable-large-hdpi 1440x1080px
drawable-normal-hdpi 960x720px
drawable-xlarge-mdpi 1280x960px
drawable-large-mdpi 960x720px
drawable-normal-mdpi 640x480px
drawable-xlarge-ldpi 960x720px
drawable-large-ldpi 720x540px
drawable-normal-ldpi 480x360px
These will be my drawable directories and the maximum resolution I expect for each one (I've decided not to support small screens). Therefore, my images will be these sizes.
It looks great on my phone. I see no artifacts. It also appears to work on the emulator for a screen with 1280x800#mpdi so hopefully it will work on all devices...
Does anyone see a problem with doing it this way? Is there a better way to do this? Do my calculations look correct?
here you go, i got it off here, im just passing it along
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Generalised Dpi values for screens:
ldpi Resources for low-density (ldpi) screens (~120dpi)
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
Therefore generalised size of your resources (assuming they are full screen):
ldpi
Vertical = 426 * 120 / 160 = 319.5px
Horizontal = 320 * 120 / 160 = 240px
mdpi
Vertical = 470 * 160 / 160 = 470px
Horizontal = 320 * 160 / 160 = 320px
hdpi
Vertical = 640 * 240 / 160 = 960px
Horizontal = 480 * 240 / 160 = 720px
xhdpi
Vertical = 960 * 320 / 160 = 1920px
Horizontal = 720 * 320 / 160 = 1440px
px = dp*dpi/160
Use method in JRowan's answer and you can add desired images for "special" screens to res folders like here:
res/drawable-xlarge-mdpi/background.png
or
res/drawable-sw600dp-mdpi/background.png
...
I've been reading the following: http://developer.android.com/guide/practices/screens_support.html
It's about the folders res-long-land-hdpi, res-notlong-land-dpi, res-notlong-port-ldpi etc. And what they actually mean and when they should be used.
The article also says the following:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
I'm developing for a device that is: 1280 x 720 and one that is 480 x 800
My app will only be available in portrait mode.
So that means i have to put images in the res-long-port-hdpi folder for the first device, and in res-notlong-port-ldpi for the second device right?
Then the next problem i have with this is. I have an image which is 332 x 226 pixels. This looks fine on the first (xlarge) device. But to what size do i have to rescale this image so that i can place it in the (lower resolution) res-xx-xx-ldpi folder?
I'm not sure how to calculate the new sizes for the different folders.
The size ratios should match the nominal pixel densities as Android defines them:
ldpi - 120 pixels/inch; dpi scale = .75 (4 dpi = 3 pixels)
mdpi - 160 pixels/inch; dpi scale = 1 (1 dpi = 1 pixel)
hdpi - 240 pixels/inch; dpi scale = 1.5 (2 dpi = 3 pixels)
xhdpi - 320 pixels/inch; dpi scale = 2 (1 dpi = 2 pixels)
So if you make your xhdpi images twice the size (in pixels) of the mdpi resources, they will be the same dpi, meaning they will be the same physical size on their respective screens.
I have started making graphics for my Android app using Adobe Photoshop. But I am unable to proceed, as the resolution in Photoshop is set in pixels per inch where as the official Google documentation says Android will require images set in dpi. I have searched the web for the conversion between the two but never ended up with any proper formula.
I know that the Android documentation describes the relation as px = dp*dpi/160. But my problem is that if I know dpi where do I get the value of dp to be used in this calculation? Or is there any assumption about the value of dp? I am confused.
Dp are Density independant pixels and are used to generalise the number of pixels a screen has. These are generalised figures taken from http://developer.android.com/guide/practices/screens_support.html
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Generalised Dpi values for screens:
ldpi Resources for low-density (ldpi) screens (~120dpi)
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
Therefore generalised size of your resources (assuming they are full screen):
ldpi
Vertical = 426 * 120 / 160 = 319.5px
Horizontal = 320 * 120 / 160 = 240px
mdpi
Vertical = 470 * 160 / 160 = 470px
Horizontal = 320 * 160 / 160 = 320px
hdpi
Vertical = 640 * 240 / 160 = 960px
Horizontal = 480 * 240 / 160 = 720px
Edit - adding xhdpi as they are becoming more popular
xhdpi
Vertical = 960 * 320 / 160 = 1920px
Horizontal = 720 * 320 / 160 = 1440px
These values should be suitable for most xhdpi screens such as TVs and the Nexus 4, including the Nexus 10 (assuming they don't create a new category for this as it is 25k x 16k, don't know as I haven't got hands on one yet).
/Edit
If you use these sizes your images will look great on any screen. Be sure to define sizes in code in dp however, Android will handle the conversion described above on its own.
I don't agree with answer by Michael Allen because the resulting resolutions for ldpi, mdpi, hdpi and xdpi doesn't satisfy the 3:4:6:8 scaling ratios for alternative bitmaps mentioned in the google docs here under 'Alternative Drawables'
http://developer.android.com/guide/practices/screens_support.html#testing
Therefore I would suggest that you take the baseline example that has a minimum size of
470 x 320 dp now using formula from same documentation we calculate full screen resolution for baseline screen size
px = dp * (dpi/160); for baseline px = dp * (160/160) = dp * 1
so px = dp. This means the full screen size for our baseline config. in pixels would be
470 X 320 px (mdpi)
now to follow the 3:4:6:8 scaling ratios for alternative drawables sizes for ldpi, hdpi and xhdpi we need to derive the unit values from mdpi. i.e.
470/4 = 117.5
320/4 = 80
divide by 4 because scaling ratio for mdpi is 4, scaling ratios for ldpi, hdpi and xhdpi are 3,6 and 8 respectively. now just multiply the unit results 117.5 and 80 with these scaling factors
ldpi
117.5 * 3 = 352.5
80 * 3 = 240
mdpi
117.5 * 4 = 470
80 * 4 = 320
hdpi
117.5 * 6 = 705
80 * 6 = 480
xhdpi
117.5 * 8 = 940
80 * 8 = 640
These sizes are now in perfect 3:4:6:8 scaling ratios.
Yes, Dp (Density independant pixels) is all Photoshop will care about. It should not consider what the density of the pixels will be. That image of a super high number of pixels may be put on a super small high definition UI button for all it cares about. Or you may have few pixels for a retro style A0 poster of Tetris. This is because they can get scaled. Few pixels are scaled up for the large area, and many pixels scaled down for the small area on a screen.
So pick your target link to sizes screen size and use that in photoshop. (also check out who uses what... pie chart of sizes used)
For the intuition this site helped me link to blog page:
At run time, the platform transparently handles any scaling of the dp units needed, based on the actual density of the screen in use.
(the platform does the scaling- the density ratio handling is done by Android; not you) and this is extremely relevant to the UI:
Using dp units to define your application’s UI is highly recommended, as a way of ensuring proper display of your UI on different screens.
Because you want the UI elements to appear the same on all devices so it will do scaling based on the number of pixels it computes in that formula. And if the dp is scaled in a way so that it becomes too spare or dense, well that won't look good.
As the resolution in Photoshop is set in pixels per inch where as the official Google documentation says Android will require images set in dpi.
The same on all devices so it will do scaling based on the number of pixels it computes in that formula.