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).
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.
What I have in my project is:
values-small;
values-normal;
valuse-large;
valuse-xlarge;
these folders contain the dimensions of the images and texts for all the screen sizes;
But should I add hdpi,mdpi... although I've added the size of the image in dp, and the size of the text in sp..?
example:
<dimen name="btnwidth">60dp</dimen>
<dimen name="btnheight">60dp</dimen>
<dimen name="fsinlistview">25sp</dimen>
because I am not getting the needed result on all the devices...
So why the dp and sp aren't being fixed depending on the screen dpi?
Create a Single layout for default screens 4.7 inch (hdpi) in layout folder and dimensions in values folder. This is your superset.
Now let say you want your layouts for 7inch devices.
Create values-sw320dp folder for 7inch in Portrain orientation
Now lets say you want your layouts for 10 inch devices
Create values-dw720dp folder
NOTE :- For landscape just add "-land" in front of folder names.
Now lets say you have new devices such as Xperia SP (4.7' and XHDPI) and Nexus 5(5" and XXHDPI).
For these, you can create values-xhdpi and values-xxhdpi folders..
I hope you got the point of how to create folders..
Now your superset is defined in values folder. Most of the dimensions will be used from here only. Now run your app in other devices. Whatever mismatch is occuring just add that specific dimension in their respective values folder
The answer from #RahulGupta is pretty flawed. You should more follow what #amalBit has written.
As mentioned in my comment, the basic idea is to have a very flexible layout with some basic "cross screen" settings that you can and should follow
For example: The Settings list has on a phone maybe 16-32 dp margin on the sides, on a xlarge tablet like the Nexus 10 it has a way bigger margin. I highly doubt that the Settings screen was built with dozens of dimens files to fit all and every screen resolution, dimension and dpi. I guess that is basically just using one default for all and for the bigger tablets it is using a bigger value. So maybe a differenciation between 320dp and 720dp.
My suggestion: Start small with one layout, one dimens.xml file in your values folder and use a normal phone for your development. When you have done the layouting on it, check it on different screens and see if you need to modify something. Normally on a low res/low dpi device, the paddings/margins and sizes should scale correctly and in a good visual way.
The biggest "issues" you will face with 7"+ tablets and for them I would just start by creating a separate dimens.xml file and increase the dimens I need to make it better looking.
Normally the default values folder should contain 80% of your "style", the rest are just additions to make them fit perfect.
Check this link Supporting multiple screens.
From the above link:
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).
Check out this converter.
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)
In my application i'm using a background image with some text in it, it's size is 800x1280 (portrait mode)
When running the app on mobile devices , the background image looks great.
When running the app on tablet .. let's say Galaxy tab 10.1 you can see that the text in the background image is a little blurred and little pixeled..
it seems like if the image was smaller than the device resolution and got stretched.. only that image is already in the device resolution
What am i missing ?
Thanks
Your drawable folder contains folders ldpi, mdpi, hdpi, xhdpi - it's for different density per inch.
I suppose your mobile device uses mdpi or hdpi, while tablet uses xhdpi.
To get the best perfomance I recommend you to put 4 different sizes of your image to these folders. The sizes should be 0.75 x ORIGINAL_SIZE for ldpi, ORIGINAL_SIZE for mdpi, 1.5 x ORIGINAL_SIZE for hdpi, 2 x ORIGINAL_SIZE for xhdpi
update: tablets are hdpi, not xhdpi
Your device may be scaling the image somehow. Do you have your image in res/drawable? Try putting it in drawable-hdpi, drawable-mdpi and drawable-xhdpi also. This way it should pick the image fitting your resolution and refrain from scaling anything.
Note that you may want it to be scaled on other resolutions, so putting up different resolutions for different dpis is probably wise. But this is a good way to see if this is indeed the problem.
First of all, did you put your background image to specified drawable folders? :) Your image can be scaled.
If You're using linearlayout, you can check another solution, put imageview and layout into framelayout :)
Here you got examples:
android-scale-a-drawable-or-background-image
scale-background-image-in-linearlayout
:)
I'm designing a game possibly for all kinds of Android devices, so I have multiple drawable folders for phones of different resolutions, and for tablets. Here is the list of my folders:
drawable-mdpi - for 480x320 devices
drawable-hdpi - for 800x480 and 854x480 devices
drawable-large-hdpi - for 1024x600 tablets
drawable-xlarge-mdpi - for 1200x800 tablets
My question is what name should have a folder with drawables for qHD resolution, which is 960x540 and 256 dpi? Thanks in advance.
I will deeply, strongly, emphatically encourage you not to use "-large" or "-xlarge" qualifiers with drawables. If you are doing this, you are almost certainly not doing what you think you are.
For example.
"drawable-large-hdpi" does not mean "1024x600 tablets." It means an hdpi screen that is classified as large. There are a huge number of screen sizes that fit in this category. In fact you will soon be seeing 1024x600 mdpi tablets.
And "drawable-xlarge-mdpi" does not mean "1200x800 tablets." First of all, tablets like the Xoom are actually 1280x800. And other possible resolutions here are 1280x720, 960x720, 1920x1200, and on and on and on.
If you are doing this kind of thing, let me suggest: just write some code instead. If you have a set of drawables that you want to pick to best match the space you have available in your UI, write some code that looks at the space it has available and picks a drawable. And when you do this, don't use Display.getDisplayMetrics(). Implement this based on the space actually given to your appropriate view in the view hierarchy.
Now all that said, qHD screens are generally hdpi normal size.
So, another example: "drawable-hdpi" doesn't have anything to do with a resolution at all. Possible resolutions you will see here: 800x480, 640x480, 960x540, and on and on.
\