The android version is 2.2. And the apps will not support drawable-xhdpi with drawable-xlarge folder. However, i have met many issue when I am processing different screen size from different mobile.
The first problem is that I want to know what is the situation that android will load correct image from drawable-ldpi, drawable-mdpi, drawable-hdpi folder? There are one image in each folder (drawable-ldpi, drawable-mdpi, drawable-hdpi).
(1) 240px x 150px for drawable-ldpi
(2) 320px x 200px for drawable-mdpi
(3) 480px x 300px for drawable-hdpi
But why i cannot see correct image if the output device width screen is 480px? The output device only shown 320px width image. Not the 480px image. The issue seems that what the thing i have missing?
Then, i renamed all drawable folder to drawable-small, drawable-normal, drawable-large. It is working that drawable-large can display 480px width image. Will it be good if i do this way?
The second issue is that some samsung device have got different screen resolutions, i would like to know how to support these screen resolution as I want to make 800px width screen displays 800px width image, 900px width screen displays 900px width image? Any method can do different screen resolution? Many people said the folder drawable-xhdpi can solve issue that image can be auto-scaling. I cannot see any image can be auto-scaling. Maybe i have missing some steps.
Kindly advise.
Thanks a lot.
I will try to give you better insight into this.
Screens can be divided into more or less 4 different categories:
Low-density
medium-density (Baseline)
high-density
extra-high-density
You also get xxhdpi these days...
low-density = ldpi (120dpi)
medium-density = mdpi (160dpi)
high-density = hdpi (240dpi)
extra-high-density = xhdpi (320dpi)
Another good example comes from the android developer pages:
http://developer.android.com/images/screens_support/screens-ranges.png
You can find a list of devices and their pixel densities here:
h ttp://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
h ttp://checkscreensize.appspot.com/listdevice.jsp
You will always be designing apps with multiple layouts/drawables to support different devices. Not just Samsung devices, but most brands have different devices with different pixel densities and resolutions.
In short, by providing multiple resources, android will choose the correct one to best fit the current device and if it does not find one in a certain layout or drawable folder, it will simply use the next best layout/resource with that name.
Note, this is to avoid stretching and incorrect scaling of drawables and layouts.
How to support multiple layouts ?
in your manifest file.
<supports-screens
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"
android:anyDensity="true" />
Provide different layouts or drawables for different screen sizes.
Now, there are multiple ways of doing this and some ways are dependent on the sdk level.
Pre Android 3.2 / API 13 , use layout-small/normal/large/xlarge.
After Android 3.2 / API 13 , use layout-hdpi, or layout-sw600dp etc.
Here is the official table of qualifiers you can use, by placing a dash between them:
http://developer.android.com/guide/practices/screens_support.html#qualifiers
Generally, I think that you will only design for landscape mode with tablets, therefore, you could consider using only these and:
layout-ldpi
layout-mdpi
layout-hdpi
layout-xhdpi
layout-large
layout-large-land
layout-xlarge
layout-xlarge-land
and for your drawables:
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
Further, by default, I currently choose to design for 6 different devices that overall fits best in the profiles ldpi, mdpi, hdpi, xhdpi for phones (4) and tablets (2):
Samsung Galaxy S3 (720x1280, xhdpi, Normal screen size)
Samsung Galaxy S2 (480x800, hdpi, Normal screen size)
Samsung Galaxy Ace Plus (320x480, mdpi, Normal screen size)
Samsung Galaxy Mini (240x320, ldpi, Normal screen size)
Samsung Galaxy Tab 10.1 (800x1280, mdpi, X-Large screen size)
Samsung Galaxy Tab 7.0 (600x1024, hdpi, Large screen size)
Designing for these devices ensures that the app will work great on most other devices aswell.
Hope this information helped.
Related
I was working on android app based on phone. However, recently the app need to support the tablet.
The design was based on 1920 * 1080, I put all images/ icons into the xxhdpi folder and for lower resolution I just let android to help me rescale it.
The problem is , it works well on phone(1280 * 800 5"), but when I use tablet to check it (say , galaxy tab 2 which resolution is only 1280 * 800 10.1" and 1024 * 600) but it looks like very blur . How to fix it ? Thanks for helping.
Added
<supports-screens
android:resizeable="true"
android:smallScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"
android:normalScreens="true"
android:anyDensity="true"/>
already but still the same
Update: I also find that the dp is too small for the tablet
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
<!-- API 11 theme customizations can go here. -->
<item name="android:actionBarSize">60dp</item>
</style>
I was using a custom actionBarSize , it works nice on phone, but the 60dp is too small for tablet, how can I fix it as well? Thanks
Well, I don't think you following the guidelines when you're using images. The android documentation doesn't say anything about screen resolutions when dealing with images, it rather focuses on pixel density when referring image resources (usually drawables) which is explained here. Remember that you can have two types of images (as far as I know):
Image resources (usually drawables)
Image assets
When using drawables you have to focus on pixel density rather than screen resolution because as you have just found out a small (or regular) screen device can have exactly the same resolution as a large screen device, to top it off, sometimes a normal screen device (handset) can have a higher resolution than a large screen device (tablet) where obviously in this case the handset has a much higher pixel density. So, you need to follow their guidelines take a medium pixel density (mdpi) device as the baseline to design your image resources as follows...taking a 96px image as an example...
for a medium density device (mdpi) provide an image with 96px in the drawable folder...this is your baseline
then, target a high pixel density(hdpi) device by multiplying your baseline image by 1.5...that is, 96x1.5 = 144px...place this image inside the drawable-hdpi folder with exactly the same name
a x-large pixel density device image would be the baseline image multiplied by 2 (96x2=192px). This goes inside the drawable-xhdpi folder
for an xx-large picel density (xxhdpi) device multiply the baseline image by 3 (96x3=288) and place it inside the drawable-xxhdpi folder
Notice in the link provided that you don't need to provide an image for a device with a low pixel density since Android scales it down from mdpi without any problems...
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.
In your case, whats happening is that your Galaxy tablet has a lower pixel density and Android down-scales the image from a xxhdpi to whatever density the tablet has (hdpi or xhdpi)....so, it your image is a 512px image Android would down-scale it to 341px for xhdpi or 256px for an hdpi device.
If you follow these guidelines and focus on pixel density, you should be fine. However, for images in the assets folder there's no much you can do apart from using the ScaleType enum or using stretchable 9-patch images
Hope this helps
Update
Actually, according to this link, the Galaxy Tab 2 has mdpi screen, which means your image will be scale down three times from xxhdpi. You should provide the same images with different sizes inside the appropriate drawable-x folders
I know its a way too late but recently I faced the same issue about the way app launcher icons looks on a tablet and they are blurry. I'm sure that AOS honestly chooses mdpi drawables for tablets with mdpi display density and thats the problem. So I solved this by placing smartphones icons to a tablet resources dirs as following (left column - usual smartphone drawables-density and the right - tablet dirs):
drawable-xhdpi -> drawable-large-mdpi (these are 96x96px)
drawable-xxhdpi -> drawable-large-hdpi (these are 144x144px)
drawable-xxxhdpi -> drawable-large-xhdpi (these are 192x192px)
drawable-xxxhdpi -> drawable-xlarge (these are 192x192px)
I'm not sure if last two has to be 288x288 px but since I don't have such icons in the project I guess 192x192 should be enough.
Nexus 7: 7" 1280x800
Galaxy tab 10.1 10" 1280x800
I want my app to run on 7 and 10 inch tablets. As far as I know, I have to include these layout folders in my app:
for 7 inch tablets
layout-sw600dp
layout-sw600dp-port
for 10 inch tablets
layout-sw720dp
layout-sw720dp-port
It runs fine on the nexus 7, but loads the sw600dp layouts on the 10" tablet.
If I include these default folders:
layout
layout-port
10" galaxy tab loads layouts from these.
If I only include the default layout folders and the sw600dp one, it crashes on the nexus7.
How am I supposed to support phones, 7" tablets and 10" tablets, if the 10" galaxy tab won't load the sw720p layouts?
edit:formatting
The problem was, that I had no default layout folder.
I tried getting by, using only the sw600dp and sw720dp folders. I still have no idea why they don't work, but I don't care. I can't use swxxxdp <3.2 anyway, so screw that.
So if you want to write an app, that has to support phones(2.2+), 7inch tablets and 10 inch tablets, use the following oldschool stuff:
layout this is the default, it is needed even if you don't plan to support phones!
layout-large for 7" tablet (works on emulator and nexus7)
layout-xlarge for 10" tablet (works on emulator and galaxytab10.1)
Other people have came to the same conclusion too.
I am also facing such problem in my application. But I found a good solution for this.
I have only one layout for tablet and directory name is layout-sw600dp.
Now, when part came to height and width problems, I have created several different values directory in which i place dimensions and font size and other stubs. So there will be no constant value in layout of tablet screen.
androd:layout_width:"60dp" // i drop this scenario
androd:layout_width:"#dimen/tab_width" // i used this scenario
and your values directory name will be like
values-xlarge
values-large
All the values will be fetched from your values directory. It will not create different layout, but one layout can be used multiple times.
Following are words of Developer.android site.
Configuration examples
To help you target some of your designs for different types of devices, here are some numbers for typical screen widths:
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).
Using the size qualifiers from table 2, your application can switch between your different layout resources for handsets and tablets using any number you want for width and/or height. For example, if 600dp is the smallest available width supported by your tablet layout, you can provide these two sets of layouts:
res/layout/main_activity.xml # For handsets
res/layout-sw600dp/main_activity.xml # For tablets
===
In this, you can see that, layout for 1280*720 is under layout-sw720dp so instead of creating layout-normal-xlarge you should use this thing which lets you to decide differences. Instead of identify differently using layout-large-mdpi and layout-large-ldpi, are't you just identify by its smallest width? Because, android providing drawables directory for different images, only thing is its resolution. And you have above solution.
Edit
Then you must have to develop different layouts. No other option. I found at http://jamil.fluidsoul.net/2011/03/06/creating-android-applications-for-multiple-screen-sizes.
Low density Small screens QVGA 240x320 (120dpi):
layout-small-ldpi (240x320)
layout-small-land-ldpi (320x240)
Low density Normal screens WVGA400 240x400 (x432) (120dpi):
layout-ldpi (240 x 400 )
layout-land-ldpi (400 x 240 )
Medium density Normal screens HVGA 320x480 (160dpi):
layout-mdpi (320 x 480 )
layout-land-mdpi (480 x 320 )
Medium density Large screens HVGA 320x480 (160dpi):
layout-large-mdpi (320 x 480 )
layout-large-land-mdpi (480 x 320)
Galaxy Tab ( 240 dpi ):
layout-large (600 x 1024)
layout-large-land (1024 x 600)
High density Normal screens WVGA800 480x800 (x854) (240 dpi):
layout-hdpi (480 x 800)
layout-land-hdpi (800 x 480)
Xoom (medium density large but 1280x800 res) (160 dpi):
layout-xlarge (800 x 1280)
layout-xlarge-land (1280 x 800)
Yes, you should use layout-dependent folders but also make sure any device independent layouts go in your res/layout folder.
This is mentioned on the Android developer site but to reiterate their point, if you have a layout that is only available in an layout-xlarge folder on an app that supports say large and normal sized devices as well, the app will crash as smaller devices will not be able to find any match for this resource.
Here is a good folder structure, start with:
res/layout
Keep a device-independent layout in there, you can avoid this if you are accounting for every possible qualifier type but this is still the safer option.
If you want to add specific layouts for say 7 and 10 inch tablets, use all of the following:
res/layout-large
res/layout-xlarge
res/layout-sw600dp
res/layout-sw720dp
res/layout-sw800dp
And so on for any specific device screen widths you want to support. It should be noted that sw600 supports the smallest possible width, so avoids the use of the screen width when the device is held landscape. Using the swxxxdp qualifers are preferred but these were added in API 13 so you will still need large, xlarge for older Android OS.
Regarding use of the dpi, be aware that if you ONLY set one density qualifier for a size, so layout-large-mdpi for example, then any devices that match the large qualifier will use layouts from here instead of another folder, this is due to the Best Match criteria, which you can read about here. It will match it as a large device before it will match the density so non-mdpi density screens will still use these layouts.
To counter this, you will have to include folders for whatever other densities you support as well, so layout-large-hdpi following on from the above example, and include in this folder hdpi versions of layouts that you have used in the mdpi folder if you require them to be different.
Avoid duplicating your layouts as well of course, don't copy device-independent layouts into every unused folder if you only need them in res/layout, try and only keep the layouts that need these qualifiers in the folders and organise them properly, making sure your folders are named with the qualifiers in the right order of precedence to prevent using the wrong folder for a density/size combination.
This is very strange, since you are doing the correct thing.
The sw600dp qualifier should be selected by the Nexus 7.
If available, the sw720dp qualifier should be selected by the Galaxy Tab.
Are you sure it crashes when trying to find an appropriate layout? Android may find the correct layout, but something in the layout xml file may be missing and the crash is caused by that.
I want to make my application to multiple screen support. so to achieve this i read the Android developers guildeline https://developer.android.com/guide/practices/screens_support.html and i have created the different drawable and layout folders to put different size of images.
I tested the application in different devices and it looks fine in those devices, while i found that in one of 7" tablet the images are too small. to confirm this i created simple project and put same name of images in different folder and found that this device uses ldpi drawables and in generally the size of ldpi drawable used to be 36x36 and that causes the issue, if i increase this drawable size then it will not compatible with other low-density devices.
Here is the Dispaly Metrics of the device in which i am having a problem.
{density=0.75, width=800, height=444, scaledDensity=0.75, xdpi=160.0, ydpi=160.42105}
How to deal with this problem ? if anyone have this issue before then please give me some advice. any idea and help will be appreciated.
Thanks & Regards
You can get more control over this:
Specify multiple different images for different screen resolutions and densities. To do so read supporting multiple screens. If you need even more precision in image scaling and quality you can use the fundamental size of screen attribute which is sw<N>dp - you can specify the smallest width of the screen where your image should be used. This is a qualifier name for a resource folder.
Some values you might use here for common screen sizes:
320, for devices with screen configurations such as:
240x320 ldpi (QVGA handset)
320x480 mdpi (handset)
480x800 hdpi (high density handset)
480, for screens such as 480x800 mdpi (tablet/handset).
600, for screens such as 600x1024 mdpi (7" tablet).
720, for screens such as 720x1280 mdpi (10" tablet).
Just specify your device width and put your edited image that fits the best in corresponding sw<N>dp folder in your case sw<444>dp.
You should also have a look at other qualifiers that make Android choosing image at runtime (screen density, Available width, Available height, Screen size or Screen aspect). By combining these qualifiers and testing carefully you will be sure that the user has the best experience on each device.
Shortly, put your image under drawable-sw<444>dp folder. (444-smaller screen metric)
I am working on a Android Project.
I put the images (320*480) into the mdpi -folder. There are some information in Android developer site that 480*800 tablets(7") also takes images from the mdpi- folder. When the 7" tablet takes images form that mdpi- folder it become smaller. There is only one mdpi- folder so how do i exactly manage it .
You should read the Android developer documentation on Providing Alternative Resources.
From my answer to this similar question:
The ImageView will render the image inside of it at the correct resolution for the device. As per the documentation on providing resources, you must make sure that you provide resources at the correct DPI for each of the resolution types. Android will pick the best resource resolution for you, but if only one resource exists then it will pick that one and try to render at the device resolution.
So, find out the correct DPI for your device, and add the image (at the correct DPI) into that folder and it should appear at the correct size. If the image is placed in the wrong folder then it will appear a different size. Another useful link is the Density Independence documentation.
Note: let's assume your device is an HDPI device. The res/drawables/drawable-hdpi folder might not exit in your project but you can just add it in manually.
Don't mix up screen size with screen density. There are qualifiers related to screen size (e.g. small, normal, large, ...) and qualifiers related to density (e.g. ldpi, mdpi, ...).
You can even combine these qualifiers, for example in drawable-normal-mdpi you can put resources that will be used on devices with normal screen (phones) with a mdpi density.
you should create ldpi, hdpi, xhpi folder too. And you need to copy your image with same name by calculating its ratio.
ldpi - mdpi - hdpi - xhdpi
3 4 6 8
There is a 3:4:6:8 scaling ratio between the four primary densities
(ignoring the tvdpi density). So, a 9x9 bitmap in ldpi is 12x12 in
mdpi, 18x18 in hdpi and 24x24 in xhdpi.
If you decide that your image resources don't look good enough on a
television or other certain devices and want to try tvdpi resources,
the scaling factor is 1.33*mdpi. For example, a 100px x 100px image
for mdpi screens should be 133px x 133px for tvdpi.
I have drawables for each density as ldpi,mdpi,hdpi and xhdpi.
Problem:
Both 10" tablet device (1280x800) and a handset device 320x480 uses medium density. I have an 35x35 mdpi image. But this image is too small for tablet whereas it is ok for handset.
I read relevant documents. But I guess I couldn't understand sth significant. Is there anyway for tablet use xhdpi images or I wonder how to use bigger images for mdpi tablet.
You should add a second identifier large and/or xlarge to your drawable folders. Increase the size in drawable-xlarge-mdpi until you are happy with the result while the drawable-mdpi will be the same size as before.
This increases the app size, but it will fix your issue.
If you want to achieve this without increasing your app size, there is a way to let a high density screen and a large medium density screen use the same resource. You need to place the image you want to re-use in the 'drawable-nodpi' folder. This will stop the platform performing its own scaling when using it. For example, assuming you have a resource called 'my_resource', if you want the tablet-size screen to use your xhdpi resource, then move it out of drawable-xhdpi and rename it like this:
/drawable-nodpi/my_resource_xhdpi.png
Then in both the drawable-xhdpi and drawable-xlarge folders, create a file called my_resource.xml which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/my_resource_xhdpi">
</bitmap>
Now when you use #drawable/my_resource, the xhdpi version will be used by xhdpi screens and xlarge screens, and you only have to maintain one version of the image. I use this technique quite a lot and it works really well. Hope that helps!
These are defined as common practice:
Devices:
drawable-ldpi/xyz.png low resolution devices 320x240 (now a days no phone comes with this resolution)
drawable-mdpi/xyz.png medium resolution devices 480x320
drawable-hdpi/xyz.png high resolution devices 800x480
drawable-xhdpi/xyz.png Extra high resolution devices 1280*720
drawable-xxhdpi/xyz.png Extra Extra high resolution devices 1920x1080
Tablets:
drawable-large-mdpi/xyz.png 7” Tablet (600x1024 mdpi)
drawable-xlarge-mdpi/xyz.png 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
I include some resources in drawable-xlarge, and drawable-large folders, in addition to the drawable-hdpi folders. This works for me.
Another alternative, is to scale an image in code directly, which I do with the following code:
Drawable scaledIcon = new BitmapDrawable(Bitmap.createScaledBitmap(myImage, pxInt, pxInt, true));
myImageView.setBackgroundDrawable(scaledIcon);
It is not a good idea to scale a lot of images in your code (using this method), as I think it is resource intensive to modify the images on the fly like this. I do use this in some cases, where the image I am using may not be a standard size (and I want it to fit right always).