位图比例破坏质量

Question

I have made a Watch Face for Android Wear.
But the problem is image scaling. Images for background, markers and gadgets are of reduced quality when I resize them.

For example, I put 480x480 background image in drawable-nodpi folder (I have tried other dpi as well), and I rescale it like this:

BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = true;
Bitmap bgImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ticks_1, options);
bgImage = Bitmap.createScaledBitmap(bgImage , width, height, false);

Here are the images:

and this is what I get on the watch:

Am I doing something wrong with resizing or what?

Answer 1

I have found a solution here and it works great.
Here is the part of the code for scaling the image:

public Bitmap getResizedBitmap(Bitmap bitmap, int newWidth, int newHeight) {
        Bitmap resizedBitmap = Bitmap.createBitmap(newWidth, newHeight, Bitmap.Config.ARGB_8888);

        float scaleX = newWidth / (float) bitmap.getWidth();
        float scaleY = newHeight / (float) bitmap.getHeight();
        float pivotX = 0;
        float pivotY = 0;

        Matrix scaleMatrix = new Matrix();
        scaleMatrix.setScale(scaleX, scaleY, pivotX, pivotY);

        Canvas canvas = new Canvas(resizedBitmap);
        canvas.setMatrix(scaleMatrix);
        canvas.drawBitmap(bitmap, 0, 0, new Paint(Paint.FILTER_BITMAP_FLAG));

        return resizedBitmap;
    }

Answer 2

A few comments on the below code. The options section of your decoding doesn't do anything, as no sample size is set. So it can be removed.

// BitmapFactory.Options options = new BitmapFactory.Options();
// options.inScaled = true;
// Bitmap bgImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ticks_1, options);
Bitmap bgImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ticks_1);
bgImage = Bitmap.createScaledBitmap(bgImage , width, height, false);

I think the issue with your image distortion, is in-fact the image itself. When you resize is down to 75%. It is just unable to resize it while keeping the image looking exactly the same. the bands are so thin that any slight off is causing to appear different.

I suggest trying it with thicker rings. And see if the image is distorted or not. Even just as a quick test, or permanent solution.

update:

To expand on keeping images crisp clear at all resolutions, look into VECTOR images . These are pixel perfect at all resolutions, and would present fantastic graphics on all watches. Especially, since you are using basic shapes, it should be easy to achieve.

If you are resizing bitmaps, you can expect blur as the image is redrawn. If it must be a bitmap, include multiple resolutions in the different dpi folders so that android selects accordingly, the best match for resizing.

Answer 3

Change

bgImage = Bitmap.createScaledBitmap(bgImage , width, height, false);

to

bgImage = Bitmap.createScaledBitmap(bgImage , width, height, true);

This will apply simple bilinear interpolation. Result will be a bit blurry image as circles are so thin, but there will be more information used to create scaled image. Resulted image will also have some moire-pattern, but will be less distorted than in your example picture. If you downscale image in Photoshop using Bicubic filtering, you will get the best results, but even then using vector graphics will outperform any bitmap-based efforts like Doomsknight suggested.

Answer 4

Above Accepted cuts the bitmap try my answer

  public Bitmap getResizedBitmap(Bitmap bitmap, int newWidth, int newHeight) {
             Bitmap scaledBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());

    float scaleX = newWidth / (float) bitmap.getWidth();
    float scaleY = newHeight / (float) bitmap.getHeight();
    float pivotX = 0;
    float pivotY = 0;

    Matrix scaleMatrix = new Matrix();
    scaleMatrix.setScale(scaleX, scaleY, pivotX, pivotY);

    Canvas canvas = new Canvas(resizedBitmap);
    canvas.setMatrix(scaleMatrix);
    canvas.drawBitmap(bitmap, 0, 0, new Paint(Paint.FILTER_BITMAP_FLAG));

    return resizedBitmap;
}