user782104 user782104 - 1 month ago 8
Android Question

Why the icons / images looks blur (not clear) on tablet , but looks fine on phone in android?

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

Leo Leo
Answer

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):

  1. Image resources (usually drawables)
  2. 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