As we know Android coming with various device which having different
Features, Resolution, and Screen-size so while developing an Application which support
multiple (small and big) screen there is an obstacle of size and layout.
This leads to different combinations of screen sizes, resolutions, and DPIs and creates quite a challenge when designing and developing for Android devices. While some other Manufacturer (non Android) have different resolutions and DPI, they share the same screen size and the resolutions follow the same aspect ratio. Therefore, an image can be created to fit the non Android devices.
My question is that is there a proper flow or architecture that one should follow to meet the requirement?
Remember we do have Tablets of different Size and Resolution.
I'm aware that Android Developer contains this information but my view is from implementation.
From my knowledge what I understood is that for designing Android graphics even Programmer must know the designing concept.
Finally created a structure which handle layouts and icon for multiple screen.
Android generalises device displays into categories based on two parameters:
Screen size, the physical size of the display (measured diagonally)
Screen density, the physical pixel density of the display (in pixels-per-inch, or ppi)`
To determine screen size & density quickly, please install "What's my Size" app for Android.
Screen size
Android defines four generalised screen sizes:
Qualifier Size
small ~3 inches (approx)
normal ~4 inches (approx)
large Exceeds 4 inches
xlarge Exceeds 7 inches
Most phones are classified as small or normal (roughly 3 to 4 inches diagonally). But now, there are many phones with large screen such as Galaxy S4, HTC One, Xperia Z
A small tablet like the Samsung Galaxy Tab is classified as large (larger than 4 inches)
Extra-large applies to large devices, for example large tablets
Android defines four generalised screen densities:
Qualifier Description Nominal value
ldpi low density 120 ppi
mdpi medium density 160 ppi
hdpi high density 240 ppi
xhdpi extra high density 320 ppi
Typically:
screen size has most impact on your app layouts
screen density has most impact on your image and graphic resources
It is listed here the percentage difference of device screen
Ldpi- 75%
Mdpi- 100% (base according to Android developer site)
Hdpi- 150%
XHdpi- 200%
But as we know now most of device coming with 480X800 so I'm consider this as based device, so our new calculation will like this
Ldpi- 50%
Mdpi- 66.67%
Hdpi- 100%
XHdpi- 133.33%
which means that first icon and design will be created for 480X800 only and then for rest ones(i.e. Ldpi, Mdpi, Xhdpi).
There are images which are common for all layout and must uniform in color and shape(no complex shape, no curve) so for this kind of image we are creating 9patch which to be put in “drawable(no-suffix)” folder. To create 9Patch image you can either use DrawNinePatch or BetterNinePatch
Now just rename your images based on Android's standards and complete your application with hdpi and then just take drawable-hdpi folder and Open Adode Photoshop(recommended)
create Action of multiple size(just change the size according to percentage ratio) once Action created for all size then just do Batch Automate and give source(drawable-hdpi) and destination(drawable-ldpi, drawable-mdpi, drawable-xdpi).
The reason I insist you to use Photoshop because it will resize automatically your image with Actions and one more plus point is that you need not to rename the file(it will assign same name as original one).
once you completed with creation of all images, refresh your project and test it.
Sometimes there may be possibility that the layout which support screen(xhdpi, hdpi, mdpi) may be get cut in small screen(ldpi) so for handling this just create separate Layout folder(layout-small) for it and add ScrollView(mostly). Thats it.
Tablet
Tablets are categorized into two size.
7"(1024X(600-48(navigation bar))) = 1024X552 (drawable-large)
10"(1280X(800-48(navigation bar))) = 1280X752 (drawable-xlarge)
In this we need to create image for both the screen and just put them accordingly
So all in all we will have this folder in our application to support multiple screen.
drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-large
drawable-xlarge
will be more qualifier combination with Screen size and Screen density
drawable-large-ldpi
drawable-large-mdpi
drawable-large-hdpi
drawable-large-xhdpi
more qualifier with Screen density and Version
drawable-ldpi-v11
drawable-mdpi-v11
drawable-hdpi-v11
drawable-xhdpi-v11
and more qualifier with Screen size and Version
drawable-large-v11
drawable-xlarge-v11
and more qualifier with Smallest width concept(SW)
drawable-sw???dp
Further more in Android V3.0 Honeycomb they introduced new concept of SW(smallest width) in which device are categorized into screen width, so if we are creating a folder named drawable-sw360dp then the device with 720dp(either width or height) will use resource from the this folder.
for example to find the Samsung Galaxy S3 dp to suffix to drawable-sw?dp
With reference of DP Calculation, If you want to support your layout or drawable to S3 then the calculation says
px= Device's width = 720
dpi= Device's density= 320
formula given
px = dp * (dpi / 160)
interchanging formula because we have px's value
dp = px / (dpi / 160)
now putting value,
dp= 720 / (320/160);
dp=360.
so drawable-sw360dp will do the job
Get you Device configuaration from GsmArena
Sameway you can also create folder according to Device's Android API version i.e. drawable-hdpi-v11` so the device which is having API11 and it is Hdpi then it will use this resources.
Additional Tips:
Use relative layouts, dp, sp, and mm
dp units - device independent pixels normalised to 1 physical pixel on a 160 ppi screen i.e. medium density. Scaled at runtime. Use for screen element dimensions
sp units - scaled pixels, specified as floating point values, based on dp units but additionally scaled for the user's font-size preference setting. Scaled at runtime. Use for font sizes
you should always use RelativeLayout for layouts; AbsoluteLayout is deprecated and should not be used.
Use appropriate image formats - PNG versus JPEG
Android "prefers" PNG for bitmap image files, "accepts" JPEG, and "discourages" GIF.
However, PNG and JPEG are not equivalents. They have different quality trade offs, and PNG is not always best:
JPEG can offer up to 50% file-size reductions over PNG, which is significant if your app is image-intensive
A higher quality "lossy" JPEG may look better than a highly compressed "lossless" PNG, for the same file size
Add labels to your images and graphics for debugging
Use the supports-screens element
Configure your emulators with real device values
Conventionally, desktop systems display at 72ppi (Mac), or 96ppi (Windows, Linux). Compared with mobile, desktop displays are always low density.
Always configure your Android emulators to mimic real device values, and always set them to scale to emulate device density.
In Eclipse, it's easy to create multiple emulators (from the Eclipse menu bar, select Window > AVD Manager > New) configured with values for real devices:
Name the emulator for the real device it's emulating
Specify Resolution, don't use Built-in generic sizes
Set the device density to match the real device (in the Hardware pane set Abstracted LCD Property to the real density, always an integer value)
When you launch the device, always select Scale display to real size, and type in the real screen dimension in inches.
If you don't set the device density, the emulator defaults to low density, and always loads ldpi-specific resources. Resolution (pixel dimensions) will be correct, but your density-dependent image resources will not display as intended.
Of course, nothing you do will reproduce higher density image quality on a lower density desktop display.
Here is the Data collected during a 7-day period ending on October 1, 2012. To see the latest statistic about Android platform version, go to here
Based on Screen Size
Based on Screen Density
Designers should create base designs of
base size of mdpi devices * density conversion factor of highest supported density bucket
size.Base screen size is 320 X 480 px and density buckets are as follows:
ldpi: 0.75
mdpi: 1.0 (base density)
hdpi: 1.5
xhdpi: 2.0
xxhdpi: 3.0
xxxhdpi: 4.0
And to tackle extra available space on Android devices should use stretchable components in both the directions (horizontally and vertically). Detailed info is available here:
http://vinsol.com/blog/2014/11/20/tips-for-designers-from-a-developer/
Related
My company has a Android app. Our clients view the app with a Lenovo Tab M8. I am a designer tasked with recreating the current app experience in Figma so that our design team can have a design system and make accurate mockups. But I'm struggling to capture basic measurements (my experience is in Web and not Native apps).
The first question is, what is the width and length of the screen in pixels? I'm trying to create a basic screen template in Figma. I know the Lenovo display is 1280x800px with 16:10 screen ratio. But when I create a 1280x800 frame in Figma it's significantly larger than the physical device. I'm a little lost.
The other question is, I'm trying to recreate font sizes but I know the app uses dp and not px. I found a site that convert them, but I don't know if the tablet is LDPI, MDPI, or whatever.
https://www.pixplicity.com/dp-px-converter
Thanks for any insights you have.
You shouldn't need to know what density the tablet is, the point of using dp (density-independent pixels) is that everything will look pretty much the same size in the real world. The baseline density is LDPI, which is 160 pixels per inch - so 160dp is one inch on the screen.
XHDPI is 320 pixels per inch, so double the density - but converting 160dp to pixels on XHDPI devices involves multiplying it by 2, so the result is 320 pixels - which again corresponds to 1 inch on a 320dpi screen. See how it works?
So the pixel resolution isn't important, a tablet will be large in dp terms because they're physically bigger than a phone, more inches and all that. But if you're curious, if your M8 is the 2nd-gen one, according to the tech specs it's 4.8" on the 800 px axis (the one with the smallest bezels), and that works out to 166.7 DPI without taking those bezels into account - so it's an LDPI device!
I don't know anything about Figma, but so long as you're using dp measurements it should work ok? You have to be aware of the size of your screen though - when you said you created a frame 800 high and it was too big, if that was 800dp then 800 / 160 is 5" and your screen is only 4.8" high. Ideally your layout shouldn't require a specific physical size though, it should be able to adjust since different devices (even very similar ones) are different sizes - but I don't know how Figma works with that! That's just the way it works for the standard Android stuff
Also ideally fonts should use sp which is like dp but it has an additional scaling step depending on the user's font size settings on the device - it lets them shrink or enlarge text to their preference and for accessibility (the latter is especially important). Sometimes you want a fixed size for something that's more of a graphic element, but generally text should be scalable
If you want to know how to convert, have a look at the Material Type System - there's a chart there for converting between different units (also 1sp = 1dp for the Normal text size FYI). There's also a tool on there to create a type scale but only for stuff on Google Fonts - just saves you doing it yourself!
I'm making an android App that shows images at full screen.
I learned some about dpi and dp, but I didn't find how many pixel must be the largest side of my images (in prospective to good fit also in landscape mode) to appear good in different devices.
As in the documentation, the most used screen configurations are normal with hdpi, xhdpi and xxhdpi density:
So, if my thinking is correct, I can make only one image to fit the xxhdpi to works fine also with the other two densities, and put it in Android Studio under the "res/drawable" folder (without qualifier).
Specifying the image size in dp in the layout, Android should scale the image for the smaller configurations.
But, for the xxhdpi, how many pixel must be the largest side of my image, in pixel, to show good?
Edit: how many pixel must be the longest side of my image to be showed properly in a device with xxhdpi density without the image appearing grainy?
All images are photo, not icons, so I can't use the vector graphics.
By looking at the Android Documentation. One can estimate the size of the picture. look at below picture
So, your image resolution should be in similar resolution
LDPI: 200 X 320px
MDPI: 320 X 480px
HDPI: 480 X 800px
XHDPI: 720 X 1280px
XXHDPI: 960 X 1600px
XXXHDPI: 1440 x 2560px
A little bit of +/- won't affect the outcome because with these standard sizes the aspect ratio of any portrait picture should be respected.
Well, if you put the image which fits the xxxhdpi inside the folder drawable, then it will fit all the screens.
But there is another way to use only one image instead of using multiple images for different resolutions. It's by using svg images which are vector images that will not be affected by zoom in or zoom out.
To use svg you need to follow these instructions:
Make the icon to be icon.svg
In the Android Studio, right click on drawable folder
Choose New -> Vector Asset
Choose Local File (SVG, PSD)
Choose your svg file
Click Next and choose the name
Click Finish
In the app build.gradle add the following inside android block:
vectorDrawables {
useSupportLibrary true
}
In the xml layout file, add the following:
<AppCompatImageView
android:width="wrap_content"
android:height="wrap_content"
app:srcCompat="#drawable/your_svg_file"
/>
Android have ratios defined for a image to set in all different drawables
Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.
mdpi: 160 dpi 1×
hdpi: 240 dpi 1.5×
xhdpi: 320 dpi 2×
xxhdpi: 480 dpi 3×
xxxhdpi:640 dpi 4×
Above size is for normal pixel icons. There are fix android size for Action bar, Dialog & Tab icons, Launcher icons & Notification icons
Check this link for more details http://iconhandbook.co.uk/reference/chart/android/
You have to take a look at the current market of smartphones.
Here you can see the screen sizes and resolutions of the most popular devices in the market.
http://screensiz.es/
Order the list in pixel per inch and you will see that top smartphones have resolutions bigger than 500 ppi or another way to see it, much bigger than 72ppi of your images.
If you have enough space to store or mechanism to download images try to test with full quality. If thats too much try to find a compromise. Lower image quality and see the result in high resolution screen.
Note that you didn't posted here the total size of image, in case is bigger than screen size, take a look at total size of image and compress it to fit your needs, maintaining as much as possible the resolution.
Edit: Looking only to size of image in pixels, the current biggest screen in smartphone is 2560 x 1440 pixels, so you wont need any image bigger than this.
If I understand your answer correctly, you are talking about images (pictures of lovely cats and dogs?) and not about icons?
I prefer putting images into the nodpi folder.
nodpi Resources for all densities. These are density-independent
resources. The system does not scale resources tagged with this
qualifier, regardless of the current screen's density.
Afterwards I would create a fullscreen ImageView and let imageView do the scaling if needed
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 am working on an application that will run on multiple devices. I have three devices for testing.
HTC Desire S -- 480 x 800 pixels, 3.7 inches (~252 ppi pixel density)
Samsung P6200 Galaxy Tab 7.0 Plus -- 600 x 1024 pixels, 7.0 inches
(~170 ppi pixel density)
Samsung Galaxy Tab 2 10.1 P5100 -- 800 x 1280 pixels, 10.1 inches
(~149 ppi pixel density)
As per my understanding if i correctly develop my application for above three, most of the other devices will be handled. may be?
My question is from where should i start designing my images? As the both tablets are of mdpi density but different screen sizes, i designed the images for TAB2 and placed the images in drawable-mdpi directory, those images were shown perfectly on TAB2 but on TAB7, things are messed up, images are overlapping on each other.
So, both the tablets are mdpi and for mdpi, images should be placed in drawable-mdpi but for which tablet size should i design images?
Application UI usually is not fully bitmapped. You got some elements like icons which are fixed size, but from other hand your buttons should scale without problems. So assuming you want to target all devices, you should design your UI the way it fit on smallest supported screen (in this case 600 x 1024 pixels is your max) - this means that if you preview on said screen all UI elements are fully fit on screen. On higher screens you UI have to scale, but this usually do not need any special approach (unless you work on bitmapped game for example) as elements like lists, buttons, layouts will stretch automatically. And if your design assume any bitmaps involved in said scalable elements, use 9-patch PNG files to make it scale correctly.
For more on that subject, please read "Supporting Multiple Screens".
I recommend you designing for xhdpi, you can allways resize for lower dpis.
Take into account dpi is not related to screen size, on the other side, larger screen tablets have lower dpi than most "modern" phones.
Make the layout for target screen sizes, i.e. 10" and 7" tablets, the system will take the best bitmap for your device dpis (or restcale the nearest one!).
With the latest (beta) Android SDK and Eclipse plugin you'll take a better view of the differents devices screens: dpi + pixel resolutions + screen size., they now show, for exaple, like
7" WSXVG (Tablet) (1024x600: mdpi)
in the layout editor.
In my application I have 3 different layout folders:
layout
layout-large
layout-xlarge
I did this according to the available Android device screens, described here. So I thought that the screen size in inches is the only thing that is used to decide which layout folder to use. But recent tests with various 7 inch emulator showed that sometimes the layout and sometimes the layout-large folder is used. So can anybody tell me which other factors are used?
7 inch Android tablets are HDPI and large.
xlarge didn't exist at the time they were made, and although most of them have pixel densities around 160 (MDPI) they present themselves as HDPI devices because it looks better.
So the 7inch tablets don't quite fit into the resources system properly, because there wasn't really a way to fit them in prior to 3.0 which introduced new screen-size qualifiers.
I think size in inches is the only thing that matters. There was a question on here a while back where someone has having some odd results with trying to make emulators pick from the correct layout folders for 7 inch devices. I have a Galaxy tab though and it will always take from layout-large, or layout-hdpi.
Edit: perhaps I was incorrect it seems that type of screen and pixel count may matter too -
* small: Screens based on the space available on a low-density QVGA screen. Considering a portrait HVGA display, this has the same available width but less height—it is 3:4 vs. HVGA's 2:3 aspect ratio. The minimum layout size for this screen configuration is approximately 320x426 dp units. Examples are QVGA low density and VGA high density.
* normal: Screens based on the traditional medium-density HVGA screen. A screen is considered to be normal if it is at least this size (independent of density) and not larger. The minimum layout size for this screen configuration is approximately 320x470 dp units. Examples of such screens a WQVGA low density, HVGA medium density, WVGA high density.
* large: Screens based on the space available on a medium-density VGA screen. Such a screen has significantly more available space in both width and height than an HVGA display. The minimum layout size for this screen configuration is approximately 480x640 dp units. Examples are VGA and WVGA medium density screens.
* xlarge: Screens that are considerably larger than the traditional medium-density HVGA screen. The minimum layout size for this screen configuration is approximately 720x960 dp units. In most cases, devices with extra large screens would be too large to carry in a pocket and would most likely be tablet-style devices. Added in API Level 9.
If you happen to have folders with more than one qualifier like layout-large-mdpi etc you have to pay attention to the precedence order also. this page should help out.
According to Google's android screen support guide res/layout is used for normal screens and is the default folder in which the OS looks.