I use .png as a background for a custom button that I declare in XML like this
android:background="#drawable/samplepng"
But I can't get the resolution right for tablet screens :
For example, my ressource is a 200x200 pixels .png (initially designed for iOS and retina)
I place a 100x100 px version in the drawable-mdpi folder and a 200x200 px version in the drawable-xhdpi folder.
I also need to have a layout for a typical 320x480 screen in the layout folder and another layout for 10" tablets in the layout-xlarge folder.
The size of the button is 100x100 dp in the normal layout and 200x200 dp for xlarge layout, so that it looks right.
With the Android emulator, a 10" tablet uses mdpi ressources and xlarge layout.
As a result, the button background is drawn with a scaled version of the 100x100 image which looks very blurry, as opposed to the crisp 200x200 original image.
If I don't use a mdpi ressource, it looks blurry just as well.
Am I doing something wrong ? is it only an emulator problem and it looks nice on a real device ?
Please help, I read 10 times google's doc but can't find an answer.
If you don't launch the emulator with 'Scale display to real size' checked, then it will always use mdpi drawables.
See here for more.
Your issue might be in the android version your targeting. Try switching the emulator to android 3.0 and 3.1.
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.
In my android app, I want to support multiple screen sizes. I realize that for Android "large" means a lot of the current phone screens at 480 x 800 pixels as well as a 7" tablet like the Nexus 7 which has 800 x 1280 pixels. But I'd like to create 2 separate layouts for those two display sizes. I've found that rather than using res/layout-large, using res/layout-h800dp gives me greater control of which size screen uses what layout. (I'm using a portrait orientation, hence h800dp) The problem I'm having is this: sometimes the h800dp layout uses the images in the drawable-mdpi folder, and sometimes it uses the images in the drawable-hdpi folder. I'm using the same syntax in the xml to call the images: `android:src="#drawable/image", but in one activity it looks in the mdpi drawable folder, and in the next activity, it looks in the ldpi drawable folder. Is there any way to get the h800dp layouts to always look in the ldpi folder?
This link explains nearly everything regarding screen properties (DPI, physical size, resolution, etc.)
What you may be able to do is specify folders like layout-large-hdpi, layout-large-mdpi, and layout-large-ldpi.
Experiment with blending these types together in folder names.
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 trying to develop for an android tab with the resolution of 1280x720. But when I place an image, say 1000x500, into the xml view it appears almost two times smaller. When I change its height and width from wrap_content to 1000px and 500px, it looks ok in xml, but when I launch it in the emulator, it gets very blurry, as if it would be at first scaled down and then expanded again.
Any ideas?
Thanks!
Put the drawables for tablet in the drawable-xlarge folder and the problem may dissapear.
Maybe your problems is that the most tablets have xlarge screens and mdpi screen density and you put the drawables in the hdpi folder.
For more info see this page.
Try using "dp" instead of pixels. Also place the drawable in the density specific folder. between ldpi and hdpi the size in pixels need to be twice for them to show up as of same size on the device. For example a launcher icon on ldpi device is 36 x 36px while on hdpi it is 72 x 72 px
Use same ratio to create your image in higher resolution with larger size.
I need explanations.
I develop an application running for Honeycomb on a tablet 10.1.
I set an image 796x1228 pixel in drawable-xhdpi folder. When this image is called directly it displayed on 1/4 of screen size. If I set this image in a layout taking all screen width and height, it scales and result is not clean.
I search a long time before testing to put this same image in drawable-mdpi folder and get a good display.
The Android documentation says that for screen xhdpi we have to put our images in a folder xhdpi, but results is really bad.
Where is my trouble ? Thanks for your explanation, information...
A 10.1" Honeycomb tablet is not xhdpi. It's an xlarge display, which is completely different. The XOOM for instance has an xlarge, mdpi display.
Are you sure your device's screen is xhdpi? Usually, devices with big screens are something like xlarge, mdpi or hdpi.
If you want just to show an image on a view you can put it into drawable-nodpi, load it and apply to your view (or let the app do it automatically).