The designer of our company wants me to give him the resolutions of Android tablets so he will start designing a new app.
I know there are a lot of different resolutions (listed here: Android Tablets computers).
I also know about the division of Android to the different dpi's (ldpi, mdpi, ...).
My questions :
What should I tell the designer? He obviously not supposed to make a version for each resolution. Besides, some of the resolutions listed in the link above are in the same dpi, so which one should I choose?
Considering the fact the app is going to run only on tablets, what are the dpi classes I should use? Only hdpi and xhdpi? Or should I still use all 4 classes and limit the <supports-screens> tag in the manifest?
Is there a resolution that represent each of the dpi classes that I
should stick to?
I've done some reading about 9-patch. What's the point of using it if I still need to deliver a version for each dpi??
Thanks in advance!
The questions contain so much information.
1 Try to read the article and the references in it.
http://www.androiduipatterns.com/2011/11/design-patterns-for-responsive-android.html
You could also have a look at the web site for android design.
http://developer.android.com/design/index.html
In one word, designing for android tablets is more like designing websites. You cannot just design for one resolution.
2 Considering you are developing for tablets, it's necessary to support mdpi and hdpi. If the apps could be installed on phones, maybe xhdpi is also needed. It's not very strict.
3 dpi(dots per inch) = pixels per inch. So dpi is like density, it do not have strict relationship with resolution. But there is still a sheet could help you, try to find it in the following page
http://developer.android.com/guide/practices/screens_support.html
4 9-patch resource is very useful. With which a small png could stretch to any size without distortion. And it could also help to reduce the size of your resources.
In most situation, you do not have to make 9-patch for each dpi, since it could stretch to any size you want. But if the 9-patch png contain some information itself, like min height and padding, it's necessary to make different versions.
Here is what I would do:
See what combinations you have. There are mostly 3 resolutions for tablets (1280x800, 1024x600, 800x480) and mostly 2 densities (hdpi and mdpi). That is at most 6 versions. Select a few matching your most logical targets (I would choose xlarge mdpi (9" 1280x800), large mdpi (7" 1024x600) and normal-hdpi (4-5" 800x480) and design on these.
Some graphical elements don't need to be designed for each combinations, like backgrounds, may be buttons… Here comes the 9-patch. To be put in drawable-nodpi folder. One resource fits all.
Do one version first on you major target, then see how it fits on the other targets, and consider adjustments from there.
Use ScrollViews if you don't want to position every item pixel-perfectly on each device.
Related
I'm quite new to Android development, and this time, not a programming question on SO, but rather a question about image design on Android.
I'm a bit lost in the densities of the devices.
The goal of my application is to support as much as possible devices.
Now, I own a Nexus 5 device, of which I know that it's a xxhdpi screen with a resolution of 1920 x 1080.
Since it's an xxhdpi device, the scaling factor is 3, so for simplicity, I divide it by 3 which given me the following resolution on mdpi and on mdpi 1px is equal to 1dp.
Therefore, my Android device is 360 x 640dp.
So, I create a new document in InkScape or Illustrator, whatever you want and create my design based on that particular resolution.
Now, I know that on my device the navigation bar is 48dp and the and the status bar is 25dp, which gives me a content area of 360 x 567 dp.
I've found the information about the screens here: http://www.emirweb.com/ScreenDeviceStatistics.php
What I see on this page is that other devices have another status bar height, another action bar height and that the DP's doesn't equal accross various devices.
So, the question is, how can I design a screen of which I'm sure that it will support all the available screens on the market?
Kind regards
Read this carefully
Supporting multiple screens
Edit :
Create designs for phones of hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi densities and test them on emulator.
Extend designs for 7" tablet and test them on emulator.
Move on to 10" tablets.
Use available online tools to test your design on a variety of screens and create specific folders using "New Size Qualifiers" as mentioned in the doc above to support those devices in which you don't see your design properly
Use Android Asset Studio to scale your icons for different screen densities. For backgrounds, create 9-patch version of your images from the same tool. They will also be generated for different screen densities
I think there's no need to care about the height of the ActionBar's height and all. If you put the images of multiple resolution in the respective drawable folders that's enough. e.g. Same image with different resolutions has to be put in drawable-hdpi, drawable-mdpi, drawable-xhdpi etc. That's all you need to do. Android will automatically choose the image from these folder according to device's screen resolution.
I agree #geekoraul that you'll need to read Supporting Multiple Screens first to give you that foundation.
The take away from it is that dp are Android's way of defining a predictable metric to bridge across multiple device densities. The main goal is to scale them correctly so that it still looks consistent.
A basic workflow would be, select a target density (usually hdpi/xhdpi), create your assets, and use tools to create appropriate resources for the other densities.
Some tools are,
Zeplin - You can create you UI and all assets/resources will be generated for you (dimensions, colours, spacing, drawables etc.)
Android Asset Studio - Generates assets like icons, themes and styles
I'm required to design an apps for android.
And after some reading, I find out android device are divided into few categories in term of resolution, like
small screen
normal screen
large screen
extra large screen
but in different density.
So lets say, now I need to come out a design for normal screen, what resolution that I should use for the "look & feel" of the apps UI.
From the reading, I know android apps are use dp instead of px. So, is it means I have to convert few specific screen size to dp before I start to design ?
Or I just simply target a common resolution for normal screen size like 320x480, provided I will have few set drawable in different density ?
Please correct me if I had mistaken it.
Thank you
Good question, so far we have 5 screen densities :
xxhdpi,xhdpi,hdpi,mdpi,ldpi , now if you have an image resource you will need to create 5 copies of it, its always recommended to start by the xxhdpi till you reach to the smallest,
however you can use online calculators that will calculate the PX and DP for all the densities, i recommend these two tools android developer toolbox and developers tools, and with developers tools you can test the colors, and how are they going to look like in the screen in HEX decimal.
Yes it is true android has following types of devices
LDPI
MDPI
HDPI
XHDPI
http://developer.android.com/guide/practices/screens_support.html
this link gives you all the description
and ya you have to create icons and images supporting to all the devices resolution wise.
There are various devices with various screen sizes.
Usually, they are mentioned as LDPI, MDPI, HDPI or XHDPI devices.
Although, in coding there are many things to be kept in mind so that you achieve a good uniform design in all your devices !
Refer to this link. It is always good to follow official sites, rather than other tutorials out there. Make a habit of using relativelayout !
Also in the link you can explore many things to get the knowledge of designing in Android.
My application is supporting 3 type of density ldpi (120),mdpi(160),hdpi(320) and for that we have three folder for resources (ldpi,mdpi,hdpi).
But my problem is occurring in HTC sensation XE (540x960) having density ~256 dpi.and my resources is stretched.
In manifest file
<supports-screens android:xlargeScreens="false" />
means i am not supporting for xlarge screen so does 540x960 come in high density??.
How can i overcome this problem???
Android Multiscreen Support issue says "You can also use a combination of density and size qualifiers but that still leaves some room for two different resolutions falling into the same bucket."
What should be the name of drawble folder for this kind of resolution??
or is there any other way to short out this issue.
EDIT : My problem is not with layout, my problem 540x960 come in HDPI but my hdpi drawbles are designed related to 480x800
Help me..
Thanks in advance..
you can use below combination for Layout for HTC sensation XE (540x960) :
res/layout-w540dp-h960dp/layout.xml
this will use for pick layout for this device and for drawable it will pick image from hdpi because in this developer site 256 dp come in range of hdpi . http://developer.android.com/guide/practices/screens_support.html.
hope this will help you.
Your problem is that you have designed your bitmaps for a particular screen size rather than screen density.
Plainly put, you should not do that. There are a huge number of different form factors and screen sizes out there, and you cannot hope to have graphics sized for all of them. So you fix this issue for 540x960 screens... what then with your users who are on 480x854 displays (most hdpi motorola devices)? Will you include different graphics for 1024x720 and 1280x720 displays if you're developing for that? What about 1280x800?
Granted - it can be a pain to deal with these issues, but that is the price we pay for diversity of devices. And Google has provided a fair amount of powerful tools at our disposal to deal with this.
When you are designing an app for Android, you need to think of the design as if you were designing a website - not a desktop (or IOS) program. All (or most) of the tricks that you use for designing a website also apply here - plus you have the density-awareness and 9.patch tools.
And if you really cannot adjust your graphics/layout to the screen without messing it up, you can always center the layout on the display (or align it left or right, depending on what you think looks best).
Edit:
As I mention above, the core to flexible UI design in Android is to think of your app like a web site. Roman Nurik has an article discussing this on the Android blog.
http://android-developers.blogspot.com/2011/09/thinking-like-web-designer.html
Apart from that, it is mostly covered by the Android site, etc.
http://developer.android.com/training/multiscreen/index.html
Using the right layouts and 9-patch images (not always - sometimes static images are better) will allow you to create designs that look good on all phones. But you have to realize that - like a website designed in a browser - you do not and can not have 100% control over how things are displayed on every single device. What you need to achieve is that it is still accessible and good-looking even when displayed on a device that you did not anticipate beforehand.
You have to name the drawable as per your pixel density and the screen size. The calculation is here...
dpi = sqrt (540^2+960^2) / 4.3"(Device size) = ~256 dp = px / (dpi / 160) = 540 / (dpi / 160) = 330
The drawable will be named as drawable-sw330dp. I have tested this. And this works good. No problem with other drawables either. Layout Will be layout-sw330dp
Or you can try this by drawable-sw540p. I haven't tested it yet. But I guess it will work good. Layout Will be layout-sw540p
My application is supporting 3 type of density ldpi (120),mdpi(160),hdpi(320) and for that we have three folder for resources (ldpi,mdpi,hdpi).
But my problem is occurring in HTC sensation XE (540x960) having density ~256 dpi.and my resources is stretched.
In manifest file
<supports-screens android:xlargeScreens="false" />
means i am not supporting for xlarge screen so does 540x960 come in high density??.
How can i overcome this problem???
Android Multiscreen Support issue says "You can also use a combination of density and size qualifiers but that still leaves some room for two different resolutions falling into the same bucket."
What should be the name of drawble folder for this kind of resolution??
or is there any other way to short out this issue.
EDIT : My problem is not with layout, my problem 540x960 come in HDPI but my hdpi drawbles are designed related to 480x800
Help me..
Thanks in advance..
you can use below combination for Layout for HTC sensation XE (540x960) :
res/layout-w540dp-h960dp/layout.xml
this will use for pick layout for this device and for drawable it will pick image from hdpi because in this developer site 256 dp come in range of hdpi . http://developer.android.com/guide/practices/screens_support.html.
hope this will help you.
Your problem is that you have designed your bitmaps for a particular screen size rather than screen density.
Plainly put, you should not do that. There are a huge number of different form factors and screen sizes out there, and you cannot hope to have graphics sized for all of them. So you fix this issue for 540x960 screens... what then with your users who are on 480x854 displays (most hdpi motorola devices)? Will you include different graphics for 1024x720 and 1280x720 displays if you're developing for that? What about 1280x800?
Granted - it can be a pain to deal with these issues, but that is the price we pay for diversity of devices. And Google has provided a fair amount of powerful tools at our disposal to deal with this.
When you are designing an app for Android, you need to think of the design as if you were designing a website - not a desktop (or IOS) program. All (or most) of the tricks that you use for designing a website also apply here - plus you have the density-awareness and 9.patch tools.
And if you really cannot adjust your graphics/layout to the screen without messing it up, you can always center the layout on the display (or align it left or right, depending on what you think looks best).
Edit:
As I mention above, the core to flexible UI design in Android is to think of your app like a web site. Roman Nurik has an article discussing this on the Android blog.
http://android-developers.blogspot.com/2011/09/thinking-like-web-designer.html
Apart from that, it is mostly covered by the Android site, etc.
http://developer.android.com/training/multiscreen/index.html
Using the right layouts and 9-patch images (not always - sometimes static images are better) will allow you to create designs that look good on all phones. But you have to realize that - like a website designed in a browser - you do not and can not have 100% control over how things are displayed on every single device. What you need to achieve is that it is still accessible and good-looking even when displayed on a device that you did not anticipate beforehand.
You have to name the drawable as per your pixel density and the screen size. The calculation is here...
dpi = sqrt (540^2+960^2) / 4.3"(Device size) = ~256 dp = px / (dpi / 160) = 540 / (dpi / 160) = 330
The drawable will be named as drawable-sw330dp. I have tested this. And this works good. No problem with other drawables either. Layout Will be layout-sw330dp
Or you can try this by drawable-sw540p. I haven't tested it yet. But I guess it will work good. Layout Will be layout-sw540p
Are there any tools out there that can convert my dpi units for a baseline densitity into another?
When I define my layout-files I design for a screen with 320x480 dpi units. But then it doesn't fit right on small and large devices.
But since we know the baseline dpi's of ldpi, mdpi, hdpi and xhdpi, why isn't there a tool to just take my width/height definitions in the files and scale them to these different densities, given a default baseline. It should then return the missing layout files, where they would scale right on to these other densities.
It seems straight forward and would save developers tons of time, does anyone know of an existing program to do this?
I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Basically, defining your layouts in dp units is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets". This tool will allow your layouts to be converted into fitting these density buckets.
I hope the blog, tool and answer will help others, I know it felt good to have my app work perfectly on a tablet with the press of a button.
Your question doesn't make any sense. what you're asking for is exactly what Android does.
If you put an image into a folder (like xhdpi) it is automatically scaled for all different device densities.
If you create a layout for a particular class of device, then the correct layout is used for the correct device.
I would advise against designing for specific resolutions of screen - there are too many. Group screens into buckets - e.g. "Phones" and "Tablets", or "Small Phones", "Phones", "Large Screen Devices" - specify criteria, and build layouts for each category. It's a fool's game to build layouts for every screen resolution, there are hundreds of Android devices.